"use client";

import { useEffect, useMemo, useState } from "react";
import useSWR from "swr";
import { Printer } from "lucide-react";
import type { AnggaranItem, KeuanganSummary, TahunAnggaran } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { PageHeader } from "@/components/page-header";
import { KeuanganTabs } from "@/components/admin/keuangan-tabs";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  formatNumber,
  formatRupiah,
  labelJenisAnggaran,
} from "@/lib/utils";
import { POHON_ANGGARAN, bandingkanKode, cocokKode } from "@/lib/anggaran";

const JENIS = ["PENDAPATAN", "BELANJA", "PEMBIAYAAN"] as const;

function persen(realisasi: number, anggaran: number) {
  if (!anggaran) return 0;
  return Math.round((realisasi / anggaran) * 100);
}

export default function KeuanganLaporanManualPage() {
  const { data: tahunList } = useSWR<TahunAnggaran[]>("/keuangan/tahun", fetcher);
  const [tahun, setTahun] = useState("");
  const [filterKode, setFilterKode] = useState("");

  useEffect(() => {
    if (!tahun && tahunList?.length) {
      const aktif = tahunList.find((item) => item.status === "AKTIF");
      setTahun(String((aktif ?? tahunList[0]).tahun));
    }
  }, [tahun, tahunList]);

  const key = tahun
    ? `/keuangan/ringkasan?tahun=${tahun}`
    : "/keuangan/ringkasan";
  const { data: summary, isLoading } = useSWR<KeuanganSummary>(key, fetcher);

  const kelompok = useMemo(() => {
    const items = (summary?.items ?? []).filter((item) =>
      cocokKode(item.kode, filterKode),
    );
    let nomor = 0;
    return JENIS.map((jenis) => {
      const rows = items
        .filter((item) => item.jenis === jenis)
        .sort((a, b) => bandingkanKode(a.kode, b.kode));
      const anggaran = rows.reduce((sum, item) => sum + Number(item.anggaran), 0);
      const realisasi = rows.reduce((sum, item) => sum + Number(item.realisasi), 0);
      const mulai = nomor + 1;
      nomor += rows.length;
      return { jenis, rows, anggaran, realisasi, mulai };
    });
  }, [summary?.items, filterKode]);

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Laporan Manual"
        description="Laporan realisasi anggaran (LRA) dalam format resmi, siap dicetak dan diarsipkan."
        action={
          <Button variant="outline" onClick={() => window.print()}>
            <Printer className="h-4 w-4" />
            Cetak
          </Button>
        }
      />

      <KeuanganTabs />

      <div className="flex flex-wrap items-end gap-3 print:hidden">
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wide text-muted-foreground">
            Tahun anggaran
          </Label>
          <Select
            value={tahun}
            onChange={(event) => setTahun(event.target.value)}
            className="w-48"
            aria-label="Pilih tahun anggaran"
          >
            {(tahunList ?? []).map((item) => (
              <option key={item.id} value={item.tahun}>
                {item.tahun} · {item.status}
              </option>
            ))}
            {!tahunList?.length && <option value="">Belum ada tahun</option>}
          </Select>
        </div>
        <div className="space-y-1.5">
          <Label className="text-xs uppercase tracking-wide text-muted-foreground">
            Jenis anggaran
          </Label>
          <Select
            value={filterKode}
            onChange={(event) => setFilterKode(event.target.value)}
            className="w-80"
            aria-label="Filter jenis anggaran"
          >
            <option value="">Pilih Jenis Anggaran</option>
            {POHON_ANGGARAN.map((item) => (
              <option key={item.kode} value={item.kode}>
                {item.label}
              </option>
            ))}
          </Select>
        </div>
      </div>

      <div className="hidden print:block">
        <h1 className="text-center text-lg font-bold uppercase">
          Pemerintah Desa Mulyadadi
        </h1>
        <p className="text-center text-sm">
          Kecamatan Cipari, Kabupaten Cilacap
        </p>
        <h2 className="mt-4 text-center text-base font-semibold">
          Laporan Realisasi Pelaksanaan APBDes
        </h2>
        <p className="text-center text-sm">
          Tahun Anggaran {summary?.tahun ?? "-"}
        </p>
      </div>

      {isLoading ? (
        <div className="h-72 animate-pulse rounded-xl bg-muted" />
      ) : !summary?.tahun ? (
        <Card>
          <CardContent className="py-16 text-center">
            <p className="font-semibold">Belum ada data anggaran</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Tambahkan tahun anggaran dan rincian APBDes pada menu Input Data.
            </p>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardHeader>
            <CardTitle>
              Rincian APBDes {summary.tahun} · {summary.status}
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">No</TableHead>
                    <TableHead className="w-28">Kode Rekening</TableHead>
                    <TableHead className="min-w-[260px]">Uraian</TableHead>
                    <TableHead className="text-right">Anggaran</TableHead>
                    <TableHead className="text-right">Realisasi</TableHead>
                    <TableHead className="text-right">Sisa</TableHead>
                    <TableHead className="text-right">%</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {kelompok.map((grup) => (
                    <GrupRows
                      key={grup.jenis}
                      judul={labelJenisAnggaran(grup.jenis)}
                      rows={grup.rows}
                      anggaran={grup.anggaran}
                      realisasi={grup.realisasi}
                      mulai={grup.mulai}
                    />
                  ))}
                </TableBody>
              </Table>
            </div>
            <p className="border-t p-3 text-xs text-muted-foreground">
              {formatNumber(summary.items.length)} item anggaran · nilai dalam
              rupiah
            </p>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function GrupRows({
  judul,
  rows,
  anggaran,
  realisasi,
  mulai,
}: {
  judul: string;
  rows: AnggaranItem[];
  anggaran: number;
  realisasi: number;
  mulai: number;
}) {
  return (
    <>
      <TableRow className="bg-muted/60 hover:bg-muted/60">
        <TableCell colSpan={7} className="py-2 text-xs font-bold uppercase tracking-wide">
          {judul}
        </TableCell>
      </TableRow>
      {rows.map((item, index) => {
        const pagu = Number(item.anggaran);
        const real = Number(item.realisasi);
        return (
          <TableRow key={item.id}>
            <TableCell className="text-xs text-muted-foreground">
              {mulai + index}
            </TableCell>
            <TableCell className="font-mono text-xs">{item.kode}</TableCell>
            <TableCell>
              <span className="text-sm">{item.uraian}</span>
              {item.bidang && (
                <span className="block text-[11px] text-muted-foreground">
                  {item.bidang}
                </span>
              )}
            </TableCell>
            <TableCell className="whitespace-nowrap text-right font-mono text-xs">
              {formatRupiah(pagu)}
            </TableCell>
            <TableCell className="whitespace-nowrap text-right font-mono text-xs">
              {formatRupiah(real)}
            </TableCell>
            <TableCell className="whitespace-nowrap text-right font-mono text-xs">
              {formatRupiah(pagu - real)}
            </TableCell>
            <TableCell className="text-right text-xs">
              {persen(real, pagu)}%
            </TableCell>
          </TableRow>
        );
      })}
      {!rows.length && (
        <TableRow>
          <TableCell colSpan={7} className="py-4 text-center text-xs text-muted-foreground">
            Belum ada rincian {judul.toLowerCase()}.
          </TableCell>
        </TableRow>
      )}
      <TableRow className="bg-muted/30 font-semibold hover:bg-muted/30">
        <TableCell colSpan={3} className="text-right text-xs uppercase tracking-wide">
          Jumlah {judul}
        </TableCell>
        <TableCell className="whitespace-nowrap text-right font-mono text-xs">
          {formatRupiah(anggaran)}
        </TableCell>
        <TableCell className="whitespace-nowrap text-right font-mono text-xs">
          {formatRupiah(realisasi)}
        </TableCell>
        <TableCell className="whitespace-nowrap text-right font-mono text-xs">
          {formatRupiah(anggaran - realisasi)}
        </TableCell>
        <TableCell className="text-right text-xs">
          {persen(realisasi, anggaran)}%
        </TableCell>
      </TableRow>
    </>
  );
}