import {
  ResponsiveContainer,
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
} from 'recharts';
import type { MediaPost } from '../../types/influencer';

interface EngagementChartProps {
  posts: MediaPost[];
}

export function EngagementChart({ posts }: EngagementChartProps) {
  const data = [...posts]
    .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
    .slice(-20)
    .map((post) => ({
      date: new Date(post.timestamp).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
      }),
      impressions: post.impressions,
      reach: post.reach,
      engagement: post.engagement,
    }));

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

  return (
    <ResponsiveContainer width="100%" height={280}>
      <AreaChart data={data}>
        <defs>
          <linearGradient id="colorImpressions" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.1} />
            <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
          </linearGradient>
          <linearGradient id="colorReach" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#0891b2" stopOpacity={0.1} />
            <stop offset="95%" stopColor="#0891b2" stopOpacity={0} />
          </linearGradient>
          <linearGradient id="colorEngagement" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#059669" stopOpacity={0.1} />
            <stop offset="95%" stopColor="#059669" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
        <XAxis dataKey="date" tick={{ fill: '#9ca3af', fontSize: 12 }} />
        <YAxis tick={{ fill: '#9ca3af', fontSize: 12 }} />
        <Tooltip
          contentStyle={{
            backgroundColor: '#ffffff',
            border: '1px solid #e5e7eb',
            borderRadius: '8px',
            color: '#111827',
            boxShadow: '0 1px 3px rgba(0,0,0,0.08)',
          }}
        />
        <Area
          type="monotone"
          dataKey="impressions"
          stroke="#3b82f6"
          strokeWidth={1.5}
          fillOpacity={1}
          fill="url(#colorImpressions)"
          name="Impressions"
        />
        <Area
          type="monotone"
          dataKey="reach"
          stroke="#0891b2"
          strokeWidth={1.5}
          fillOpacity={1}
          fill="url(#colorReach)"
          name="Reach"
        />
        <Area
          type="monotone"
          dataKey="engagement"
          stroke="#059669"
          strokeWidth={1.5}
          fillOpacity={1}
          fill="url(#colorEngagement)"
          name="Engagement"
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}
