import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from "recharts";

const COLORS = ["hsl(213, 70%, 50%)", "hsl(43, 90%, 55%)", "hsl(152, 55%, 42%)", "hsl(0, 70%, 55%)"];

export default function PengaduanStats({ list }) {
  const baru = list.filter((p) => p.status === "Baru").length;
  const diproses = list.filter((p) => p.status === "Diproses").length;
  const selesai = list.filter((p) => p.status === "Selesai").length;
  const ditolak = list.filter((p) => p.status === "Ditolak").length;

  const pieData = [
    { name: "Baru", value: baru || 1 },
    { name: "Diproses", value: diproses || 1 },
    { name: "Selesai", value: selesai || 1 },
    { name: "Ditolak", value: ditolak || 0 },
  ].filter((d) => d.value > 0);

  return (
    <div className="space-y-4">
      {/* Summary numbers */}
      <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
        <h3 className="font-bold text-foreground mb-4">Statistik Pengaduan</h3>
        <div className="space-y-3">
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">Jumlah Pengaduan Total</span>
            <span className="font-bold text-lg">{list.length}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">Sedang Diproses</span>
            <span className="font-bold text-lg text-amber-600">{diproses}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">Pengaduan Selesai</span>
            <span className="font-bold text-lg text-emerald-600">{selesai}</span>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">Pengaduan Baru</span>
            <span className="font-bold text-lg text-blue-600">{baru}</span>
          </div>
        </div>
      </div>

      {/* Pie chart */}
      <div className="bg-card rounded-xl border border-border p-5 sm:p-6">
        <h3 className="font-bold text-foreground mb-4">Status Pengaduan</h3>
        <ResponsiveContainer width="100%" height={200}>
          <PieChart>
            <Pie data={pieData} cx="50%" cy="50%" innerRadius={45} outerRadius={75} paddingAngle={3} dataKey="value">
              {pieData.map((_, idx) => (
                <Cell key={idx} fill={COLORS[idx % COLORS.length]} />
              ))}
            </Pie>
            <Tooltip />
          </PieChart>
        </ResponsiveContainer>
        <div className="flex flex-wrap gap-3 mt-2 justify-center">
          {pieData.map((item, idx) => (
            <div key={item.name} className="flex items-center gap-1.5 text-xs">
              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: COLORS[idx] }} />
              <span className="text-muted-foreground">{item.name}</span>
              <span className="font-bold">{item.value}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}