import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Typography, Spin, Empty, theme } from 'antd';
import {
  SendOutlined,
  ScheduleOutlined,
  PlayCircleOutlined,
  MessageOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';
import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const { Text } = Typography;

interface ActivityItem {
  type: string;
  title: string;
  description: string | null;
  link: string;
  timestamp: string;
}

const TYPE_ICONS: Record<string, React.ReactNode> = {
  campaign_published: <SendOutlined />,
  shift_created: <ScheduleOutlined />,
  media_published: <PlayCircleOutlined />,
  response_approved: <MessageOutlined />,
};

const TYPE_COLORS: Record<string, string> = {
  campaign_published: '#3498db',
  shift_created: '#27ae60',
  media_published: '#9b59b6',
  response_approved: '#e67e22',
};

interface ActivityFeedProps {
  limit?: number;
  compact?: boolean;
}

export default function ActivityFeed({ limit = 10, compact = false }: ActivityFeedProps) {
  const [items, setItems] = useState<ActivityItem[]>([]);
  const [loading, setLoading] = useState(true);
  const { token } = theme.useToken();

  useEffect(() => {
    axios.get<ActivityItem[]>('/api/activity/public', { params: { limit } })
      .then(({ data }) => setItems(data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [limit]);

  if (loading) {
    return <div style={{ textAlign: 'center', padding: 24 }}><Spin /></div>;
  }

  if (items.length === 0) {
    return <Empty description="No recent activity" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: compact ? 8 : 12 }}>
      {items.map((item, idx) => (
        <Link
          key={`${item.type}-${idx}`}
          to={item.link}
          style={{ textDecoration: 'none', display: 'flex', alignItems: 'flex-start', gap: 12 }}
        >
          <div
            style={{
              width: compact ? 28 : 32,
              height: compact ? 28 : 32,
              borderRadius: '50%',
              background: `${TYPE_COLORS[item.type] || token.colorPrimary}20`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              color: TYPE_COLORS[item.type] || token.colorPrimary,
              fontSize: compact ? 12 : 14,
            }}
          >
            {TYPE_ICONS[item.type] || <ClockCircleOutlined />}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <Text
              style={{
                display: 'block',
                color: 'rgba(255,255,255,0.85)',
                fontSize: compact ? 13 : 14,
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {item.title}
            </Text>
            <Text type="secondary" style={{ fontSize: 11 }}>
              {dayjs(item.timestamp).fromNow()}
            </Text>
          </div>
        </Link>
      ))}
    </div>
  );
}
