"use client";

import { useEffect, useState } from "react";
import useSWR from "swr";
import {
  CheckCircle2,
  Download,
  Eye,
  FileText,
  FileUp,
  FolderOpen,
  Link2,
  Pencil,
  Plus,
  Power,
  Printer,
  Search,
  Trash2,
  Upload,
} from "lucide-react";
import { toast } from "sonner";
import type {
  DokumenPublik,
  KategoriInfoPublik,
  Paginated,
  RingkasanInformasiPublik,
} from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { useSession } from "@/lib/use-session";
import {
  KATEGORI_LABEL,
  KATEGORI_OPTIONS,
  RETENSI_UNITS,
  namaBerkas,
  tanggalInput,
  unduhCsv,
} from "@/lib/sekretariat";
import { PageHeader, StatCard } from "@/components/page-header";
import { Pagination } from "@/components/pagination";
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 { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { formatDate } from "@/lib/utils";

type FormState = {
  nama: string;
  tipe: "FILE" | "URL";
  url: string;
  kategori: KategoriInfoPublik;
  tahun: string;
  keterangan: string;
  status: "true" | "false";
  retensiNumber: string;
  retensiUnit: string;
  publishedAt: string;
  berkasNama: string;
  berkasData: string;
};

function emptyForm(): FormState {
  return {
    nama: "",
    tipe: "FILE",
    url: "",
    kategori: "BERKALA",
    tahun: String(new Date().getFullYear()),
    keterangan: "",
    status: "true",
    retensiNumber: "5",
    retensiUnit: "tahun",
    publishedAt: tanggalInput(new Date().toISOString()),
    berkasNama: "",
    berkasData: "",
  };
}

function retensiLabel(dokumen: DokumenPublik) {
  if (!dokumen.retensiNumber) return "-";
  return `${dokumen.retensiNumber} ${dokumen.retensiUnit}`;
}

const KATEGORI_BADGE: Record<KategoriInfoPublik, "default" | "info" | "warning" | "secondary"> = {
  BERKALA: "default",
  SERTA_MERTA: "warning",
  SETIAP_SAAT: "info",
  DIKECUALIKAN: "secondary",
};

export default function InformasiPublikPage() {
  const { user } = useSession();
  const isAdmin = user?.role === "ADMIN";

  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [q, setQ] = useState("");
  const [kategori, setKategori] = useState("");
  const [status, setStatus] = useState("");

  const filter = new URLSearchParams();
  if (q) filter.set("q", q);
  if (kategori) filter.set("kategori", kategori);
  if (status) filter.set("status", status);

  const query = new URLSearchParams(filter);
  query.set("page", String(page));
  query.set("limit", "10");

  const { data, isLoading, mutate } = useSWR<Paginated<DokumenPublik>>(
    `/sekretariat/informasi-publik?${query.toString()}`,
    fetcher,
  );
  const { data: ringkasan, mutate: mutateRingkasan } = useSWR<RingkasanInformasiPublik>(
    "/sekretariat/informasi-publik/ringkasan",
    fetcher,
  );
  const { data: semua } = useSWR<Paginated<DokumenPublik>>(
    `/sekretariat/informasi-publik?limit=200&${filter.toString()}`,
    fetcher,
  );

  const daftar = data?.data ?? [];
  const [selected, setSelected] = useState<number[]>([]);

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<DokumenPublik | null>(null);
  const [readOnly, setReadOnly] = useState(false);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [saving, setSaving] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<DokumenPublik | null>(null);
  const [bulkOpen, setBulkOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    setPage(1);
  }, [q, kategori, status]);

  useEffect(() => {
    setSelected([]);
  }, [page, q, kategori, status]);

  function openCreate() {
    setEditing(null);
    setReadOnly(false);
    setForm(emptyForm());
    setFormOpen(true);
  }

  function openDetail(item: DokumenPublik, view: boolean) {
    setEditing(item);
    setReadOnly(view || !isAdmin);
    setForm({
      nama: item.nama,
      tipe: item.tipe,
      url: item.url ?? "",
      kategori: item.kategori,
      tahun: item.tahun ? String(item.tahun) : "",
      keterangan: item.keterangan ?? "",
      status: item.status ? "true" : "false",
      retensiNumber: String(item.retensiNumber),
      retensiUnit: item.retensiUnit,
      publishedAt: tanggalInput(item.publishedAt),
      berkasNama: "",
      berkasData: "",
    });
    setFormOpen(true);
  }

  async function pilihBerkas(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    if (file.size > 8 * 1024 * 1024) {
      toast.error("Ukuran berkas maksimal 8 MB");
      event.target.value = "";
      return;
    }
    if (!/\.(pdf|jpe?g|png)$/i.test(file.name)) {
      toast.error("Berkas harus berupa PDF, JPG, atau PNG");
      event.target.value = "";
      return;
    }
    const dataUrl = await new Promise<string>((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(String(reader.result));
      reader.onerror = () => reject(new Error("Gagal membaca berkas"));
      reader.readAsDataURL(file);
    });
    setForm((current) => ({ ...current, berkasNama: file.name, berkasData: dataUrl }));
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!form.nama.trim()) {
      toast.error("Judul dokumen wajib diisi");
      return;
    }
    if (form.tipe === "URL" && !form.url.trim()) {
      toast.error("Tautan dokumen wajib diisi");
      return;
    }
    if (form.tipe === "FILE" && !editing && !form.berkasData) {
      toast.error("Unggah berkas dokumen terlebih dahulu");
      return;
    }
    if ((!editing || !editing.satuan) && form.tipe === "FILE" && !form.berkasData) {
      toast.error("Unggah berkas dokumen terlebih dahulu");
      return;
    }

    setSaving(true);
    try {
      const payload = {
        nama: form.nama.trim(),
        tipe: form.tipe,
        kategori: form.kategori,
        status: form.status === "true",
        retensiNumber: Number(form.retensiNumber) || 0,
        retensiUnit: form.retensiUnit,
        publishedAt: new Date(`${form.publishedAt}T00:00:00`).toISOString(),
        ...(form.tahun ? { tahun: Number(form.tahun) } : {}),
        ...(form.keterangan ? { keterangan: form.keterangan } : {}),
        ...(form.tipe === "URL" ? { url: form.url.trim() } : {}),
        ...(form.berkasData ? { berkasNama: form.berkasNama, berkasData: form.berkasData } : {}),
      };
      if (editing) {
        await apiSend(`/sekretariat/informasi-publik/${editing.id}`, "PATCH", payload);
        toast.success("Dokumen informasi publik diperbarui");
      } else {
        await apiSend("/sekretariat/informasi-publik", "POST", payload);
        toast.success("Dokumen informasi publik ditambahkan");
      }
      setFormOpen(false);
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan dokumen");
    } finally {
      setSaving(false);
    }
  }

  async function toggle(item: DokumenPublik) {
    try {
      await apiSend(`/sekretariat/informasi-publik/${item.id}/toggle`, "PATCH");
      toast.success(item.enabled ? "Dokumen dinonaktifkan" : "Dokumen diaktifkan");
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengubah status");
    }
  }

  async function remove() {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await apiSend(`/sekretariat/informasi-publik/${deleteTarget.id}`, "DELETE");
      toast.success("Dokumen dihapus");
      setDeleteTarget(null);
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus dokumen");
    } finally {
      setDeleting(false);
    }
  }

  async function removeSelected() {
    setDeleting(true);
    try {
      await apiSend("/sekretariat/informasi-publik/bulk-delete", "POST", { ids: selected });
      toast.success(`${selected.length} dokumen dihapus`);
      setBulkOpen(false);
      setSelected([]);
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus dokumen");
    } finally {
      setDeleting(false);
    }
  }

  async function bukaBerkas(item: DokumenPublik) {
    if (item.tipe === "URL") {
      if (item.url) window.open(item.url, "_blank", "noopener,noreferrer");
      return;
    }
    try {
      const res = await fetch(`/api/backend/sekretariat/informasi-publik/${item.id}/berkas`, {
        credentials: "include",
      });
      if (!res.ok) {
        const body = await res.json().catch(() => null);
        toast.error(body?.message ?? "Berkas tidak tersedia");
        return;
      }
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      window.open(url, "_blank", "noopener,noreferrer");
      setTimeout(() => URL.revokeObjectURL(url), 60_000);
    } catch {
      toast.error("Gagal membuka berkas");
    }
  }

  function ekspor() {
    const rows = (semua?.data ?? []).map((item) => [
      item.nama,
      KATEGORI_LABEL[item.kategori],
      item.tahun ?? "",
      item.enabled ? "Aktif" : "Tidak Aktif",
      formatDate(item.publishedAt),
      item.keterangan ?? "",
      item.status ? "Terbit" : "Tidak Terbit",
      retensiLabel(item),
      item.tipe === "URL" ? item.url ?? "" : namaBerkas(item.satuan),
    ]);
    unduhCsv(
      `informasi-publik-${new Date().toISOString().slice(0, 10)}.csv`,
      ["Judul", "Kategori", "Tahun", "Aktif", "Dimuat", "Keterangan", "Status", "Retensi", "Berkas"],
      rows,
    );
    toast.success("Data informasi publik diekspor");
  }

  const barisCetak = semua?.data ?? daftar;
  const semuaTerpilih = daftar.length > 0 && selected.length === daftar.length;

  return (
    <div className="animate-fade-in space-y-6">
      <div className="space-y-6 print:hidden">
        <PageHeader
          title="Informasi Publik"
          description="Dokumen informasi publik Desa Mulyadadi sesuai keterbukaan informasi."
          action={
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Cetak
              </Button>
              <Button variant="outline" onClick={ekspor}>
                <Download className="h-4 w-4" />
                Ekspor
              </Button>
              {isAdmin && (
                <Button onClick={openCreate}>
                  <Plus className="h-4 w-4" />
                  Tambah Dokumen
                </Button>
              )}
            </div>
          }
        />

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard
            title="Total dokumen"
            value={ringkasan?.total ?? 0}
            hint="Seluruh informasi publik"
            icon={FileText}
          />
          <StatCard
            title="Aktif"
            value={ringkasan?.aktif ?? 0}
            hint="Tampil untuk masyarakat"
            icon={CheckCircle2}
            tone="sky"
          />
          <StatCard
            title="Informasi berkala"
            value={ringkasan?.berkala ?? 0}
            hint="Diterbitkan secara rutin"
            icon={FolderOpen}
            tone="amber"
          />
          <StatCard
            title="Setiap saat"
            value={ringkasan?.setiapSaat ?? 0}
            hint="Dapat diakses kapan saja"
            icon={Link2}
            tone="violet"
          />
        </div>

        <Card>
          <CardContent className="p-0">
            <div className="flex flex-col gap-3 border-b p-4 xl:flex-row xl:items-center xl:justify-between">
              <form
                onSubmit={(event) => {
                  event.preventDefault();
                  setQ(search.trim());
                }}
                className="relative w-full xl: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 judul, keterangan, atau berkas…"
                  className="pl-9"
                />
              </form>
              <div className="flex flex-wrap items-end gap-2">
                <div className="space-y-1">
                  <Label className="text-xs text-muted-foreground">Kategori</Label>
                  <Select
                    value={kategori}
                    onChange={(event) => setKategori(event.target.value)}
                    className="w-full sm:w-48"
                  >
                    <option value="">Semua kategori</option>
                    {KATEGORI_OPTIONS.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </Select>
                </div>
                <div className="space-y-1">
                  <Label className="text-xs text-muted-foreground">Status</Label>
                  <Select
                    value={status}
                    onChange={(event) => setStatus(event.target.value)}
                    className="w-full sm:w-40"
                  >
                    <option value="">Semua status</option>
                    <option value="true">Aktif</option>
                    <option value="false">Tidak Aktif</option>
                  </Select>
                </div>
                {(q || kategori || status) && (
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={() => {
                      setSearch("");
                      setQ("");
                      setKategori("");
                      setStatus("");
                    }}
                  >
                    Reset
                  </Button>
                )}
                {isAdmin && selected.length > 0 && (
                  <Button type="button" variant="destructive" onClick={() => setBulkOpen(true)}>
                    <Trash2 className="h-4 w-4" />
                    Hapus ({selected.length})
                  </Button>
                )}
              </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>
                      {isAdmin && (
                        <TableHead className="w-10">
                          <input
                            type="checkbox"
                            checked={semuaTerpilih}
                            onChange={(event) =>
                              setSelected(event.target.checked ? daftar.map((item) => item.id) : [])
                            }
                            aria-label="Pilih semua dokumen"
                          />
                        </TableHead>
                      )}
                      <TableHead className="w-12">No</TableHead>
                      <TableHead className="w-36">Aksi</TableHead>
                      <TableHead>Judul</TableHead>
                      <TableHead>Kategori</TableHead>
                      <TableHead>Tahun</TableHead>
                      <TableHead>Aktif</TableHead>
                      <TableHead>Dimuat</TableHead>
                      <TableHead>Keterangan</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Retensi</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {daftar.map((item, index) => (
                      <TableRow key={item.id}>
                        {isAdmin && (
                          <TableCell>
                            <input
                              type="checkbox"
                              checked={selected.includes(item.id)}
                              onChange={(event) =>
                                setSelected((current) =>
                                  event.target.checked
                                    ? [...current, item.id]
                                    : current.filter((id) => id !== item.id),
                                )
                              }
                              aria-label={`Pilih ${item.nama}`}
                            />
                          </TableCell>
                        )}
                        <TableCell className="text-muted-foreground">
                          {(page - 1) * 10 + index + 1}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              title="Lihat dokumen"
                              onClick={() => openDetail(item, true)}
                            >
                              <Eye className="h-4 w-4" />
                            </Button>
                            {isAdmin && (
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8"
                                title="Ubah dokumen"
                                onClick={() => openDetail(item, false)}
                              >
                                <Pencil className="h-4 w-4" />
                              </Button>
                            )}
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              title="Buka berkas"
                              onClick={() => bukaBerkas(item)}
                            >
                              <Download className="h-4 w-4" />
                            </Button>
                            {isAdmin && (
                              <>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-8 w-8"
                                  title={item.enabled ? "Nonaktifkan" : "Aktifkan"}
                                  onClick={() => toggle(item)}
                                >
                                  <Power
                                    className={`h-4 w-4 ${item.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
                                  />
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-8 w-8 text-destructive"
                                  title="Hapus dokumen"
                                  onClick={() => setDeleteTarget(item)}
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="min-w-[220px] font-medium">{item.nama}</div>
                          <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
                            {item.tipe === "URL" ? (
                              <>
                                <Link2 className="h-3 w-3" /> Tautan
                              </>
                            ) : (
                              <>
                                <FileUp className="h-3 w-3" />
                                {namaBerkas(item.satuan) || "Belum ada berkas"}
                              </>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={KATEGORI_BADGE[item.kategori]}>
                            {KATEGORI_LABEL[item.kategori]}
                          </Badge>
                        </TableCell>
                        <TableCell>{item.tahun ?? "-"}</TableCell>
                        <TableCell>
                          <Badge variant={item.enabled ? "success" : "secondary"}>
                            {item.enabled ? "Ya" : "Tidak"}
                          </Badge>
                        </TableCell>
                        <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
                          {formatDate(item.publishedAt)}
                        </TableCell>
                        <TableCell>
                          <div className="max-w-[220px] text-sm text-muted-foreground">
                            {item.keterangan ?? "-"}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={item.status ? "success" : "danger"}>
                            {item.status ? "Terbit" : "Tidak Terbit"}
                          </Badge>
                        </TableCell>
                        <TableCell className="whitespace-nowrap text-sm text-muted-foreground">
                          {retensiLabel(item)}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            ) : (
              <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
                <FolderOpen className="h-8 w-8 text-muted-foreground" />
                <p className="font-semibold">Belum ada dokumen informasi publik</p>
                <p className="max-w-md text-sm text-muted-foreground">
                  Tambahkan dokumen agar masyarakat dapat mengakses informasi desa secara terbuka.
                </p>
              </div>
            )}

            {data && data.meta.total > 0 && (
              <Pagination
                page={page}
                totalPages={data.meta.totalPages}
                total={data.meta.total}
                onChange={setPage}
              />
            )}
          </CardContent>
        </Card>
      </div>

      <div className="hidden print:block">
        <div className="mb-4 text-center">
          <h1 className="text-lg font-bold uppercase">Informasi Publik Desa Mulyadadi</h1>
          <p className="text-sm">Kecamatan Cipari, Kabupaten Cilacap</p>
          <p className="text-xs text-muted-foreground">
            Dicetak pada {formatDate(new Date())}
            {kategori ? ` · ${KATEGORI_LABEL[kategori as KategoriInfoPublik]}` : ""}
          </p>
        </div>
        <table className="w-full border-collapse text-xs">
          <thead>
            <tr>
              {["No", "Judul", "Kategori", "Tahun", "Dimuat", "Status", "Retensi"].map((judul) => (
                <th key={judul} className="border border-slate-400 px-2 py-1 text-left">
                  {judul}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {barisCetak.map((item, index) => (
              <tr key={item.id}>
                <td className="border border-slate-400 px-2 py-1">{index + 1}</td>
                <td className="border border-slate-400 px-2 py-1">{item.nama}</td>
                <td className="border border-slate-400 px-2 py-1">{KATEGORI_LABEL[item.kategori]}</td>
                <td className="border border-slate-400 px-2 py-1">{item.tahun ?? "-"}</td>
                <td className="border border-slate-400 px-2 py-1">{formatDate(item.publishedAt)}</td>
                <td className="border border-slate-400 px-2 py-1">
                  {item.status ? "Terbit" : "Tidak Terbit"}
                </td>
                <td className="border border-slate-400 px-2 py-1">{retensiLabel(item)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Dialog open={formOpen} onOpenChange={setFormOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>
              {readOnly ? "Detail Dokumen" : editing ? "Ubah Dokumen" : "Tambah Dokumen"}
            </DialogTitle>
            <DialogDescription>
              {readOnly
                ? "Rincian dokumen informasi publik desa."
                : "Lengkapi data dokumen informasi publik sesuai keterbukaan informasi."}
            </DialogDescription>
          </DialogHeader>

          <form onSubmit={save} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="dokumen-nama">Judul Dokumen</Label>
              <Input
                id="dokumen-nama"
                value={form.nama}
                onChange={(event) => setForm((current) => ({ ...current, nama: event.target.value }))}
                maxLength={200}
                disabled={readOnly}
                placeholder="Contoh: APBDes Tahun Anggaran 2026"
              />
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="dokumen-tipe">Tipe Dokumen</Label>
                <Select
                  id="dokumen-tipe"
                  value={form.tipe}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      tipe: event.target.value as "FILE" | "URL",
                    }))
                  }
                  disabled={readOnly}
                >
                  <option value="FILE">File</option>
                  <option value="URL">URL</option>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="dokumen-kategori">Kategori Informasi Publik</Label>
                <Select
                  id="dokumen-kategori"
                  value={form.kategori}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      kategori: event.target.value as KategoriInfoPublik,
                    }))
                  }
                  disabled={readOnly}
                >
                  {KATEGORI_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </Select>
              </div>
            </div>

            {form.tipe === "FILE" ? (
              <div className="space-y-2">
                <Label htmlFor="dokumen-berkas">Unggah Dokumen</Label>
                {editing?.satuan && (
                  <p className="flex items-center gap-1 text-xs text-muted-foreground">
                    <FileText className="h-3 w-3" />
                    Berkas saat ini: {namaBerkas(editing.satuan)}
                  </p>
                )}
                {!readOnly && (
                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                    <Input
                      id="dokumen-berkas"
                      type="file"
                      accept=".pdf,.jpg,.jpeg,.png"
                      onChange={pilihBerkas}
                      className="sm:max-w-md"
                    />
                    {form.berkasNama && (
                      <Badge variant="info">
                        <Upload className="mr-1 h-3 w-3" />
                        {form.berkasNama}
                      </Badge>
                    )}
                  </div>
                )}
                <p className="text-xs text-muted-foreground">
                  Format PDF, JPG, atau PNG. Maksimal 8 MB.
                  {editing ? " Kosongkan jika tidak ingin mengubah berkas." : ""}
                </p>
              </div>
            ) : (
              <div className="space-y-2">
                <Label htmlFor="dokumen-url">Link/URL Dokumen</Label>
                <Input
                  id="dokumen-url"
                  value={form.url}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, url: event.target.value }))
                  }
                  disabled={readOnly}
                  placeholder="https://…"
                />
              </div>
            )}

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="dokumen-tahun">Tahun</Label>
                <Input
                  id="dokumen-tahun"
                  type="number"
                  value={form.tahun}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, tahun: event.target.value }))
                  }
                  disabled={readOnly}
                  placeholder="2026"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="dokumen-terbit">Tanggal Terbit</Label>
                <Input
                  id="dokumen-terbit"
                  type="date"
                  value={form.publishedAt}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, publishedAt: event.target.value }))
                  }
                  disabled={readOnly}
                />
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="dokumen-retensi">Retensi Dokumen</Label>
                <div className="flex gap-2">
                  <Input
                    id="dokumen-retensi"
                    type="number"
                    min={0}
                    max={999}
                    value={form.retensiNumber}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, retensiNumber: event.target.value }))
                    }
                    disabled={readOnly}
                  />
                  <Select
                    value={form.retensiUnit}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, retensiUnit: event.target.value }))
                    }
                    disabled={readOnly}
                    className="w-32"
                  >
                    {RETENSI_UNITS.map((unit) => (
                      <option key={unit} value={unit}>
                        {unit}
                      </option>
                    ))}
                  </Select>
                </div>
                <p className="text-xs text-muted-foreground">
                  Isi 0 jika retensi tidak digunakan.
                </p>
              </div>
              <div className="space-y-2">
                <Label htmlFor="dokumen-status">Status Terbit</Label>
                <Select
                  id="dokumen-status"
                  value={form.status}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      status: event.target.value as "true" | "false",
                    }))
                  }
                  disabled={readOnly}
                >
                  <option value="true">Terbit</option>
                  <option value="false">Tidak Terbit</option>
                </Select>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="dokumen-keterangan">Keterangan</Label>
              <Textarea
                id="dokumen-keterangan"
                value={form.keterangan}
                onChange={(event) =>
                  setForm((current) => ({ ...current, keterangan: event.target.value }))
                }
                maxLength={300}
                rows={3}
                disabled={readOnly}
                placeholder="Keterangan singkat dokumen"
              />
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setFormOpen(false)}>
                Tutup
              </Button>
              {!readOnly && (
                <Button type="submit" disabled={saving}>
                  {saving ? "Menyimpan…" : "Simpan"}
                </Button>
              )}
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(deleteTarget)} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus dokumen?</DialogTitle>
            <DialogDescription>
              Dokumen “{deleteTarget?.nama}” beserta berkasnya akan dihapus permanen.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={remove} disabled={deleting}>
              {deleting ? "Menghapus…" : "Hapus"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={bulkOpen} onOpenChange={setBulkOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus {selected.length} dokumen?</DialogTitle>
            <DialogDescription>
              Seluruh dokumen dan berkas yang dipilih akan dihapus permanen.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setBulkOpen(false)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={removeSelected} disabled={deleting}>
              {deleting ? "Menghapus…" : "Hapus Semua"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}