"use client";

import {
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  Legend,
  XAxis,
  YAxis,
} from "recharts";
import { formatCompactRupiah } from "@/lib/utils";

const tooltipStyle = {
  borderRadius: 10,
  border: "1px solid #e2e8e5",
  fontSize: 12,
  boxShadow: "0 8px 24px -12px rgba(15,62,48,0.25)",
};

export function BudgetByBidang({
  data,
}: {
  data: { bidang: string; anggaran: number; realisasi: number }[];
}) {
  if (!data.length) {
    return (
      <div className="flex h-[280px] items-center justify-center rounded-lg bg-muted/40 text-sm text-muted-foreground">
        Belum ada data anggaran
      </div>
    );
  }

  const shortened = data.map((item) => ({
    ...item,
    label:
      item.bidang.length > 28 ? `${item.bidang.slice(0, 28)}…` : item.bidang,
  }));

  return (
    <ResponsiveContainer width="100%" height={320}>
      <BarChart
        data={shortened}
        layout="vertical"
        margin={{ top: 4, right: 12, left: 8, bottom: 0 }}
      >
        <CartesianGrid strokeDasharray="3 3" horizontal={false} stroke="#e8eeeb" />
        <XAxis
          type="number"
          tickFormatter={(value) => formatCompactRupiah(value)}
          tick={{ fontSize: 10, fill: "#64748b" }}
          axisLine={false}
          tickLine={false}
        />
        <YAxis
          type="category"
          dataKey="label"
          width={190}
          tick={{ fontSize: 11, fill: "#475569" }}
          axisLine={false}
          tickLine={false}
        />
        <Tooltip
          contentStyle={tooltipStyle}
          formatter={(value) => formatCompactRupiah(Number(value ?? 0))}
          cursor={{ fill: "#f1f5f3" }}
        />
        <Legend
          iconType="circle"
          formatter={(value) => (
            <span className="text-xs text-slate-600">{value}</span>
          )}
        />
        <Bar
          dataKey="anggaran"
          name="Anggaran"
          fill="#059669"
          radius={[0, 4, 4, 0]}
        />
        <Bar
          dataKey="realisasi"
          name="Realisasi"
          fill="#a7f3d0"
          radius={[0, 4, 4, 0]}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

export function BudgetDonut({
  data,
}: {
  data: { name: string; value: number }[];
}) {
  const filtered = data.filter((item) => item.value > 0);
  if (!filtered.length) {
    return (
      <div className="flex h-[240px] items-center justify-center rounded-lg bg-muted/40 text-sm text-muted-foreground">
        Belum ada data anggaran
      </div>
    );
  }
  return (
    <ResponsiveContainer width="100%" height={240}>
      <PieChart>
        <Pie
          data={filtered}
          dataKey="value"
          nameKey="name"
          innerRadius={55}
          outerRadius={88}
          paddingAngle={3}
          strokeWidth={2}
        >
          {filtered.map((entry, index) => (
            <Cell
              key={entry.name}
              fill={["#059669", "#0ea5e9", "#f59e0b"][index % 3]}
            />
          ))}
        </Pie>
        <Tooltip
          contentStyle={tooltipStyle}
          formatter={(value) => formatCompactRupiah(Number(value ?? 0))}
        />
        <Legend
          verticalAlign="bottom"
          iconType="circle"
          formatter={(value) => (
            <span className="text-xs text-slate-600">{value}</span>
          )}
        />
      </PieChart>
    </ResponsiveContainer>
  );
}