"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import useSWR from "swr";
import { ArrowLeft, Printer, Search, UserRoundSearch } from "lucide-react";
import type { Paginated, Penduduk, PermohonanSurat } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { PageHeader } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { formatDateShort } from "@/lib/utils";

/**
 * Padanan halaman /keluar/perorangan OpenSID: arsip surat keluar untuk satu
 * warga tertentu, dipilih lewat combo box NIK.
 */
export default function RekamSuratPeroranganPage() {
  const [cari, setCari] = useState("");
  const [nik, setNik] = useState("");

  const { data: pendudukList, isLoading: wargaLoading } = useSWR<
    Paginated<Penduduk>
  >("/penduduk?limit=200", fetcher);

  const warga = useMemo(() => {
    const kata = cari.trim().toLowerCase();
    const daftar = pendudukList?.data ?? [];
    if (!kata) return daftar;
    return daftar.filter(
      (item) =>
        item.nama.toLowerCase().includes(kata) || item.nik.includes(kata),
    );
  }, [pendudukList, cari]);

  useEffect(() => {
    if (!nik && warga.length) setNik(warga[0].nik);
  }, [nik, warga]);

  const { data, isLoading } = useSWR<Paginated<PermohonanSurat>>(
    nik ? `/surat?nik=${encodeURIComponent(nik)}&limit=200` : null,
    fetcher,
  );

  const daftar = data?.data ?? [];
  const pendudukTerpilih = (pendudukList?.data ?? []).find(
    (item) => item.nik === nik,
  );

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Rekam Surat Perorangan"
        description="Riwayat surat keluar milik satu warga, dari pengajuan sampai surat ditandatangani."
        action={
          <Button variant="outline" asChild>
            <Link href="/admin/cetak-surat?tab=arsip">
              <ArrowLeft className="h-4 w-4" />
              Kembali ke Arsip Surat
            </Link>
          </Button>
        }
      />

      <Card>
        <CardContent className="space-y-3 p-4">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
            <div className="relative w-full lg:max-w-sm">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={cari}
                onChange={(event) => setCari(event.target.value)}
                placeholder="Cari nama atau NIK warga…"
                className="pl-9"
                aria-label="Cari warga"
              />
            </div>
            <Select
              value={nik}
              onChange={(event) => setNik(event.target.value)}
              aria-label="Nik"
              name="nik"
              className="w-full lg:max-w-md"
            >
              <option value="">
                {wargaLoading ? "Memuat warga…" : "Pilih penduduk"}
              </option>
              {warga.map((item) => (
                <option key={item.nik} value={item.nik}>
                  {item.nama} · {item.nik}
                </option>
              ))}
            </Select>
            <span className="text-sm text-muted-foreground">
              {daftar.length} surat terdaftar
            </span>
          </div>
          {pendudukTerpilih && (
            <div className="flex flex-wrap items-center gap-2 rounded-lg bg-muted/50 px-3 py-2 text-sm">
              <UserRoundSearch className="h-4 w-4 text-muted-foreground" />
              <span className="font-medium">{pendudukTerpilih.nama}</span>
              <span className="font-mono text-xs text-muted-foreground">
                {pendudukTerpilih.nik}
              </span>
              <Badge variant="secondary">{daftar.length} surat</Badge>
            </div>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-0">
          {isLoading || !nik ? (
            <div className="space-y-2 p-4">
              {Array.from({ length: 5 }).map((_, index) => (
                <div key={index} className="h-12 animate-pulse rounded-lg bg-muted" />
              ))}
            </div>
          ) : daftar.length ? (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-14">No</TableHead>
                    <TableHead className="w-28">Aksi</TableHead>
                    <TableHead className="w-28">Kode Surat</TableHead>
                    <TableHead className="w-40">No. Urut</TableHead>
                    <TableHead>Jenis Surat</TableHead>
                    <TableHead className="w-44">Nama Penduduk</TableHead>
                    <TableHead className="hidden xl:table-cell">Keterangan</TableHead>
                    <TableHead className="hidden lg:table-cell">
                      Ditandatangani Oleh
                    </TableHead>
                    <TableHead className="w-32">Tanggal</TableHead>
                    <TableHead className="w-32">User</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {daftar.map((surat, index) => (
                    <TableRow key={surat.id}>
                      <TableCell className="text-muted-foreground">
                        {index + 1}
                      </TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" asChild>
                          <Link href={`/admin/surat/${surat.id}/cetak`}>
                            <Printer className="h-4 w-4" />
                            Cetak
                          </Link>
                        </Button>
                      </TableCell>
                      <TableCell>
                        <span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
                          {surat.jenis?.kode ?? "-"}
                        </span>
                      </TableCell>
                      <TableCell className="font-mono text-xs">
                        {surat.nomor}
                      </TableCell>
                      <TableCell>{surat.jenis?.nama ?? "-"}</TableCell>
                      <TableCell>
                        <div className="font-medium">{surat.penduduk?.nama ?? "-"}</div>
                        <div className="font-mono text-xs text-muted-foreground">
                          {surat.pemohon && surat.pemohon !== surat.penduduk?.nama
                            ? `Pemohon: ${surat.pemohon}`
                            : ""}
                        </div>
                      </TableCell>
                      <TableCell className="hidden xl:table-cell">
                        <span className="line-clamp-2 text-xs">{surat.keperluan}</span>
                      </TableCell>
                      <TableCell className="hidden text-xs lg:table-cell">
                        {surat.ditandatanganiOleh ?? "-"}
                      </TableCell>
                      <TableCell className="text-xs">
                        {formatDateShort(surat.tanggal)}
                      </TableCell>
                      <TableCell className="text-xs">
                        {surat.dibuatOleh ?? "-"}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          ) : (
            <div className="py-16 text-center">
              <p className="font-semibold">Belum ada surat untuk warga ini</p>
              <p className="mt-1 text-sm text-muted-foreground">
                Pilih penduduk lain atau buat permohonan surat terlebih dahulu.
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}