'use client';

import { PieChart, Pie, Cell, Tooltip } from 'recharts';
import { getValenceColor } from '../styles/report-theme';

interface SentimentDonutProps {
  positive: number;
  negative: number;
  neutral: number;
  mixed: number;
}

export default function SentimentDonut({ positive, negative, neutral, mixed }: SentimentDonutProps) {
  const data = [
    { name: 'Positive', value: positive, color: getValenceColor('positive') },
    { name: 'Negative', value: negative, color: getValenceColor('negative') },
    { name: 'Neutral',  value: neutral,  color: getValenceColor('neutral') },
    { name: 'Mixed',    value: mixed,    color: getValenceColor('mixed') },
  ].filter(d => d.value > 0);

  const total = data.reduce((sum, d) => sum + d.value, 0);

  if (total === 0) {
    return (
      <div className="flex items-center justify-center h-64 text-gray-400">
        No sentiment data
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <div style={{ flexShrink: 0 }}>
        <PieChart width={200} height={200}>
          <Pie
            data={data}
            cx={100}
            cy={100}
            innerRadius={55}
            outerRadius={85}
            dataKey="value"
            nameKey="name"
            stroke="white"
            strokeWidth={2}
          >
            {data.map((entry, i) => (
              <Cell key={i} fill={entry.color} />
            ))}
          </Pie>
          <Tooltip
            formatter={(value: any) => [(value ?? 0).toLocaleString(), 'Mentions']}
            contentStyle={{ borderRadius: '8px', border: '1px solid #e5e7eb' }}
          />
        </PieChart>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {data.map((entry) => (
          <div key={entry.name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', backgroundColor: entry.color, flexShrink: 0 }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary, #1f2937)' }}>
                {entry.name}
              </div>
              <div style={{ fontSize: 12, color: 'var(--text-secondary, #6b7280)' }}>
                {((entry.value / total) * 100).toFixed(0)}% &middot; {entry.value}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
