import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts';
import type { Stats } from '../api';

const COLORS = ['#f97316', '#22c55e', '#3b82f6', '#a855f7', '#6b7280'];

interface Props {
  stats: Stats | null;
}

export function SourceChart({ stats }: Props) {
  if (!stats || stats.by_source.length === 0) return null;

  const chartData = stats.by_source.map((s) => ({
    name: s.source.replaceAll('_', ' '),
    value: s.count,
  }));

  return (
    <div className="bg-surface-raised border border-border rounded-lg p-4">
      <h3 className="text-sm font-semibold text-text-primary mb-3">Messages by Source</h3>
      <ResponsiveContainer width="100%" height={200}>
        <PieChart>
          <Pie
            data={chartData}
            cx="50%"
            cy="50%"
            innerRadius={50}
            outerRadius={80}
            dataKey="value"
            label={({ name, percent }: { name?: string; percent?: number }) => `${name ?? ''} ${((percent ?? 0) * 100).toFixed(0)}%`}
          >
            {chartData.map((_, i) => (
              <Cell key={i} fill={COLORS[i % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip
            contentStyle={{ backgroundColor: 'var(--color-surface-overlay)', border: '1px solid var(--color-border)', borderRadius: '8px', color: 'var(--color-text-primary)' }}
            labelStyle={{ color: 'var(--color-text-muted)' }}
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}
