"use client";

import { useState } from "react";
import useSWR from "swr";
import { Download, Home, Printer, RotateCcw, ShieldCheck, UserRound } from "lucide-react";
import type { Desa, LaporanRentan, MatriksRentan, RentanKey, Wilayah } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { unduhCsv } from "@/lib/sekretariat";
import { PageHeader, StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
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 { cn, formatDate, formatNumber } from "@/lib/utils";

type Selected = RentanKey | "RUMAH_TANGGA";

const KATEGORI: { key: RentanKey; label: string; deskripsi: string }[] = [
  {
    key: "BALITA",
    label: "Balita",
    deskripsi: "Warga usia 0–5 tahun yang memerlukan pemantauan tumbuh kembang.",
  },
  {
    key: "ANAK",
    label: "Anak usia sekolah",
    deskripsi: "Warga usia 6–17 tahun yang berada pada masa pendidikan dasar dan menengah.",
  },
  {
    key: "LANSIA",
    label: "Lansia",
    deskripsi: "Warga berusia 60 tahun ke atas yang memerlukan perhatian kesehatan dan sosial.",
  },
  {
    key: "LANSIA_SENDIRI",
    label: "Lansia hidup sendiri",
    deskripsi: "Lansia dengan status kawin cerai hidup atau cerai mati.",
  },
  {
    key: "KK_PEREMPUAN",
    label: "Kepala keluarga perempuan",
    deskripsi: "Kartu keluarga yang dikepalai oleh perempuan.",
  },
  {
    key: "PENERIMA_BANTUAN",
    label: "Penerima bantuan",
    deskripsi: "Penduduk yang terdaftar sebagai peserta data suplemen bantuan sosial.",
  },
];

const KLASIFIKASI_LABELS: Record<string, string> = {
  PRASEJAHTERA: "Prasejahtera",
  KS1: "KS1",
  KS2: "KS2",
  KS3: "KS3",
  KS3_PLUS: "KS3+",
  LAINNYA: "Lainnya",
};

function strip(value: string | null | undefined, prefix: string) {
  if (!value) return "-";
  return value.replace(new RegExp(`^${prefix}\\s+`, "i"), "");
}

export default function LaporanKelompokRentanPage() {
  const [saring, setSaring] = useState({ dusunId: "", rwId: "", rtId: "" });
  const params = new URLSearchParams();
  for (const [key, value] of Object.entries(saring)) if (value) params.set(key, value);
  const { data, isLoading } = useSWR<LaporanRentan>(
    `/laporan/rentan${params.toString() ? `?${params.toString()}` : ""}`,
    fetcher,
  );
  const { data: desa } = useSWR<Desa>("/desa", fetcher);
  const { data: daftarWilayah } = useSWR<Wilayah[]>("/wilayah", fetcher);
  const [selected, setSelected] = useState<Selected>("LANSIA");

  const regional = daftarWilayah ?? [];
  const pilihan = {
    dusunId: regional.filter((item) => item.level === "DUSUN"),
    rwId: regional.filter(
      (item) => item.level === "RW" && (!saring.dusunId || item.parentId === Number(saring.dusunId)),
    ),
    rtId: regional.filter(
      (item) => item.level === "RT" && (!saring.rwId || item.parentId === Number(saring.rwId)),
    ),
  };
  const adaSaringan = Boolean(saring.dusunId || saring.rwId || saring.rtId);

  function ubah(key: keyof typeof saring, value: string) {
    setSaring((sebelum) => ({
      ...sebelum,
      [key]: value,
      ...(key === "dusunId" ? { rwId: "", rtId: "" } : key === "rwId" ? { rtId: "" } : {}),
    }));
  }

  function unduhMatriks() {
    if (!data) return;
    unduhCsv(
      `rentan-per-wilayah-${strip(desa?.nama, "Desa")}.csv`,
      [
        "Dusun",
        "RW",
        "RT",
        "KK",
        ...data.kolom.umur.flatMap((label) => [`${label} L`, `${label} P`, `${label} Jumlah`]),
        "Total",
        "Laki-laki",
        "Perempuan",
        ...data.kolom.cacat,
        "Tidak Cacat",
        "Sakit Menahun",
      ],
      data.matriks.map((baris) => [
        baris.dusun,
        baris.rw,
        baris.rt,
        baris.kk,
        ...baris.umur.flatMap((item) => [item.lakiLaki, item.perempuan, item.jumlah]),
        baris.total,
        baris.lakiLaki,
        baris.perempuan,
        ...data.kolom.cacat.map((nama) => baris.cacat.find((item) => item.nama === nama)?.jumlah ?? 0),
        baris.tidakCacat,
        baris.sakitMenahun,
      ]),
    );
  }

  const namaDesa = strip(desa?.nama, "Desa");
  const kecamatan = strip(desa?.kecamatan, "Kecamatan");
  const kabupaten = strip(desa?.kabupaten, "Kabupaten");

  const kategoriAktif = data?.kategori.find((item) => item.key === selected);
  const metaAktif = KATEGORI.find((item) => item.key === selected);
  const jumlah: Record<RentanKey, number> = {
    BALITA: data?.ringkasan.balita ?? 0,
    ANAK: data?.ringkasan.anak ?? 0,
    LANSIA: data?.ringkasan.lansia ?? 0,
    LANSIA_SENDIRI:
      data?.kategori.find((item) => item.key === "LANSIA_SENDIRI")?.count ?? 0,
    KK_PEREMPUAN: data?.ringkasan.kkPerempuan ?? 0,
    PENERIMA_BANTUAN: data?.ringkasan.penerimaBantuan ?? 0,
  };

  return (
    <div className="animate-fade-in space-y-6">
      <div className="no-print">
        <PageHeader
          title="Laporan Kelompok Rentan"
          description="Pendataan warga dan rumah tangga yang memerlukan perhatian khusus beserta dasar penetapannya."
          action={
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={unduhMatriks} disabled={!data}>
                <Download className="h-4 w-4" />
                Unduh CSV
              </Button>
              <Button onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Cetak Laporan
              </Button>
            </div>
          }
        />

        <Card>
          <CardContent className="flex flex-wrap items-end gap-3 p-4">
            {(["dusunId", "rwId", "rtId"] as const).map((key) => (
              <div key={key} className="w-full sm:w-44">
                <Label htmlFor={key}>
                  {key === "dusunId" ? "Dusun" : key === "rwId" ? "RW" : "RT"}
                </Label>
                <Select
                  id={key}
                  className="mt-1.5"
                  value={saring[key]}
                  onChange={(event) => ubah(key, event.target.value)}
                >
                  <option value="">
                    {key === "dusunId" ? "Semua dusun" : key === "rwId" ? "Semua RW" : "Semua RT"}
                  </option>
                  {pilihan[key].map((item) => (
                    <option key={item.id} value={item.id}>
                      {item.nama}
                    </option>
                  ))}
                </Select>
              </div>
            ))}
            {adaSaringan && (
              <Button variant="ghost" onClick={() => setSaring({ dusunId: "", rwId: "", rtId: "" })}>
                <RotateCcw className="h-4 w-4" />
                Reset
              </Button>
            )}
          </CardContent>
        </Card>
      </div>

      <div className="hidden print:block">
        <div className="border-b-2 border-black pb-2 text-center">
          <p className="text-sm font-semibold uppercase">
            Pemerintah Kabupaten {kabupaten} · Kecamatan {kecamatan}
          </p>
          <p className="text-xl font-bold uppercase">Desa {namaDesa}</p>
          <p className="mt-1 text-sm font-semibold">Laporan Kelompok Rentan</p>
          <p className="text-xs">Dicetak {formatDate(new Date())}</p>
        </div>
      </div>

      {isLoading || !data ? (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 6 }).map((_, index) => (
            <div key={index} className="h-28 animate-pulse rounded-xl bg-muted" />
          ))}
        </div>
      ) : (
        <>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <StatCard
              title="Balita"
              value={formatNumber(data.ringkasan.balita)}
              hint="Usia 0–5 tahun"
              icon={UserRound}
            />
            <StatCard
              title="Anak usia sekolah"
              value={formatNumber(data.ringkasan.anak)}
              hint="Usia 6–17 tahun"
              icon={UserRound}
              tone="sky"
            />
            <StatCard
              title="Lansia"
              value={formatNumber(data.ringkasan.lansia)}
              hint="Usia 60 tahun ke atas"
              icon={UserRound}
              tone="amber"
            />
            <StatCard
              title="Kepala keluarga perempuan"
              value={formatNumber(data.ringkasan.kkPerempuan)}
              hint="Kartu keluarga"
              icon={Home}
              tone="violet"
            />
            <StatCard
              title="Penerima bantuan"
              value={formatNumber(data.ringkasan.penerimaBantuan)}
              hint="Terdaftar pada data suplemen"
              icon={ShieldCheck}
            />
            <StatCard
              title="Rumah tangga rentan"
              value={formatNumber(data.ringkasan.rumahTanggaRentan)}
              hint="Klasifikasi prasejahtera / KS1"
              icon={Home}
              tone="amber"
            />
          </div>

          <MatriksWilayah matriks={data.matriks} kolom={data.kolom} />

          <div className="flex flex-wrap gap-2">
            {KATEGORI.map((item) => (
              <button
                key={item.key}
                type="button"
                onClick={() => setSelected(item.key)}
                className={cn(
                  "rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors",
                  selected === item.key
                    ? "border-primary bg-primary text-primary-foreground"
                    : "border-border bg-card text-muted-foreground hover:bg-muted",
                )}
              >
                {item.label}
                <span className="ml-1.5 tabular-nums opacity-80">{jumlah[item.key]}</span>
              </button>
            ))}
            <button
              type="button"
              onClick={() => setSelected("RUMAH_TANGGA")}
              className={cn(
                "rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors",
                selected === "RUMAH_TANGGA"
                  ? "border-primary bg-primary text-primary-foreground"
                  : "border-border bg-card text-muted-foreground hover:bg-muted",
              )}
            >
              Rumah tangga
              <span className="ml-1.5 tabular-nums opacity-80">
                {data.ringkasan.rumahTanggaRentan}
              </span>
            </button>
          </div>

          <Card>
            <CardHeader>
              <CardTitle>
                {selected === "RUMAH_TANGGA"
                  ? "Rumah tangga prasejahtera / KS1"
                  : metaAktif?.label}
              </CardTitle>
              <p className="text-sm text-muted-foreground">
                {selected === "RUMAH_TANGGA"
                  ? "Rumah tangga dengan klasifikasi kesejahteraan prasejahtera atau KS1."
                  : metaAktif?.deskripsi}
              </p>
            </CardHeader>
            <CardContent className="p-0 pb-2">
              {selected === "RUMAH_TANGGA" ? (
                data.rumahTangga.length ? (
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Nomor</TableHead>
                        <TableHead>Kepala rumah tangga</TableHead>
                        <TableHead>Klasifikasi</TableHead>
                        <TableHead className="text-right">Anggota</TableHead>
                        <TableHead>Alamat</TableHead>
                        <TableHead>RT</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {data.rumahTangga.map((row) => (
                        <TableRow key={row.id}>
                          <TableCell className="font-mono text-xs">{row.nomor}</TableCell>
                          <TableCell className="font-medium">{row.kepalaNama}</TableCell>
                          <TableCell>
                            <Badge variant="secondary">
                              {KLASIFIKASI_LABELS[row.klasifikasi ?? ""] ??
                                row.klasifikasi ??
                                "-"}
                            </Badge>
                          </TableCell>
                          <TableCell className="text-right tabular-nums">
                            {formatNumber(row.jumlahAnggota)}
                          </TableCell>
                          <TableCell className="text-muted-foreground">
                            {row.alamat ?? "-"}
                          </TableCell>
                          <TableCell className="text-muted-foreground">
                            {row.rt ?? "-"}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                ) : (
                  <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                    Belum ada rumah tangga dengan klasifikasi prasejahtera atau KS1.
                  </p>
                )
              ) : kategoriAktif?.data.length ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>NIK</TableHead>
                      <TableHead>Nama</TableHead>
                      <TableHead>JK</TableHead>
                      <TableHead className="text-right">Umur</TableHead>
                      <TableHead>Status kawin</TableHead>
                      <TableHead>Alamat</TableHead>
                      <TableHead>RT</TableHead>
                      <TableHead>Keterangan</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {kategoriAktif.data.map((row) => (
                      <TableRow key={row.id}>
                        <TableCell className="font-mono text-xs">{row.nik}</TableCell>
                        <TableCell className="font-medium">{row.nama}</TableCell>
                        <TableCell>
                          <Badge variant={row.jenisKelamin === "L" ? "info" : "secondary"}>
                            {row.jenisKelamin}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right tabular-nums">
                          {row.umur ?? "-"}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {row.statusKawin ?? "-"}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {row.alamat ?? "-"}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {row.rt ?? "-"}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {row.detail ?? "-"}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                  Belum ada data pada kategori ini.
                </p>
              )}
            </CardContent>
          </Card>

          <p className="text-xs text-muted-foreground">
            Umur dihitung per hari ini. Kategori kepala keluarga perempuan dan penerima
            bantuan mengikuti data kartu keluarga serta peserta data suplemen.
          </p>
        </>
      )}
    </div>
  );
}

function MatriksWilayah({
  matriks,
  kolom,
}: {
  matriks: MatriksRentan[];
  kolom: LaporanRentan["kolom"];
}) {
  const total = (ambil: (baris: MatriksRentan) => number) =>
    matriks.reduce((jumlah, baris) => jumlah + ambil(baris), 0);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Rekap per Wilayah</CardTitle>
        <p className="text-sm text-muted-foreground">
          Jumlah kartu keluarga, kelompok umur, disabilitas, dan penyakit menahun per RT.
        </p>
      </CardHeader>
      <CardContent className="p-0 pb-2">
        {matriks.length ? (
          <div className="overflow-x-auto">
            <Table className="min-w-[1200px] text-xs">
              <TableHeader>
                <TableRow>
                  {["Dusun", "RW", "RT", "KK", "L", "P", "Total"].map((label) => (
                    <TableHead key={label} rowSpan={2} className="whitespace-nowrap">
                      {label}
                    </TableHead>
                  ))}
                  <TableHead colSpan={kolom.umur.length} className="text-center">
                    Kondisi dan Kelompok Umur
                  </TableHead>
                  <TableHead colSpan={kolom.cacat.length + 1} className="text-center">
                    Cacat
                  </TableHead>
                  <TableHead rowSpan={2} className="whitespace-nowrap">
                    Sakit Menahun
                  </TableHead>
                </TableRow>
                <TableRow>
                  {kolom.umur.map((label) => (
                    <TableHead key={label} className="whitespace-nowrap text-center">
                      {label}
                    </TableHead>
                  ))}
                  {[...kolom.cacat, "Tidak Cacat"].map((label) => (
                    <TableHead key={label} className="whitespace-nowrap text-center">
                      {label}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {matriks.map((baris) => (
                  <TableRow key={`${baris.dusun}-${baris.rw}-${baris.rt}`}>
                    <TableCell className="whitespace-nowrap">{baris.dusun}</TableCell>
                    <TableCell className="whitespace-nowrap">{baris.rw}</TableCell>
                    <TableCell className="whitespace-nowrap font-medium">{baris.rt}</TableCell>
                    <TableCell className="text-right tabular-nums">{baris.kk}</TableCell>
                    <TableCell className="text-right tabular-nums">{baris.lakiLaki}</TableCell>
                    <TableCell className="text-right tabular-nums">{baris.perempuan}</TableCell>
                    <TableCell className="text-right font-semibold tabular-nums">
                      {baris.total}
                    </TableCell>
                    {baris.umur.map((item) => (
                      <TableCell key={item.label} className="text-right tabular-nums">
                        {item.jumlah || "-"}
                      </TableCell>
                    ))}
                    {kolom.cacat.map((nama) => (
                      <TableCell key={nama} className="text-right tabular-nums">
                        {baris.cacat.find((item) => item.nama === nama)?.jumlah || "-"}
                      </TableCell>
                    ))}
                    <TableCell className="text-right tabular-nums">
                      {baris.tidakCacat || "-"}
                    </TableCell>
                    <TableCell className="text-right tabular-nums">
                      {baris.sakitMenahun || "-"}
                    </TableCell>
                  </TableRow>
                ))}
                <TableRow className="border-t-2 font-semibold">
                  <TableCell colSpan={4}>JUMLAH</TableCell>
                  <TableCell className="text-right tabular-nums">
                    {total((baris) => baris.lakiLaki)}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {total((baris) => baris.perempuan)}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {total((baris) => baris.total)}
                  </TableCell>
                  {kolom.umur.map((label) => (
                    <TableCell key={label} className="text-right tabular-nums">
                      {total((baris) =>
                        baris.umur.reduce(
                          (jumlah, item) => jumlah + (item.label === label ? item.jumlah : 0),
                          0,
                        ),
                      )}
                    </TableCell>
                  ))}
                  {kolom.cacat.map((nama) => (
                    <TableCell key={nama} className="text-right tabular-nums">
                      {total((baris) =>
                        baris.cacat.reduce(
                          (jumlah, item) => jumlah + (item.nama === nama ? item.jumlah : 0),
                          0,
                        ),
                      )}
                    </TableCell>
                  ))}
                  <TableCell className="text-right tabular-nums">
                    {total((baris) => baris.tidakCacat)}
                  </TableCell>
                  <TableCell className="text-right tabular-nums">
                    {total((baris) => baris.sakitMenahun)}
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        ) : (
          <p className="px-5 py-10 text-center text-sm text-muted-foreground">
            Belum ada penduduk aktif pada wilayah yang disaring.
          </p>
        )}
      </CardContent>
    </Card>
  );
}