// web/src/components/charts/VariableAllocationDonut.tsx
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from "recharts";

export type VariableSlice = { name: string; value: number; isSavings: boolean };

export default function VariableAllocationDonut({ data }: { data: VariableSlice[] }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  if (!data.length || total === 0) {
    return (
      <div className="card">
        <h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
        <div className="muted text-sm">No categories configured yet.</div>
      </div>
    );
  }

  const fillFor = (s: boolean) => (s ? "#165F46" : "#374151");

  return (
    <div className="card">
      <h3 className="text-sm mb-2" style={{ color: "var(--color-sage)" }}>Variable Allocation</h3>
      <div className="chart-md">
        <ResponsiveContainer>
          <PieChart>
            <Pie data={data} dataKey="value" nameKey="name" innerRadius={70} outerRadius={100} stroke="#0B1020" strokeWidth={2}>
              {data.map((d, i) => <Cell key={i} fill={fillFor(d.isSavings)} />)}
            </Pie>
            <Tooltip formatter={(v: number) => `${v}%`} contentStyle={{ background: "#111827", border: "1px solid #111827", borderRadius: 12, color: "#E7E3D7" }} />
            <Legend verticalAlign="bottom" height={24} />
          </PieChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}