import { Card, Typography, Tag } from 'antd';
import { StarFilled } from '@ant-design/icons';
import UserAvatar from '@/components/social/UserAvatar';

const { Text, Paragraph, Title } = Typography;

interface SpotlightData {
  id: string;
  userId: string;
  userName?: string | null;
  headline?: string | null;
  story?: string | null;
  featuredMonth?: string | null;
  stats?: { canvassVisits?: number; shiftSignups?: number; campaignEmails?: number } | null;
}

interface SpotlightCardProps {
  spotlight: SpotlightData;
}

export default function SpotlightCard({ spotlight }: SpotlightCardProps) {
  const monthLabel = spotlight.featuredMonth
    ? new Date(spotlight.featuredMonth + '-01').toLocaleDateString('en-US', {
        month: 'long',
        year: 'numeric',
      })
    : null;

  return (
    <Card
      style={{
        border: '2px solid #d4a017',
        borderRadius: 12,
        background: 'linear-gradient(135deg, rgba(212, 160, 23, 0.08), transparent)',
      }}
    >
      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
        <UserAvatar
          userId={spotlight.userId}
          name={spotlight.userName}
          size={64}
        />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
            <Title level={5} style={{ margin: 0 }}>
              {spotlight.userName || 'Anonymous Volunteer'}
            </Title>
            <Tag color="gold" icon={<StarFilled />}>Featured</Tag>
          </div>

          {monthLabel && (
            <Text type="secondary" style={{ fontSize: 12 }}>{monthLabel}</Text>
          )}

          {spotlight.headline && (
            <Title level={5} style={{ margin: '8px 0 4px', fontSize: 15 }}>
              {spotlight.headline}
            </Title>
          )}

          {spotlight.story && (
            <Paragraph
              ellipsis={{ rows: 3, expandable: true, symbol: 'Read more' }}
              style={{ margin: 0, marginTop: 4 }}
            >
              {spotlight.story}
            </Paragraph>
          )}

          {spotlight.stats && (
            <div style={{ display: 'flex', gap: 16, marginTop: 8, flexWrap: 'wrap' }}>
              {spotlight.stats.canvassVisits != null && spotlight.stats.canvassVisits > 0 && (
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {spotlight.stats.canvassVisits} doors knocked
                </Text>
              )}
              {spotlight.stats.shiftSignups != null && spotlight.stats.shiftSignups > 0 && (
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {spotlight.stats.shiftSignups} shifts
                </Text>
              )}
              {spotlight.stats.campaignEmails != null && spotlight.stats.campaignEmails > 0 && (
                <Text type="secondary" style={{ fontSize: 12 }}>
                  {spotlight.stats.campaignEmails} emails sent
                </Text>
              )}
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}
