import Link from "next/link";
import {
  Banknote,
  CheckCircle2,
  Landmark,
  TrendingDown,
  TrendingUp,
  Wallet,
} from "lucide-react";
import type { KeuanganSummary, TahunAnggaran } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { PageHeader, StatCard } from "@/components/page-header";
import { BudgetByBidang, BudgetDonut } from "@/components/charts/budget-chart";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  cn,
  formatCompactRupiah,
  formatNumber,
  formatRupiah,
  labelJenisAnggaran,
} from "@/lib/utils";

export const metadata = { title: "Transparansi APBDes" };

export default async function ApbdesPage({
  searchParams,
}: {
  searchParams: Promise<{ tahun?: string }>;
}) {
  const params = await searchParams;
  const tahunList = (await serverGet<TahunAnggaran[]>("/keuangan/tahun")) ?? [];

  const requested = params.tahun ? Number(params.tahun) : null;
  const fallback =
    tahunList.find((item) => item.status === "AKTIF") ?? tahunList[0] ?? null;
  const selected =
    tahunList.find((item) => item.tahun === requested) ?? fallback;

  const summary = await serverGet<KeuanganSummary>(
    selected ? `/keuangan/ringkasan?tahun=${selected.tahun}` : "/keuangan/ringkasan",
  );

  const totals = summary?.totals ?? { PENDAPATAN: 0, BELANJA: 0, PEMBIAYAAN: 0 };
  const realisasi = summary?.realisasi ?? { PENDAPATAN: 0, BELANJA: 0, PEMBIAYAAN: 0 };
  const persenBelanja =
    totals.BELANJA > 0 ? Math.round((realisasi.BELANJA / totals.BELANJA) * 100) : 0;
  const totalAnggaran = totals.PENDAPATAN + totals.BELANJA + totals.PEMBIAYAAN;

  return (
    <div className="animate-fade-in">
      <section className="border-b bg-secondary/40 py-12">
        <div className="container">
          <PageHeader
            title="Transparansi APBDes"
            description="Anggaran Pendapatan dan Belanja Desa beserta realisasi per bidang pembangunan."
            action={
              <div className="flex flex-wrap gap-2">
                {tahunList.map((item) => (
                  <Link
                    key={item.id}
                    href={`/apbdes?tahun=${item.tahun}`}
                    className={cn(
                      "rounded-full border px-4 py-1.5 text-xs font-semibold transition-colors",
                      selected?.tahun === item.tahun
                        ? "border-primary bg-primary text-primary-foreground"
                        : "border-border bg-card text-muted-foreground hover:bg-muted",
                    )}
                  >
                    {item.tahun}
                  </Link>
                ))}
              </div>
            }
          />
        </div>
      </section>

      <div className="container space-y-6 py-10">
        {!selected ? (
          <div className="rounded-2xl border border-dashed p-16 text-center">
            <Wallet className="mx-auto h-8 w-8 text-muted-foreground" />
            <p className="mt-3 font-semibold">Belum ada tahun anggaran</p>
            <p className="mt-1 text-sm text-muted-foreground">
              Data APBDes akan tampil setelah administrator desa menginput anggaran.
            </p>
          </div>
        ) : (
          <>
            <div className="flex flex-wrap items-center gap-2">
              <Badge variant={selected.status === "AKTIF" ? "success" : "secondary"}>
                {selected.status}
              </Badge>
              <span className="text-sm text-muted-foreground">
                Tahun anggaran {selected.tahun} · {formatNumber(selected.jumlahItem)} item
              </span>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
              <StatCard
                title="Pendapatan"
                value={formatCompactRupiah(totals.PENDAPATAN)}
                hint={`Realisasi ${formatCompactRupiah(realisasi.PENDAPATAN)}`}
                icon={TrendingUp}
              />
              <StatCard
                title="Belanja"
                value={formatCompactRupiah(totals.BELANJA)}
                hint={`Realisasi ${formatCompactRupiah(realisasi.BELANJA)}`}
                icon={TrendingDown}
                tone="sky"
              />
              <StatCard
                title="Pembiayaan"
                value={formatCompactRupiah(totals.PEMBIAYAAN)}
                hint={`Realisasi ${formatCompactRupiah(realisasi.PEMBIAYAAN)}`}
                icon={Banknote}
                tone="amber"
              />
              <StatCard
                title="Serapan belanja"
                value={`${persenBelanja}%`}
                hint={formatRupiah(realisasi.BELANJA)}
                icon={CheckCircle2}
                tone="violet"
              />
            </div>

            <Card>
              <CardContent className="p-5">
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">Realisasi belanja desa</span>
                  <span className="font-bold text-primary">{persenBelanja}%</span>
                </div>
                <div className="mt-2 h-3 overflow-hidden rounded-full bg-muted">
                  <div
                    className="h-full rounded-full bg-brand-gradient"
                    style={{ width: `${Math.min(100, persenBelanja)}%` }}
                  />
                </div>
                <p className="mt-2 text-xs text-muted-foreground">
                  {formatRupiah(realisasi.BELANJA)} dari pagu{" "}
                  {formatRupiah(totals.BELANJA)} · total anggaran{" "}
                  {formatRupiah(totalAnggaran)}
                </p>
              </CardContent>
            </Card>

            <div className="grid gap-4 lg:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Komposisi Anggaran</CardTitle>
                </CardHeader>
                <CardContent>
                  <BudgetDonut
                    data={[
                      { name: "Pendapatan", value: totals.PENDAPATAN },
                      { name: "Belanja", value: totals.BELANJA },
                      { name: "Pembiayaan", value: totals.PEMBIAYAAN },
                    ]}
                  />
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>Belanja per Bidang</CardTitle>
                </CardHeader>
                <CardContent>
                  <BudgetByBidang data={summary?.byBidang ?? []} />
                </CardContent>
              </Card>
            </div>

            <Card>
              <CardHeader>
                <CardTitle>Rincian Anggaran {selected.tahun}</CardTitle>
              </CardHeader>
              <CardContent className="p-0 pb-2">
                {summary?.items.length ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Kode</TableHead>
                        <TableHead>Uraian</TableHead>
                        <TableHead>Jenis</TableHead>
                        <TableHead>Bidang</TableHead>
                        <TableHead className="text-right">Anggaran</TableHead>
                        <TableHead className="text-right">Realisasi</TableHead>
                        <TableHead className="w-24">Serapan</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {summary.items.map((item) => {
                        const anggaran = Number(item.anggaran);
                        const nilai = Number(item.realisasi);
                        const percent =
                          anggaran > 0
                            ? Math.min(100, Math.round((nilai / anggaran) * 100))
                            : 0;
                        return (
                          <TableRow key={item.id}>
                            <TableCell className="font-mono text-xs">{item.kode}</TableCell>
                            <TableCell className="max-w-[280px]">
                              <div className="font-medium">{item.uraian}</div>
                              <div className="text-xs text-muted-foreground">
                                {item.sumberDana ?? "-"}
                              </div>
                            </TableCell>
                            <TableCell>
                              <Badge
                                variant={
                                  item.jenis === "PENDAPATAN"
                                    ? "success"
                                    : item.jenis === "BELANJA"
                                      ? "info"
                                      : "warning"
                                }
                              >
                                {labelJenisAnggaran(item.jenis)}
                              </Badge>
                            </TableCell>
                            <TableCell className="text-muted-foreground">
                              {item.bidang ?? "-"}
                            </TableCell>
                            <TableCell className="text-right font-medium">
                              {formatRupiah(anggaran)}
                            </TableCell>
                            <TableCell className="text-right text-muted-foreground">
                              {formatRupiah(nilai)}
                            </TableCell>
                            <TableCell>
                              <div className="flex items-center gap-2">
                                <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
                                  <div
                                    className="h-full rounded-full bg-emerald-500"
                                    style={{ width: `${percent}%` }}
                                  />
                                </div>
                                <span className="text-xs text-muted-foreground">
                                  {percent}%
                                </span>
                              </div>
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                ) : (
                  <div className="py-12 text-center">
                    <Landmark className="mx-auto h-6 w-6 text-muted-foreground" />
                    <p className="mt-2 text-sm font-semibold">Belum ada rincian anggaran</p>
                    <p className="text-xs text-muted-foreground">
                      Administrator desa belum menginput item untuk tahun ini.
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>

            <p className="text-xs leading-relaxed text-muted-foreground">
              Dokumen ini disajikan untuk keterbukaan informasi. Rincian lebih lanjut dapat
              diperoleh di kantor desa pada jam kerja.
            </p>
          </>
        )}
      </div>
    </div>
  );
}