"use client";

import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from "recharts";
import { formatVND } from "@/lib/finance";

const COLORS = ["#0d9488", "#f97316", "#38bdf8", "#a78bfa", "#f472b6", "#facc15", "#34d399", "#64748b"];

export function AllocationDonut({ data, centerLabel }: { data: { group: string; amount: number; pct: number }[]; centerLabel: string }) {
  if (!data.length) {
    return <div className="flex h-56 items-center justify-center text-sm text-slate-400">Chưa có dữ liệu kỳ này</div>;
  }
  return (
    <div>
      <div className="relative h-44">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie data={data} dataKey="amount" nameKey="group" innerRadius={55} outerRadius={85} paddingAngle={2}>
              {data.map((_, i) => (
                <Cell key={i} fill={COLORS[i % COLORS.length]} />
              ))}
            </Pie>
            <Tooltip formatter={(v: number) => formatVND(v)} />
          </PieChart>
        </ResponsiveContainer>
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
          <div className="text-base font-bold text-slate-800">{centerLabel}</div>
        </div>
      </div>
      <div className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-xs">
        {data.map((d, i) => (
          <div key={d.group} className="flex items-center gap-1.5 text-slate-600">
            <span className="h-2 w-2 rounded-full" style={{ background: COLORS[i % COLORS.length] }} />
            {d.group} <span className="ml-auto font-medium">{d.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}