"use client";

import Link from "next/link";
import useSWR from "swr";
import {
  ArrowRight,
  FileText,
  Home,
  Users,
  Wallet,
} from "lucide-react";
import type { DashboardData, KeuanganSummary } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { PageHeader, StatCard } from "@/components/page-header";
import { AgeBar, SexDonut } from "@/components/charts/population-charts";
import { BudgetByBidang } from "@/components/charts/budget-chart";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  formatCompactRupiah,
  formatDateShort,
  formatNumber,
  labelStatusSurat,
} from "@/lib/utils";

const STATUS_VARIANT: Record<string, "info" | "warning" | "success" | "danger"> = {
  DIAJUKAN: "info",
  DIPROSES: "warning",
  SELESAI: "success",
  DITOLAK: "danger",
};

export default function AdminDashboardPage() {
  const { data, error, isLoading } = useSWR<DashboardData>("/dashboard", fetcher);
  const { data: keuangan } = useSWR<KeuanganSummary>(
    "/keuangan/ringkasan",
    fetcher,
  );

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="h-16 animate-pulse rounded-xl bg-muted" />
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          {Array.from({ length: 4 }).map((_, index) => (
            <div key={index} className="h-28 animate-pulse rounded-xl bg-muted" />
          ))}
        </div>
        <div className="grid gap-4 lg:grid-cols-2">
          <div className="h-80 animate-pulse rounded-xl bg-muted" />
          <div className="h-80 animate-pulse rounded-xl bg-muted" />
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="rounded-xl border border-dashed p-10 text-center text-sm text-muted-foreground">
        Gagal memuat data dasbor. Pastikan server API berjalan, lalu muat ulang halaman.
      </div>
    );
  }

  const { ringkasan, penduduk, keuangan: anggaran, suratTerbaru, pendudukTerbaru } = data;
  const persenRealisasi =
    anggaran.belanja > 0
      ? Math.round((anggaran.realisasiBelanja / anggaran.belanja) * 100)
      : 0;

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Dasbor Desa"
        description={`Ringkasan data kependudukan dan pelayanan desa${
          ringkasan.tahunAnggaran ? ` · Tahun anggaran ${ringkasan.tahunAnggaran}` : ""
        }.`}
        action={
          <Button asChild variant="outline">
            <Link href="/admin/penduduk">
              Kelola penduduk
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        }
      />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard
          title="Penduduk aktif"
          value={formatNumber(ringkasan.penduduk)}
          hint="Status dasar: hidup"
          icon={Users}
        />
        <StatCard
          title="Kartu keluarga"
          value={formatNumber(ringkasan.keluarga)}
          hint={`${formatNumber(ringkasan.artikel)} berita terbit`}
          icon={Home}
          tone="sky"
        />
        <StatCard
          title="Surat menunggu"
          value={formatNumber(ringkasan.suratMenunggu)}
          hint={`${formatNumber(ringkasan.suratSelesai)} surat selesai`}
          icon={FileText}
          tone="amber"
        />
        <StatCard
          title={`Belanja ${ringkasan.tahunAnggaran ?? ""}`}
          value={formatCompactRupiah(anggaran.belanja)}
          hint={`Realisasi ${persenRealisasi}%`}
          icon={Wallet}
          tone="violet"
        />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle>Komposisi Jenis Kelamin</CardTitle>
          </CardHeader>
          <CardContent>
            <SexDonut data={penduduk.bySex} />
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle>Kelompok Umur</CardTitle>
          </CardHeader>
          <CardContent>
            <AgeBar data={penduduk.byUmur} />
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-[1.4fr_1fr]">
        <Card>
          <CardHeader className="flex-row items-center justify-between space-y-0">
            <CardTitle>Belanja per Bidang</CardTitle>
            <span className="text-xs text-muted-foreground">
              APBDes {keuangan?.tahun ?? ringkasan.tahunAnggaran ?? "-"}
            </span>
          </CardHeader>
          <CardContent>
            <BudgetByBidang data={keuangan?.byBidang ?? []} />
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Ringkasan Anggaran</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {[
              { label: "Pendapatan", value: anggaran.pendapatan, color: "bg-emerald-500" },
              { label: "Belanja", value: anggaran.belanja, color: "bg-sky-500" },
              { label: "Pembiayaan", value: anggaran.pembiayaan, color: "bg-amber-500" },
            ].map((item) => {
              const total = anggaran.pendapatan + anggaran.belanja + anggaran.pembiayaan;
              const percent = total > 0 ? Math.round((item.value / total) * 100) : 0;
              return (
                <div key={item.label}>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-muted-foreground">{item.label}</span>
                    <span className="font-semibold">{formatCompactRupiah(item.value)}</span>
                  </div>
                  <div className="mt-1.5 h-2 overflow-hidden rounded-full bg-muted">
                    <div
                      className={`h-full rounded-full ${item.color}`}
                      style={{ width: `${percent}%` }}
                    />
                  </div>
                </div>
              );
            })}

            <div className="rounded-xl bg-secondary/60 p-4">
              <div className="flex items-center justify-between text-sm">
                <span className="font-medium">Realisasi belanja</span>
                <span className="font-bold text-primary">{persenRealisasi}%</span>
              </div>
              <div className="mt-2 h-2.5 overflow-hidden rounded-full bg-white">
                <div
                  className="h-full rounded-full bg-brand-gradient"
                  style={{ width: `${Math.min(100, persenRealisasi)}%` }}
                />
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                {formatCompactRupiah(anggaran.realisasiBelanja)} dari{" "}
                {formatCompactRupiah(anggaran.belanja)}
              </p>
            </div>

            <Button asChild variant="outline" className="w-full">
              <Link href="/admin/keuangan">
                Buka rincian keuangan
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-[1.5fr_1fr]">
        <Card>
          <CardHeader className="flex-row items-center justify-between space-y-0">
            <CardTitle>Permohonan Surat Terbaru</CardTitle>
            <Button asChild variant="link" size="sm" className="h-auto p-0">
              <Link href="/admin/surat">Lihat semua</Link>
            </Button>
          </CardHeader>
          <CardContent className="p-0 pb-2">
            {suratTerbaru.length ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nomor</TableHead>
                    <TableHead>Pemohon</TableHead>
                    <TableHead>Jenis</TableHead>
                    <TableHead>Tanggal</TableHead>
                    <TableHead>Status</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {suratTerbaru.map((surat) => (
                    <TableRow key={surat.id}>
                      <TableCell className="font-mono text-xs">{surat.nomor}</TableCell>
                      <TableCell className="font-medium">{surat.penduduk?.nama ?? "-"}</TableCell>
                      <TableCell className="text-muted-foreground">
                        {surat.jenis?.nama ?? "-"}
                      </TableCell>
                      <TableCell className="text-muted-foreground">
                        {formatDateShort(surat.tanggal)}
                      </TableCell>
                      <TableCell>
                        <Badge variant={STATUS_VARIANT[surat.status] ?? "secondary"}>
                          {labelStatusSurat(surat.status)}
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                Belum ada permohonan surat.
              </p>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex-row items-center justify-between space-y-0">
            <CardTitle>Penduduk Terbaru</CardTitle>
            <Button asChild variant="link" size="sm" className="h-auto p-0">
              <Link href="/admin/penduduk">Lihat semua</Link>
            </Button>
          </CardHeader>
          <CardContent className="space-y-3">
            {pendudukTerbaru.length ? (
              pendudukTerbaru.map((warga) => (
                <div
                  key={warga.id}
                  className="flex items-center justify-between gap-3 rounded-lg border border-border/70 px-3 py-2.5"
                >
                  <div className="min-w-0">
                    <div className="truncate text-sm font-medium">{warga.nama}</div>
                    <div className="font-mono text-[11px] text-muted-foreground">
                      {warga.nik}
                    </div>
                  </div>
                  <Badge variant={warga.jenisKelamin === "L" ? "info" : "secondary"}>
                    {warga.jenisKelamin === "L" ? "L" : "P"}
                  </Badge>
                </div>
              ))
            ) : (
              <p className="py-6 text-center text-sm text-muted-foreground">
                Belum ada data penduduk.
              </p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}