"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";
import { Download, Printer } from "lucide-react";
import { fetcher } from "@/lib/api";
import { cetakHtml } from "@/lib/cetak";
import { unduhCsv } from "@/lib/sekretariat";
import { formatDateShort } from "@/lib/utils";
import type { Penduduk } from "@/lib/types";
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 HEADER = [
  "Nomor Urut",
  "Nama Lengkap / Panggilan",
  "Jenis Kelamin",
  "Status Perkawinan",
  "Tempat & Tanggal Lahir",
  "Agama",
  "Pendidikan Terakhir",
  "Pekerjaan",
  "Dapat Membaca Huruf",
  "Kewarganegaraan",
  "Alamat Lengkap",
  "Kedudukan Dlm Keluarga",
  "NIK",
  "No. KK",
  "Ket",
  "Tempat Lahir",
  "Tgl",
];

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

function nilai(value: unknown) {
  if (value === null || value === undefined || value === "") return "-";
  return String(value);
}

export function BumindesPendudukInduk() {
  const { data, isLoading } = useSWR<Penduduk[]>("/penduduk/ekspor", fetcher);
  const now = new Date();
  const [tahun, setTahun] = useState(String(now.getFullYear()));
  const [bulan, setBulan] = useState(String(now.getMonth() + 1));
  const daftar = data ?? [];

  const years = Array.from(
    { length: 22 },
    (_, index) => now.getFullYear() + 1 - index,
  );

  const filtered = useMemo(
    () =>
      daftar.filter((row) => {
        if (!row.createdAt) return true;
        const created = new Date(row.createdAt);
        if (tahun && created.getFullYear() !== Number(tahun)) return false;
        if (bulan && created.getMonth() + 1 !== Number(bulan)) return false;
        return true;
      }),
    [daftar, tahun, bulan],
  );

  const baris = (row: Penduduk, index: number) => [
    index + 1,
    row.nama,
    row.jenisKelamin === "L" ? "Laki-laki" : "Perempuan",
    nilai(row.statusKawin),
    [row.tempatLahir, row.tanggalLahir ? formatDateShort(row.tanggalLahir) : null]
      .filter(Boolean)
      .join(", ") || "-",
    nilai(row.agama),
    nilai(row.pendidikan),
    nilai(row.pekerjaan),
    nilai(row.dapatMembacaHuruf),
    nilai(row.warganegara),
    nilai(row.alamat),
    nilai(row.hubunganKeluarga),
    row.nik,
    nilai(row.keluarga?.noKk),
    nilai(row.keterangan),
    nilai(row.tempatLahir),
    row.tanggalLahir ? formatDateShort(row.tanggalLahir) : "-",
  ];

  function cetak() {
    const isi = `<h3>Buku Administrasi Penduduk</h3><table><thead><tr>${HEADER.map(
      (head) => `<th>${head}</th>`,
    ).join("")}</tr></thead><tbody>${filtered
      .map(
        (row, index) =>
          `<tr>${baris(row, index)
            .map((cell) => `<td>${String(cell)}</td>`)
            .join("")}</tr>`,
      )
      .join("")}</tbody></table>`;
    cetakHtml("Buku Administrasi Penduduk", isi);
  }

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div>
          <h1 className="text-xl font-semibold">Administrasi Penduduk</h1>
          <p className="text-sm text-muted-foreground">Buku induk penduduk desa.</p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          <Select
            value={tahun}
            onChange={(event) => setTahun(event.target.value)}
            className="w-32"
            aria-label="Pilih tahun"
          >
            {years.map((year) => (
              <option key={year} value={year}>
                {year}
              </option>
            ))}
          </Select>
          <Select
            value={bulan}
            onChange={(event) => setBulan(event.target.value)}
            className="w-36"
            aria-label="Pilih bulan"
          >
            {BULAN.map((nama, index) => (
              <option key={nama} value={index + 1}>
                {nama}
              </option>
            ))}
          </Select>
          <Button variant="outline" size="sm" onClick={cetak}>
            <Printer className="h-4 w-4" /> Cetak
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() =>
              unduhCsv(
                `buku-administrasi-penduduk-${tahun}-${bulan}.csv`,
                HEADER,
                filtered.map((row, index) => baris(row, index)),
              )
            }
          >
            <Download className="h-4 w-4" /> Unduh
          </Button>
        </div>
      </div>

      <Card>
        <CardContent className="space-y-3 p-4">
          <p className="text-xs text-muted-foreground">
            {isLoading ? "Memuat data…" : `${filtered.length} penduduk`}
          </p>
          <div className="overflow-x-auto rounded-lg border border-border">
            <Table>
              <TableHeader>
                <TableRow>
                  {HEADER.map((head) => (
                    <TableHead key={head} className="whitespace-nowrap">
                      {head}
                    </TableHead>
                  ))}
                </TableRow>
              </TableHeader>
              <TableBody>
                {filtered.map((row, index) => (
                  <TableRow key={row.id}>
                    {baris(row, index).map((cell, cellIndex) => (
                      <TableCell
                        key={cellIndex}
                        className="whitespace-nowrap text-muted-foreground"
                      >
                        {cell}
                      </TableCell>
                    ))}
                  </TableRow>
                ))}
                {!isLoading && !filtered.length && (
                  <TableRow>
                    <TableCell
                      colSpan={HEADER.length}
                      className="py-8 text-center text-sm text-muted-foreground"
                    >
                      Belum ada data.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}