import { useState, useEffect } from 'react';
import { Card, Typography, Tag, Space } from 'antd';
import { TrophyOutlined } from '@ant-design/icons';
import axios from 'axios';

const { Text } = Typography;

interface Story {
  id: string;
  title: string;
  type: string;
  milestoneValue: number | null;
  publishedAt: string | null;
}

interface CampaignCelebrationProps {
  campaignId: string;
}

export default function CampaignCelebration({ campaignId }: CampaignCelebrationProps) {
  const [stories, setStories] = useState<Story[]>([]);

  useEffect(() => {
    if (!campaignId) return;
    axios.get(`/api/social/stories/campaign/${campaignId}`, { params: { limit: 5 } })
      .then(({ data }) => {
        const published = (data.stories || []).filter(
          (s: Story) => s.type === 'MILESTONE' || s.type === 'VICTORY',
        );
        setStories(published);
      })
      .catch(() => {});
  }, [campaignId]);

  if (stories.length === 0) return null;

  return (
    <Card
      size="small"
      style={{
        background: 'linear-gradient(135deg, #fffbe6 0%, #fff1b8 100%)',
        borderColor: '#d4a017',
        marginBottom: 16,
      }}
    >
      <Space direction="vertical" size={4} style={{ width: '100%' }}>
        <Space>
          <TrophyOutlined style={{ color: '#d4a017', fontSize: 18 }} />
          <Text strong style={{ color: '#874d00' }}>Campaign Milestones</Text>
        </Space>
        <Space wrap>
          {stories.map((s) => (
            <Tag key={s.id} color="gold">
              {s.milestoneValue
                ? `${s.milestoneValue.toLocaleString()} emails`
                : s.title}
            </Tag>
          ))}
        </Space>
      </Space>
    </Card>
  );
}
