import { useNavigate } from 'react-router-dom';
import { Card, Typography, theme } from 'antd';
import { ScheduleOutlined, MailOutlined, EnvironmentOutlined, MessageOutlined, TrophyOutlined, StarOutlined, UserAddOutlined, FlagOutlined } from '@ant-design/icons';
import UserAvatar from './UserAvatar';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const TYPE_CONFIG: Record<string, { icon: React.ReactNode; color: string; getLink?: (meta: Record<string, unknown>) => string }> = {
  shift_signup: {
    icon: <ScheduleOutlined />,
    color: '#52c41a',
    getLink: () => `/shifts`,
  },
  campaign_email: {
    icon: <MailOutlined />,
    color: '#1890ff',
    getLink: (meta) => `/campaigns/${meta.campaignSlug as string}`,
  },
  canvass_session: {
    icon: <EnvironmentOutlined />,
    color: '#fa8c16',
  },
  response_submitted: {
    icon: <MessageOutlined />,
    color: '#722ed1',
    getLink: (meta) => `/campaigns/${meta.campaignId as string}`,
  },
  impact_story: {
    icon: <TrophyOutlined />,
    color: '#faad14',
    getLink: (meta) => `/campaign/${meta.campaignSlug as string}`,
  },
  volunteer_featured: {
    icon: <StarOutlined />,
    color: '#eb2f96',
    getLink: () => `/wall-of-fame`,
  },
  referral_completed: {
    icon: <UserAddOutlined />,
    color: '#13c2c2',
  },
  challenge_completed: {
    icon: <FlagOutlined />,
    color: '#52c41a',
  },
};

interface FeedItem {
  id: string;
  type: string;
  userId: string;
  userName: string | null;
  userEmail: string;
  title: string;
  description: string;
  metadata: Record<string, unknown>;
  timestamp: string;
}

interface FeedCardProps {
  item: FeedItem;
}

export default function FeedCard({ item }: FeedCardProps) {
  const navigate = useNavigate();
  const { token } = theme.useToken();
  const config = TYPE_CONFIG[item.type] || { icon: null, color: token.colorPrimary };

  const handleClick = () => {
    if (config.getLink) {
      navigate(config.getLink(item.metadata));
    }
  };

  const handleAvatarClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    navigate(`/volunteer/profile/${item.userId}`);
  };

  return (
    <Card
      size="small"
      style={{
        marginBottom: 8,
        cursor: config.getLink ? 'pointer' : undefined,
        borderLeft: `3px solid ${config.color}`,
      }}
      onClick={handleClick}
    >
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <div onClick={handleAvatarClick} style={{ cursor: 'pointer', flexShrink: 0 }}>
          <UserAvatar userId={item.userId} name={item.userName} email={item.userEmail} size={36} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ color: config.color, fontSize: 14 }}>{config.icon}</span>
            <Typography.Text strong style={{ fontSize: 13 }}>
              {item.userName || item.userEmail}
            </Typography.Text>
          </div>
          <Typography.Text style={{ fontSize: 13, display: 'block' }}>
            {item.title}
          </Typography.Text>
          <Typography.Text type="secondary" style={{ fontSize: 12, display: 'block' }}>
            {item.description}
          </Typography.Text>
          <Typography.Text type="secondary" style={{ fontSize: 11 }}>
            {dayjs(item.timestamp).fromNow()}
          </Typography.Text>
        </div>
      </div>
    </Card>
  );
}
