"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import useSWR from "swr";
import { ArrowLeft, ChartPie } from "lucide-react";
import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import type { GrafikSuratKeluar, SuratJenis } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const NAMA_BULAN = [
  "Januari",
  "Februari",
  "Maret",
  "April",
  "Mei",
  "Juni",
  "Juli",
  "Agustus",
  "September",
  "Oktober",
  "November",
  "Desember",
];

const WARNA = [
  "#059669",
  "#0ea5e9",
  "#f59e0b",
  "#8b5cf6",
  "#ef4444",
  "#14b8a6",
  "#f97316",
  "#6366f1",
  "#84cc16",
  "#ec4899",
];

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

/**
 * Padanan halaman /keluar/graph OpenSID: pie surat keluar per jenis dengan
 * tooltip persentase + total dan legenda di samping.
 */
export default function PieSuratKeluarPage() {
  const [tahun, setTahun] = useState("");
  const [bulan, setBulan] = useState("");
  const [jenisId, setJenisId] = useState("");
  const [status, setStatus] = useState("SELESAI");

  const params = new URLSearchParams();
  if (tahun) params.set("tahun", tahun);
  if (bulan) params.set("bulan", bulan);
  if (jenisId) params.set("jenisId", jenisId);
  if (status) params.set("status", status);

  const { data, isLoading } = useSWR<GrafikSuratKeluar>(
    `/surat/grafik?${params.toString()}`,
    fetcher,
  );
  const { data: jenisList } = useSWR<SuratJenis[]>("/surat/jenis", fetcher);

  const tahunOpsional = useMemo(() => {
    const sekarang = new Date().getFullYear();
    return Array.from({ length: 8 }, (_, index) => sekarang - index);
  }, []);

  const daftar = (data?.data ?? []).map((item, index) => ({
    ...item,
    nama: `${item.nama}`,
    warna: WARNA[index % WARNA.length],
  }));

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Pie Surat Keluar"
        description="Sebaran surat keluar per jenis surat, mengikuti filter tahun, bulan, dan jenis surat."
        action={
          <Button variant="outline" asChild>
            <Link href="/admin/cetak-surat?tab=arsip">
              <ArrowLeft className="h-4 w-4" />
              Kembali ke Arsip Surat
            </Link>
          </Button>
        }
      />

      <Card>
        <CardContent className="flex flex-col gap-3 p-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex flex-wrap items-center gap-2">
            <Select
              value={tahun}
              onChange={(event) => setTahun(event.target.value)}
              aria-label="Pilih Tahun"
              className="w-full sm:w-36"
            >
              <option value="">Pilih Tahun</option>
              {tahunOpsional.map((item) => (
                <option key={item} value={String(item)}>
                  {item}
                </option>
              ))}
            </Select>
            <Select
              value={bulan}
              onChange={(event) => setBulan(event.target.value)}
              aria-label="Pilih Bulan"
              className="w-full sm:w-40"
            >
              <option value="">Pilih Bulan</option>
              {NAMA_BULAN.map((nama, index) => (
                <option key={nama} value={String(index + 1)}>
                  {nama}
                </option>
              ))}
            </Select>
            <Select
              value={jenisId}
              onChange={(event) => setJenisId(event.target.value)}
              aria-label="Pilih Jenis Surat"
              className="w-full sm:w-56"
            >
              <option value="">Pilih Jenis Surat</option>
              {(jenisList ?? []).map((jenis) => (
                <option key={jenis.id} value={String(jenis.id)}>
                  {jenis.nama}
                </option>
              ))}
            </Select>
            <Select
              value={status}
              onChange={(event) => setStatus(event.target.value)}
              aria-label="Pilih Status"
              className="w-full sm:w-44"
            >
              <option value="">Pilih Status</option>
              <option value="SELESAI">Selesai (siap cetak)</option>
              <option value="DIPROSES">Diproses</option>
              <option value="DIAJUKAN">Diajukan</option>
              <option value="DITOLAK">Ditolak</option>
            </Select>
          </div>
          <span className="text-sm text-muted-foreground">
            Total {data?.total ?? 0} surat
          </span>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4">
          <div className="mb-2 flex items-center gap-2">
            <ChartPie className="h-4 w-4 text-primary" />
            <h2 className="text-sm font-semibold">Surat Keluar</h2>
          </div>
          {isLoading ? (
            <div className="h-[340px] animate-pulse rounded-lg bg-muted/40" />
          ) : daftar.length ? (
            <ResponsiveContainer width="100%" height={340}>
              <PieChart>
                <Pie
                  data={daftar}
                  dataKey="nilai"
                  nameKey="nama"
                  cx="40%"
                  cy="50%"
                  outerRadius={115}
                  cursor="pointer"
                  stroke="#fff"
                  strokeWidth={2}
                  isAnimationActive={false}
                >
                  {daftar.map((item) => (
                    <Cell key={item.jenisId} fill={item.warna} />
                  ))}
                </Pie>
                <Tooltip
                  contentStyle={tooltipStyle}
                  formatter={(nilai, _nama, entry) => {
                    const payload = (entry as unknown as { payload?: { persen?: number } })
                      ?.payload;
                    return [
                      `Persentase: ${payload?.persen ?? 0}% · Total: ${nilai}`,
                      "",
                    ];
                  }}
                />
                <Legend
                  iconType="circle"
                  verticalAlign="middle"
                  align="right"
                  layout="vertical"
                  formatter={(value) => (
                    <span className="text-xs text-slate-600">{value}</span>
                  )}
                />
              </PieChart>
            </ResponsiveContainer>
          ) : (
            <div className="flex h-[340px] items-center justify-center rounded-lg bg-muted/40 text-sm text-muted-foreground">
              Belum ada surat keluar untuk filter ini
            </div>
          )}
        </CardContent>
      </Card>

      {daftar.length > 0 && (
        <Card>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-14">No</TableHead>
                    <TableHead className="w-28">Kode Surat</TableHead>
                    <TableHead>Jenis Surat</TableHead>
                    <TableHead className="w-32">Jumlah</TableHead>
                    <TableHead className="w-28">Persentase</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {daftar.map((item, index) => (
                    <TableRow key={item.jenisId}>
                      <TableCell className="text-muted-foreground">
                        {index + 1}
                      </TableCell>
                      <TableCell>
                        <span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
                          {item.kode}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="mr-2 inline-block h-2.5 w-2.5 rounded-full align-middle" style={{ backgroundColor: item.warna }} />
                        {item.nama}
                      </TableCell>
                      <TableCell>{item.nilai}</TableCell>
                      <TableCell>{item.persen}%</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}