"use client";

import { Suspense, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import useSWR from "swr";
import {
  ChartPie,
  Download,
  FilePenLine,
  FilePlus2,
  FileText,
  LayoutTemplate,
  Printer,
  Search,
  Send,
  Sparkles,
  Stamp,
  UserRoundSearch,
  Wrench,
} from "lucide-react";
import { toast } from "sonner";
import type {
  Desa,
  Paginated,
  PermohonanSurat,
  RingkasanSurat,
  SuratJenis,
} from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { cetakHtml, escapeHtml, kopDesa } from "@/lib/cetak";
import { unduhCsv } from "@/lib/sekretariat";
import {
  SURAT_KATEGORI,
  SURAT_TEMPLATES,
  getSuratTemplate,
} from "@/lib/surat/templates";
import { hasTemplateOverride } from "@/lib/surat/override";
import { PageHeader, StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn, formatDateShort, labelStatusSurat } from "@/lib/utils";

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

type Tab = "template" | "arsip";

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

function lampiranLabel(value: string | null) {
  if (!value) return "-";
  return value
    .replace(/\.php/gi, "")
    .split(",")
    .map((item) => item.trim().toUpperCase())
    .filter(Boolean)
    .join(", ");
}

function CetakSuratPageInner() {
  const searchParams = useSearchParams();

  const [tab, setTab] = useState<Tab>("template");

  useEffect(() => {
    const param = searchParams.get("tab");
    if (param === "arsip" || param === "template") setTab(param);
  }, [searchParams]);
  const [jenisSearch, setJenisSearch] = useState("");
  const [kategori, setKategori] = useState("");

  const [search, setSearch] = useState("");
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("SELESAI");
  const [arsipTahun, setArsipTahun] = useState("");
  const [arsipBulan, setArsipBulan] = useState("");
  const [arsipJenisId, setArsipJenisId] = useState("");

  const { data: jenisList, isLoading: jenisLoading } = useSWR<SuratJenis[]>(
    "/surat/jenis",
    fetcher,
  );

  const query = new URLSearchParams({ limit: "200" });
  if (q) query.set("q", q);
  if (status) query.set("status", status);

  const { data, isLoading, mutate } = useSWR<Paginated<PermohonanSurat>>(
    `/surat?${query.toString()}`,
    fetcher,
  );
  const { data: ringkasan, mutate: mutateRingkasan } = useSWR<RingkasanSurat>(
    "/surat/ringkasan",
    fetcher,
  );
  const { data: desa } = useSWR<Desa>("/desa", fetcher);

  const [perbaikiOpen, setPerbaikiOpen] = useState(false);
  const [perbaikiLoading, setPerbaikiLoading] = useState(false);

  async function jalankanPerbaiki() {
    setPerbaikiLoading(true);
    try {
      const hasil = await apiSend<{ diubah: number }>("/surat/perbaiki", "POST");
      toast.success(
        hasil.diubah
          ? `${hasil.diubah} surat diubah menjadi siap cetak`
          : "Tidak ada surat berstatus proses yang perlu diperbaiki",
      );
      setPerbaikiOpen(false);
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(
        error instanceof ApiError ? error.message : "Gagal memperbaiki arsip surat",
      );
    } finally {
      setPerbaikiLoading(false);
    }
  }

  async function ubahTerlapor(surat: PermohonanSurat) {
    try {
      await apiSend(`/surat/${surat.id}/lapor`, "PATCH", { terlapor: !surat.terlapor });
      toast.success(
        surat.terlapor
          ? "Tanda laporan ke instansi dihapus"
          : "Surat ditandai sudah dilaporkan ke instansi",
      );
      await mutate();
    } catch (error) {
      toast.error(
        error instanceof ApiError ? error.message : "Gagal mengubah status terlapor",
      );
    }
  }

  const daftar = useMemo(() => {
    return (data?.data ?? []).filter((surat) => {
      if (arsipTahun && new Date(surat.tanggal).getFullYear() !== Number(arsipTahun)) {
        return false;
      }
      if (
        arsipBulan &&
        new Date(surat.tanggal).getMonth() + 1 !== Number(arsipBulan)
      ) {
        return false;
      }
      if (arsipJenisId && String(surat.jenisId) !== arsipJenisId) return false;
      return true;
    });
  }, [data, arsipTahun, arsipBulan, arsipJenisId]);

  const tahunArsip = useMemo(() => {
    const set = new Set(
      (data?.data ?? []).map((surat) => new Date(surat.tanggal).getFullYear()),
    );
    return [...set].sort((a, b) => b - a);
  }, [data]);

  const adaFilterArsip = Boolean(arsipTahun || arsipBulan || arsipJenisId || q || status);

  const templates = useMemo(
    () =>
      (jenisList ?? []).map((jenis) => {
        const template = getSuratTemplate(jenis.urlSurat, jenis.nama);
        return { jenis, template };
      }),
    [jenisList],
  );

  const filteredTemplates = useMemo(() => {
    const kata = jenisSearch.trim().toLowerCase();
    return templates.filter(({ jenis, template }) => {
      if (kategori && template.kategori !== kategori) return false;
      if (!kata) return true;
      return (
        jenis.nama.toLowerCase().includes(kata) ||
        jenis.kode.toLowerCase().includes(kata) ||
        template.kategori.toLowerCase().includes(kata) ||
        (jenis.urlSurat ?? "").toLowerCase().includes(kata)
      );
    });
  }, [templates, jenisSearch, kategori]);

  const mandiri = (jenisList ?? []).filter((jenis) => jenis.mandiri).length;

  function labelJenisArsip(jenisId: number) {
    return (jenisList ?? []).find((item) => item.id === jenisId)?.nama ?? "-";
  }

  function bersihkanArsip() {
    setArsipTahun("");
    setArsipBulan("");
    setArsipJenisId("");
    setSearch("");
    setQ("");
    setStatus("SELESAI");
  }

  function cetakArsip() {
    if (!daftar.length) {
      toast.error("Tidak ada surat untuk dicetak");
      return;
    }
    const isi = `
      ${kopDesa(desa, "Arsip Surat Keluar")}
      <table class="info">
        <tr><td>Tahun</td><td>:</td><td>${escapeHtml(arsipTahun || "Semua tahun")}</td></tr>
        <tr><td>Bulan</td><td>:</td><td>${escapeHtml(arsipBulan || "Semua bulan")}</td></tr>
        <tr><td>Jumlah surat</td><td>:</td><td>${daftar.length}</td></tr>
      </table>
      <table>
        <thead><tr><th>No</th><th>Kode Surat</th><th>No Urut</th><th>Jenis Surat</th><th>Terlapor</th><th>Pemohon</th><th>Keterangan</th><th>Tanggal</th><th>Status</th></tr></thead>
        <tbody>
          ${daftar
            .map(
              (surat, index) =>
                `<tr><td class="num">${index + 1}</td><td>${escapeHtml(surat.jenis?.kode ?? "-")}</td><td>${escapeHtml(surat.nomor)}</td><td>${escapeHtml(surat.jenis?.nama ?? "-")}</td><td>${surat.terlapor ? "Sudah" : "Belum"}</td><td>${escapeHtml(surat.penduduk?.nama ?? surat.pemohon ?? "-")}</td><td>${escapeHtml(surat.keperluan)}</td><td>${escapeHtml(new Date(surat.tanggal).toLocaleDateString("id-ID"))}</td><td>${escapeHtml(labelStatusSurat(surat.status))}</td></tr>`,
            )
            .join("")}
        </tbody>
      </table>
      <div class="ttd">
        <div>
          <div>${escapeHtml((desa?.kecamatan ?? "Cipari").toUpperCase())}, ${new Date().toLocaleDateString("id-ID", { day: "2-digit", month: "long", year: "numeric" })}</div>
          <div>Kepala Desa ${escapeHtml((desa?.nama ?? "Mulyadadi").replace(/^Desa\s+/i, ""))}</div>
          <div class="ruang"></div>
          <div><strong>${escapeHtml(desa?.kepalaDesa ?? "-")}</strong></div>
        </div>
      </div>
    `;
    if (!cetakHtml("Arsip Surat Keluar", isi)) {
      toast.error("Izinkan pop-up untuk mencetak arsip surat");
    }
  }

  function unduhArsip() {
    if (!daftar.length) {
      toast.error("Tidak ada surat untuk diunduh");
      return;
    }
    unduhCsv(
      `arsip-surat-${arsipTahun || "semua"}-${new Date().toISOString().slice(0, 10)}.csv`,
      [
        "Kode Surat",
        "No Urut",
        "Jenis Surat",
        "Nik",
        "Terlapor",
        "Pemohon",
        "Keterangan",
        "Tanggal",
        "Status",
        "Alasan Ditolak",
      ],
      daftar.map((surat) => [
        surat.jenis?.kode ?? "",
        surat.nomor,
        surat.jenis?.nama ?? "",
        surat.penduduk?.nik ?? "",
        surat.terlapor ? "Sudah" : "Belum",
        surat.penduduk?.nama ?? surat.pemohon ?? "",
        surat.keperluan,
        surat.tanggal.slice(0, 10),
        labelStatusSurat(surat.status),
        surat.status === "DITOLAK" ? (surat.catatan ?? "") : "",
      ]),
    );
    toast.success(`${daftar.length} surat diekspor`);
  }

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Cetak Surat"
        description="Isi dan cetak surat dari seluruh template desa, sekaligus sesuaikan teks tiap template."
        action={
          <Button variant="outline" asChild>
            <Link href="/admin/surat">
              <FilePlus2 className="h-4 w-4" />
              Kelola Permohonan
            </Link>
          </Button>
        }
      />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard
          title="Template surat"
          value={jenisList ? templates.length : SURAT_TEMPLATES.length}
          hint="Mengikuti OpenSID"
          icon={LayoutTemplate}
          tone="sky"
        />
        <StatCard
          title="Layanan mandiri"
          value={mandiri}
          hint="Dapat diajukan warga"
          icon={Sparkles}
          tone="violet"
        />
        <StatCard
          title="Surat selesai"
          value={ringkasan?.SELESAI ?? 0}
          hint="Siap dicetak"
          icon={Stamp}
          tone="emerald"
        />
        <StatCard
          title="Total permohonan"
          value={ringkasan?.total ?? 0}
          hint="Seluruh status"
          icon={FileText}
          tone="amber"
        />
      </div>

      <div className="inline-flex rounded-xl border border-border bg-card p-1">
        {[
          { key: "template" as const, label: "Template Surat", icon: LayoutTemplate },
          { key: "arsip" as const, label: "Arsip Surat", icon: Printer },
        ].map((item) => (
          <button
            key={item.key}
            type="button"
            onClick={() => setTab(item.key)}
            className={cn(
              "inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors",
              tab === item.key
                ? "bg-primary text-primary-foreground shadow-sm"
                : "text-muted-foreground hover:bg-muted",
            )}
          >
            <item.icon className="h-4 w-4" />
            {item.label}
          </button>
        ))}
      </div>

      {tab === "template" ? (
        <Card>
          <CardContent className="p-0">
            <div className="flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
              <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={jenisSearch}
                  onChange={(event) => setJenisSearch(event.target.value)}
                  placeholder="Cari nama, kode, kategori, atau URL surat…"
                  className="pl-9"
                />
              </div>
              <div className="flex flex-wrap items-center gap-3">
                <Select
                  value={kategori}
                  onChange={(event) => setKategori(event.target.value)}
                  aria-label="Filter kategori"
                  className="w-full sm:w-56"
                >
                  <option value="">Semua kategori</option>
                  {SURAT_KATEGORI.map((item) => (
                    <option key={item} value={item}>
                      {item}
                    </option>
                  ))}
                </Select>
                <span className="text-sm text-muted-foreground">
                  {filteredTemplates.length} dari {templates.length} template
                </span>
              </div>
            </div>

            {jenisLoading ? (
              <div className="space-y-2 p-4">
                {Array.from({ length: 6 }).map((_, index) => (
                  <div key={index} className="h-12 animate-pulse rounded-lg bg-muted" />
                ))}
              </div>
            ) : filteredTemplates.length ? (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-14">No</TableHead>
                      <TableHead className="w-40">Aksi</TableHead>
                      <TableHead>Nama Surat</TableHead>
                      <TableHead className="w-44">Kode / Klasifikasi</TableHead>
                      <TableHead className="w-64">Lampiran</TableHead>
                      <TableHead className="w-28">Tercetak</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredTemplates.map(({ jenis, template }, index) => (
                      <TableRow key={jenis.id}>
                        <TableCell className="text-muted-foreground">
                          {index + 1}
                        </TableCell>
                        <TableCell>
                          <Button variant="outline" size="sm" asChild>
                            <Link href={`/admin/cetak-surat/${jenis.id}`}>
                              <Printer className="h-4 w-4" />
                              Cetak
                            </Link>
                          </Button>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="font-medium">{jenis.nama}</span>
                            <span className="text-[11px] text-muted-foreground">
                              {template.kategori}
                            </span>
                            {jenis.mandiri && <Badge variant="info">Mandiri</Badge>}
                            <Badge variant={jenis.aktif ? "success" : "secondary"}>
                              {jenis.aktif ? "Aktif" : "Nonaktif"}
                            </Badge>
                            {hasTemplateOverride(jenis.template) && (
                              <Badge variant="warning" className="gap-1">
                                <FilePenLine className="h-3 w-3" />
                                Teks disesuaikan
                              </Badge>
                            )}
                          </div>
                          <div className="mt-0.5 text-[11px] text-muted-foreground">
                            {template.fields.length} isian
                            {jenis.urlSurat ? ` · ${jenis.urlSurat}` : ""}
                          </div>
                        </TableCell>
                        <TableCell>
                          <span className="rounded-full bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground">
                            {jenis.kode}
                          </span>
                        </TableCell>
                        <TableCell>
                          <span
                            className={cn(
                              "font-mono text-xs",
                              jenis.lampiran ? "text-foreground" : "text-muted-foreground",
                            )}
                          >
                            {lampiranLabel(jenis.lampiran)}
                          </span>
                        </TableCell>
                        <TableCell>{jenis._count?.permohonan ?? 0}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            ) : (
              <div className="py-16 text-center">
                <p className="font-semibold">Template tidak ditemukan</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Ubah kata kunci pencarian atau filter kategori.
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent className="p-0">
            <div className="flex flex-col gap-3 border-b p-4">
              <div className="flex flex-wrap items-center gap-2">
                <Button variant="outline" size="sm" asChild>
                  <Link href="/admin/cetak-surat/perorangan">
                    <UserRoundSearch className="h-4 w-4" />
                    Rekam Surat Perorangan
                  </Link>
                </Button>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/admin/cetak-surat/grafik">
                    <ChartPie className="h-4 w-4" />
                    Pie Surat Keluar
                  </Link>
                </Button>
                <Button variant="outline" size="sm" onClick={cetakArsip}>
                  <Printer className="h-4 w-4" />
                  Cetak
                </Button>
                <Button variant="outline" size="sm" onClick={unduhArsip}>
                  <Download className="h-4 w-4" />
                  Unduh
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  title="Semua surat yang berstatus proses atau tidak ada statusnya akan diubah menjadi siap cetak"
                  onClick={() => setPerbaikiOpen(true)}
                >
                  <Wrench className="h-4 w-4" />
                  Perbaiki
                </Button>
                {adaFilterArsip && (
                  <Button variant="ghost" size="sm" onClick={bersihkanArsip}>
                    Bersihkan
                  </Button>
                )}
                <span className="ml-auto text-sm text-muted-foreground">
                  {daftar.length} surat
                </span>
              </div>
              <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                <form
                  onSubmit={(event) => {
                    event.preventDefault();
                    setQ(search.trim());
                  }}
                  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={search}
                    onChange={(event) => setSearch(event.target.value)}
                    placeholder="Cari nomor, pemohon, atau jenis surat…"
                    className="pl-9"
                  />
                </form>
                <div className="flex flex-wrap items-center gap-2">
                  <Select
                    value={arsipTahun}
                    onChange={(event) => setArsipTahun(event.target.value)}
                    aria-label="Pilih Tahun"
                    className="w-full sm:w-36"
                  >
                    <option value="">Pilih Tahun</option>
                    {tahunArsip.map((tahun) => (
                      <option key={tahun} value={String(tahun)}>
                        {tahun}
                      </option>
                    ))}
                  </Select>
                  <Select
                    value={arsipBulan}
                    onChange={(event) => setArsipBulan(event.target.value)}
                    aria-label="Pilih Bulan"
                    className="w-full sm:w-40"
                  >
                    <option value="">Pilih Bulan</option>
                    {NAMA_BULAN.map((nama, index) => (
                      <option key={nama} value={String(index + 1)}>
                        {nama}
                      </option>
                    ))}
                  </Select>
                  <Select
                    value={arsipJenisId}
                    onChange={(event) => setArsipJenisId(event.target.value)}
                    aria-label="Pilih Jenis Surat"
                    className="w-full sm:w-56"
                  >
                    <option value="">Pilih Jenis Surat</option>
                    {(jenisList ?? []).map((jenis) => (
                      <option key={jenis.id} value={String(jenis.id)}>
                        {jenis.nama}
                      </option>
                    ))}
                  </Select>
                  <Select
                    value={status}
                    onChange={(event) => setStatus(event.target.value)}
                    aria-label="Pilih Status"
                    className="w-full sm:w-44"
                  >
                    <option value="">Pilih Status</option>
                    <option value="SELESAI">Selesai (siap cetak)</option>
                    <option value="DIPROSES">Diproses</option>
                    <option value="DIAJUKAN">Diajukan</option>
                    <option value="DITOLAK">Ditolak</option>
                  </Select>
                </div>
              </div>
            </div>

            {isLoading ? (
              <div className="space-y-2 p-4">
                {Array.from({ length: 6 }).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-40 font-mono">NIK</TableHead>
                      <TableHead className="w-44">Terlapor</TableHead>
                      <TableHead>Pemohon</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>
                      <TableHead className="w-36">Status</TableHead>
                      <TableHead className="hidden lg:table-cell">Alasan Ditolak</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 ?? labelJenisArsip(surat.jenisId)}
                        </TableCell>
                        <TableCell className="font-mono text-xs">
                          {surat.penduduk?.nik ?? "-"}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            <Badge variant={surat.terlapor ? "success" : "secondary"}>
                              {surat.terlapor ? "Terlapor" : "Belum"}
                            </Badge>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-7 w-7"
                              title={
                                surat.terlapor
                                  ? "Batalkan tanda sudah dilaporkan ke instansi"
                                  : "Tandai sudah dilaporkan ke instansi"
                              }
                              onClick={() => ubahTerlapor(surat)}
                            >
                              <Send className="h-3.5 w-3.5" />
                            </Button>
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="font-medium">
                            {surat.penduduk?.nama ?? surat.pemohon ?? "-"}
                          </div>
                          {surat.pemohon && surat.pemohon !== surat.penduduk?.nama && (
                            <div className="text-xs text-muted-foreground">
                              Isian: {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>
                        <TableCell>
                          <Badge variant={STATUS_VARIANT[surat.status] ?? "secondary"}>
                            {labelStatusSurat(surat.status)}
                          </Badge>
                        </TableCell>
                        <TableCell className="hidden lg:table-cell">
                          <span
                            className={cn(
                              "text-xs",
                              surat.catatan ? "text-destructive" : "text-muted-foreground",
                            )}
                          >
                            {surat.status === "DITOLAK" ? (surat.catatan ?? "-") : "-"}
                          </span>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            ) : (
              <div className="py-16 text-center">
                <p className="font-semibold">Belum ada surat untuk dicetak</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  Selesaikan permohonan surat terlebih dahulu agar masuk arsip cetak, atau
                  bersihkan filter.
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      <Dialog open={perbaikiOpen} onOpenChange={setPerbaikiOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Perbaiki Arsip Surat</DialogTitle>
            <DialogDescription>
              Surat yang ada sekarang, akan diverifikasi semua. Ingin Melanjutkan?
            </DialogDescription>
          </DialogHeader>
          <p className="rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-900 ring-1 ring-amber-200">
            Semua surat yang berstatus proses atau tidak ada statusnya akan diubah
            menjadi siap cetak.
          </p>
          <DialogFooter>
            <Button variant="outline" onClick={() => setPerbaikiOpen(false)}>
              Tidak
            </Button>
            <Button onClick={jalankanPerbaiki} disabled={perbaikiLoading}>
              {perbaikiLoading ? "Memproses…" : "Ya"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default function CetakSuratPage() {
  return (
    <Suspense>
      <CetakSuratPageInner />
    </Suspense>
  );
}