import type { UserActivityEntry } from '../types';

export interface ActivityFeedProps {
  /** Activity entries */
  entries: UserActivityEntry[];
  /** Feed title */
  title?: string;
  /** Maximum entries to show */
  maxEntries?: number;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Click handler for activity items */
  onItemClick?: (entry: UserActivityEntry) => void;
}

const getEventIcon = (eventType: string): string => {
  switch (eventType) {
    case 'page_view':
      return '📄';
    case 'click':
      return '👆';
    case 'conversion':
      return '🎯';
    case 'revenue':
      return '💰';
    case 'error':
      return '⚠️';
    case 'form_submit':
      return '📝';
    case 'session_start':
      return '🚀';
    case 'session_end':
      return '👋';
    default:
      return '📊';
  }
};

const getEventColor = (eventType: string): string => {
  switch (eventType) {
    case 'conversion':
    case 'revenue':
      return '#22c55e';
    case 'error':
      return '#ef4444';
    case 'session_start':
      return '#3b82f6';
    default:
      return '#6b7280';
  }
};

const formatTimestamp = (timestamp: Date): string => {
  const date = new Date(timestamp);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMs / 3600000);

  if (diffMins < 1) return 'Just now';
  if (diffMins < 60) return `${diffMins}m ago`;
  if (diffHours < 24) return `${diffHours}h ago`;
  return date.toLocaleDateString();
};

export function ActivityFeed({
  entries,
  title = 'Recent Activity',
  maxEntries = 10,
  loading = false,
  className,
  onItemClick,
}: ActivityFeedProps) {
  if (loading) {
    return (
      <div
        className={className}
        style={{
          padding: '20px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        }}
      >
        <div style={{ height: '300px', backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  const displayEntries = entries.slice(0, maxEntries);

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
      }}
    >
      {title && (
        <div
          style={{
            fontSize: '16px',
            fontWeight: 600,
            marginBottom: '16px',
            color: '#111827',
          }}
        >
          {title}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {displayEntries.length === 0 ? (
          <div
            style={{
              textAlign: 'center',
              padding: '40px 20px',
              color: '#9ca3af',
            }}
          >
            No recent activity
          </div>
        ) : (
          displayEntries.map((entry, index) => (
            <div
              key={`${entry.sessionId}-${index}`}
              onClick={() => onItemClick?.(entry)}
              style={{
                display: 'flex',
                alignItems: 'flex-start',
                gap: '12px',
                padding: '12px',
                backgroundColor: '#f9fafb',
                borderRadius: '6px',
                cursor: onItemClick ? 'pointer' : 'default',
                transition: 'background-color 0.2s',
              }}
              onMouseEnter={(e) => {
                if (onItemClick) {
                  e.currentTarget.style.backgroundColor = '#f3f4f6';
                }
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = '#f9fafb';
              }}
            >
              <span style={{ fontSize: '20px' }}>{getEventIcon(entry.eventType)}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}
                >
                  <span
                    style={{
                      fontSize: '14px',
                      fontWeight: 500,
                      color: getEventColor(entry.eventType),
                    }}
                  >
                    {entry.eventType.replace(/_/g, ' ')}
                  </span>
                  <span style={{ fontSize: '12px', color: '#9ca3af' }}>
                    {formatTimestamp(entry.timestamp)}
                  </span>
                </div>
                {entry.page && (
                  <div
                    style={{
                      fontSize: '13px',
                      color: '#6b7280',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {entry.page}
                  </div>
                )}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  );
}
