"use client";

import { useState } from "react";
import useSWR from "swr";
import { Copy, Download, ListChecks, Lock, RotateCcw, Star, Unlock, Upload } from "lucide-react";
import { toast } from "sonner";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import {
  BagianFormBuilder,
  type JenisSuratRinci,
} from "@/components/surat/bagian-form-builder";
import {
  SimpleCrud,
  type CrudColumn,
  type CrudField,
  type CrudRow,
} from "@/components/admin/simple-crud";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";
import { KodeIsianAlias } from "@/components/surat/kode-isian-alias";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } 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";

const ENTITY = "/master/jenis-surat-dinas";

const PERSEN = [
  { value: "HARI", label: "Hari" },
  { value: "MINGGU", label: "Minggu" },
  { value: "BULAN", label: "Bulan" },
  { value: "TAHUN", label: "Tahun" },
];

const ORIENTASI = [
  { value: "PORTRAIT", label: "Portrait" },
  { value: "LANDSCAPE", label: "Landscape" },
];

const UKURAN = [
  { value: "A4", label: "A4" },
  { value: "F4", label: "F4 (Folio)" },
  { value: "LEGAL", label: "Legal" },
  { value: "LETTER", label: "Letter" },
];

const TAMPILAN_HEADER = [
  { value: "SEMUA", label: "Semua Halaman" },
  { value: "AWAL", label: "Hanya Halaman Awal" },
  { value: "TIDAK", label: "Tidak" },
];

const YA_TIDAK = [
  { value: "1", label: "Ya" },
  { value: "0", label: "Tidak" },
];

const PILIHAN_FONT = [
  "Andale Mono",
  "Arial",
  "Arial Black",
  "Bookman Old Style",
  "Comic Sans MS",
  "Courier New",
  "Georgia",
  "Helvetica",
  "Impact",
  "Tahoma",
  "Times New Roman",
  "Trebuchet MS",
  "Verdana",
].map((nama) => ({ value: nama, label: nama }));

const PILIHAN_PENOMORAN = [
  {
    value: "1",
    label:
      "Nomor berurutan untuk masing-masing surat masuk dan keluar; dan untuk semua surat layanan",
  },
  {
    value: "2",
    label:
      "Nomor berurutan untuk masing-masing surat masuk dan keluar; dan untuk setiap surat dinas dengan jenis yang sama",
  },
  { value: "3", label: "Nomor berurutan untuk keseluruhan surat layanan, masuk dan keluar" },
  { value: "4", label: "Nomor berurutan untuk masing-masing klasifikasi surat yang sama" },
];

// Acuan: OpenSID lama -> Surat Dinas > Pengaturan Surat > tombol "Pengaturan".
const PENGATURAN_SURAT_DINAS: SettingField[] = [
  {
    kunci: "suratdinas.tinggi_header",
    label: "Tinggi Header Surat",
    type: "number",
    defaultValue: "3.5",
    help: "Tinggi kop surat dalam centimeter.",
  },
  {
    kunci: "suratdinas.header",
    label: "Template Header Surat",
    type: "textarea",
    placeholder: "Contoh: <table style=\"width:100%\">…</table>",
    help: "Kosongkan untuk memakai kop bawaan identitas desa.",
  },
  {
    kunci: "suratdinas.tinggi_footer",
    label: "Tinggi Footer Surat",
    type: "number",
    defaultValue: "2",
    help: "Tinggi kaki surat dalam centimeter.",
  },
  { kunci: "suratdinas.footer", label: "Template Footer Surat", type: "textarea" },
  {
    kunci: "suratdinas.verifikasi_sekdes",
    label: "Verifikasi Sekretaris",
    type: "select",
    options: YA_TIDAK,
    defaultValue: "0",
  },
  {
    kunci: "suratdinas.verifikasi_kades",
    label: "Verifikasi Kepala Desa",
    type: "select",
    options: YA_TIDAK,
    defaultValue: "0",
  },
  {
    kunci: "suratdinas.tte",
    label: "Aktifkan Modul TTE",
    type: "select",
    options: YA_TIDAK,
    defaultValue: "0",
  },
  { kunci: "suratdinas.tte_api", label: "URL API Server TTE", type: "url" },
  { kunci: "suratdinas.tte_username", label: "Username Login TTE" },
  { kunci: "suratdinas.tte_password", label: "Password Login TTE", type: "password" },
  {
    kunci: "suratdinas.visual_tte",
    label: "Visual TTE",
    type: "select",
    options: YA_TIDAK,
    defaultValue: "0",
  },
  {
    kunci: "suratdinas.visual_tte_gambar",
    label: "Gambar Visual",
    type: "image",
    help: "Gambar tampilan tanda tangan elektronik (PNG/JPG/WebP).",
  },
  {
    kunci: "suratdinas.visual_tte_height",
    label: "Tinggi Gambar Visual",
    type: "number",
    defaultValue: "100",
  },
  {
    kunci: "suratdinas.visual_tte_weight",
    label: "Lebar Gambar Visual",
    type: "number",
    defaultValue: "100",
  },
  {
    kunci: "suratdinas.ssl_tte",
    label: "SSL TTE",
    type: "select",
    options: YA_TIDAK,
    defaultValue: "1",
  },
  {
    kunci: "suratdinas.font",
    label: "Jenis Font Bawaan",
    type: "select",
    options: PILIHAN_FONT,
    defaultValue: "Arial",
  },
  {
    kunci: "suratdinas.format_nomor",
    label: "Format Penomoran Surat Dinas",
    defaultValue: "[kode_surat]/[nomor_surat, 3]/[kode_desa]/[bulan_romawi]/[tahun]",
    help: "Token: [kode_surat], [nomor_surat, n], [kode_desa], [bulan_romawi], [tahun].",
  },
  {
    kunci: "suratdinas.penomoran",
    label: "Penomoran Surat Dinas",
    type: "select",
    options: PILIHAN_PENOMORAN,
    defaultValue: "2",
  },
  {
    kunci: "suratdinas.panjang_nomor",
    label: "Panjang Nomor Surat Dinas",
    type: "number",
    defaultValue: "3",
  },
  {
    kunci: "suratdinas.format_tanggal",
    label: "Format Tanggal Surat Dinas",
    defaultValue: "d F Y",
    placeholder: "d F Y",
  },
  {
    kunci: "suratdinas.margin_kiri",
    label: "Margin Kiri",
    type: "number",
    defaultValue: "1.78",
    help: "Centimeter.",
  },
  {
    kunci: "suratdinas.margin_atas",
    label: "Margin Atas",
    type: "number",
    defaultValue: "0.63",
    help: "Centimeter.",
  },
  {
    kunci: "suratdinas.margin_kanan",
    label: "Margin Kanan",
    type: "number",
    defaultValue: "1.78",
    help: "Centimeter.",
  },
  {
    kunci: "suratdinas.margin_bawah",
    label: "Margin Bawah",
    type: "number",
    defaultValue: "1.37",
    help: "Centimeter.",
  },
];

const FORMAT_TANGGAL = [
  ["d", "Tanggal dengan awalan awal 0", "01, 02, 03, …, 31"],
  ["j", "Tanggal tanpa awalan awal 0", "1, 2, 3, …, 31"],
  ["m", "Bulan dengan awalan awal 0", "01, 02, 03, …, 12"],
  ["n", "Bulan tanpa awalan awal 0", "1, 2, 3, …, 12"],
  ["Y", "Tahun dalam format empat digit", "2022, 2023, 2024"],
  ["y", "Tahun dalam format dua digit", "22, 23, 24"],
  ["l", "Hari dalam format teks penuh", "Senin, Selasa, Rabu"],
  ["D", "Hari dalam format teks singkat", "Sen, Sel, Rab"],
  ["F", "Bulan dalam format teks penuh", "Januari, Februari, Maret"],
  ["M", "Bulan dalam format teks singkat", "Jan, Feb, Mar"],
  ["H", "Jam dalam format 24 jam", "00, 01, 02, …, 23"],
  ["h", "Jam dalam format 12 jam", "01, 02, 03, …, 12"],
  ["i", "Menit", "00, 01, 02, …, 59"],
  ["s", "Detik", "00, 01, 02, …, 59"],
  ["A", "AM atau PM", "AM, PM"],
  ["a", "am atau pm", "am, pm"],
];

const FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Layanan", required: true, full: true },
  { name: "kode", label: "Kode / Klasifikasi Surat" },
  { name: "lampiran", label: "Lampiran" },
  {
    name: "masaBerlaku",
    label: "Masa Berlaku Default",
    type: "number",
    help: "Isi 0 jika tidak digunakan dan maksimal 31.",
  },
  {
    name: "satuanMasaBerlaku",
    label: "Satuan Masa Berlaku",
    type: "select",
    options: PERSEN,
    defaultValue: "HARI",
  },
  {
    name: "orientasi",
    label: "Orientasi Kertas",
    type: "select",
    options: ORIENTASI,
    defaultValue: "PORTRAIT",
  },
  {
    name: "ukuran",
    label: "Ukuran Kertas",
    type: "select",
    options: UKURAN,
    defaultValue: "A4",
  },
  {
    name: "marginGlobal",
    label: "Gunakan Margin Kertas Global",
    type: "checkbox",
    defaultValue: true,
  },
  { name: "marginKiri", label: "Margin Kiri (cm)", type: "number" },
  { name: "marginAtas", label: "Margin Atas (cm)", type: "number" },
  { name: "marginKanan", label: "Margin Kanan (cm)", type: "number" },
  { name: "marginBawah", label: "Margin Bawah (cm)", type: "number" },
  {
    name: "formatNomorGlobal",
    label: "Gunakan Penomoran Surat Global",
    type: "checkbox",
    defaultValue: true,
  },
  {
    name: "formatNomor",
    label: "Format Nomor Khusus Jenis Ini",
    full: true,
    help: "Dipakai bila penomoran global dimatikan.",
  },
  { name: "qrCode", label: "Tampilkan QR Code", type: "checkbox", defaultValue: false },
  {
    name: "header",
    label: "Tampilkan Header",
    type: "select",
    options: TAMPILAN_HEADER,
    defaultValue: "SEMUA",
  },
  { name: "footer", label: "Tampilkan Footer", type: "checkbox", defaultValue: false },
  { name: "logoGaruda", label: "Logo Burung Garuda", type: "checkbox", defaultValue: false },
  {
    name: "template",
    label: "Template Isi Surat",
    type: "textarea",
    full: true,
    help: "Teks awal isi surat saat jenis dipilih.",
  },
  { name: "deskripsi", label: "Deskripsi", type: "textarea", full: true },
  { name: "enabled", label: "Status", type: "checkbox", help: "Aktif" },
];

const COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Nama Surat" },
  { name: "kode", label: "Kode / Klasifikasi" },
  { name: "lampiran", label: "Lampiran" },
  { name: "deskripsi", label: "Deskripsi", hideOnMobile: true },
  {
    name: "enabled",
    label: "Status",
    render: (row: CrudRow) => (
      <Badge variant={row.enabled ? "success" : "secondary"}>
        {row.enabled ? "Aktif" : "Tidak Aktif"}
      </Badge>
    ),
  },
];

const CONTOH_CSV = [
  "Nama Surat,Kode / Klasifikasi,Lampiran,Deskripsi",
  "Surat Pernyataan,S1,1 lembar,Surat pernyataan resmi pemerintah desa",
  "Surat Undangan,SD-01,1 lembar,Undangan rapat dan kegiatan resmi pemerintah desa",
].join("\r\n");

const BAWAAN_SISTEM = {
  nama: "Pernyataan",
  kode: "S1",
  lampiran: "1 lembar",
  deskripsi: "Surat pernyataan bawaan sistem OpenSID.",
};

function eksporValues(row: CrudRow) {
  return [
    String(row.nama ?? ""),
    String(row.kode ?? ""),
    String(row.lampiran ?? ""),
    String(row.deskripsi ?? ""),
    row.enabled ? "Aktif" : "Tidak Aktif",
  ];
}

function parseCsv(teks: string): string[][] {
  const baris: string[][] = [];
  let sel: string[] = [];
  let isi = "";
  let kutip = false;
  for (let i = 0; i < teks.length; i += 1) {
    const huruf = teks[i];
    if (kutip) {
      if (huruf === '"') {
        if (teks[i + 1] === '"') {
          isi += '"';
          i += 1;
        } else {
          kutip = false;
        }
      } else {
        isi += huruf;
      }
      continue;
    }
    if (huruf === '"') {
      kutip = true;
    } else if (huruf === ",") {
      sel.push(isi);
      isi = "";
    } else if (huruf === "\n") {
      sel.push(isi);
      baris.push(sel);
      sel = [];
      isi = "";
    } else if (huruf !== "\r") {
      isi += huruf;
    }
  }
  if (isi || sel.length) {
    sel.push(isi);
    baris.push(sel);
  }
  return baris.filter((row) => row.some((value) => value.trim()));
}

export default function JenisSuratDinasPage() {
  const [status, setStatus] = useState("");
  const [pilihSurat, setPilihSurat] = useState("");
  const [versi, setVersi] = useState(0);
  const [imporOpen, setImporOpen] = useState(false);
  const [kembalikanOpen, setKembalikanOpen] = useState(false);
  const [bagianTarget, setBagianTarget] = useState<JenisSuratRinci | null>(null);
  const [berkas, setBerkas] = useState("");
  const [baris, setBaris] = useState<string[][]>([]);
  const [imporProses, setImporProses] = useState(false);
  const { data, mutate } = useSWR<CrudRow[]>(ENTITY, fetcher);

  async function salin(row: CrudRow, refresh: () => void) {
    try {
      await apiSend(ENTITY, "POST", {
        ...row,
        nama: `${String(row.nama ?? "")} (Salinan)`,
        favorit: false,
      });
      toast.success("Jenis surat disalin");
      refresh();
      void mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyalin jenis surat");
    }
  }

  async function ubahStatus(row: CrudRow, refresh: () => void) {
    try {
      await apiSend(`${ENTITY}/${row.id}`, "PATCH", { enabled: !row.enabled });
      toast.success(row.enabled ? "Surat dinonaktifkan" : "Surat diaktifkan");
      refresh();
      void mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengubah status surat");
    }
  }

  async function ubahFavorit(row: CrudRow, refresh: () => void) {
    try {
      await apiSend(`${ENTITY}/${row.id}`, "PATCH", { favorit: !row.favorit });
      toast.success(row.favorit ? "Dihapus dari favorit" : "Ditambahkan ke favorit");
      refresh();
      void mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengubah favorit");
    }
  }

  function unduhContoh() {
    const blob = new Blob([`\uFEFF${CONTOH_CSV}`], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const tautan = document.createElement("a");
    tautan.href = url;
    tautan.download = "contoh-surat-dinas.csv";
    tautan.click();
    URL.revokeObjectURL(url);
  }

  async function bacaBerkas(file?: File) {
    if (!file) return;
    setBerkas(file.name);
    const teks = await file.text();
    const rows = parseCsv(teks.replace(/^\uFEFF/, ""));
    const mulai =
      rows.length && /nama/i.test(rows[0][0] ?? "") ? rows.slice(1) : rows;
    setBaris(mulai.filter((row) => (row[0] ?? "").trim()));
  }

  async function jalankanImpor() {
    if (!baris.length) {
      toast.error("Belum ada baris yang dapat diimpor");
      return;
    }
    setImporProses(true);
    let berhasil = 0;
    let gagal = 0;
    for (const row of baris) {
      try {
        await apiSend(ENTITY, "POST", {
          nama: (row[0] ?? "").trim(),
          kode: (row[1] ?? "").trim(),
          lampiran: (row[2] ?? "").trim(),
          deskripsi: (row[3] ?? "").trim(),
          enabled: true,
        });
        berhasil += 1;
      } catch {
        gagal += 1;
      }
    }
    setImporProses(false);
    if (berhasil) toast.success(`${berhasil} jenis surat diimpor`);
    if (gagal) toast.error(`${gagal} baris gagal diimpor`);
    setImporOpen(false);
    setBaris([]);
    setBerkas("");
    setVersi((v) => v + 1);
  }

  async function kembalikan() {
    const ada = (data ?? []).some(
      (row) => String(row.kode ?? "").toUpperCase() === "S1" || /^pernyataan$/i.test(String(row.nama ?? "")),
    );
    if (ada) {
      toast.info("Surat bawaan sistem sudah tersedia.");
      return;
    }
    try {
      await apiSend(ENTITY, "POST", { ...BAWAAN_SISTEM, enabled: true });
      toast.success("Surat bawaan sistem dikembalikan");
      setKembalikanOpen(false);
      setVersi((v) => v + 1);
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengembalikan surat");
    }
  }

  return (
    <div className="space-y-5">
      <SimpleCrud
        key={versi}
        title="Jenis Surat Dinas"
        description="Master jenis surat dinas beserta template isi surat."
        entity="jenis-surat-dinas"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari nama atau kode surat dinas…"
        createLabel="Tambah"
        showNo
        selectable
        actionOnLeft
        filter={(row) =>
          (!status || (status === "aktif" ? Boolean(row.enabled) : !row.enabled)) &&
          (!pilihSurat || String(row.nama ?? "") === pilihSurat)
        }
        rowActions={(row, helpers) => (
          <>
            <button
              type="button"
              onClick={() => setBagianTarget(row as unknown as JenisSuratRinci)}
              className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
              title="Kode Isian"
            >
              <ListChecks className="h-4 w-4" />
            </button>
            <button
              type="button"
              onClick={() => salin(row, helpers.refresh)}
              className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
              title="Salin"
            >
              <Copy className="h-4 w-4" />
            </button>
            <button
              type="button"
              onClick={() => ubahStatus(row, helpers.refresh)}
              className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
              title={row.enabled ? "Nonaktifkan Surat" : "Aktifkan Surat"}
            >
              {row.enabled ? <Lock className="h-4 w-4" /> : <Unlock className="h-4 w-4" />}
            </button>
            <button
              type="button"
              onClick={() => ubahFavorit(row, helpers.refresh)}
              className="rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
              title="Tambahkan ke Daftar Favorit"
            >
              <Star
                className={`h-4 w-4 ${row.favorit ? "fill-amber-400 text-amber-500" : ""}`}
              />
            </button>
          </>
        )}
        toolbar={
          <>
            <Select
              value={status}
              onChange={(event) => setStatus(event.target.value)}
              aria-label="Pilih Status"
              className="w-40"
            >
              <option value="">Pilih Status</option>
              <option value="aktif">Aktif</option>
              <option value="nonaktif">Tidak Aktif</option>
            </Select>
            <Select
              value={pilihSurat}
              onChange={(event) => setPilihSurat(event.target.value)}
              aria-label="Pilih Surat"
              className="w-48"
            >
              <option value="">Pilih Surat</option>
              {(data ?? []).map((row) => (
                <option key={String(row.id)} value={String(row.nama ?? "")}>
                  {String(row.nama ?? "")}
                </option>
              ))}
            </Select>
            <Button variant="outline" size="sm" onClick={() => setImporOpen(true)}>
              <Upload className="h-4 w-4" /> Impor Surat
            </Button>
            <Button variant="outline" size="sm" onClick={() => setKembalikanOpen(true)}>
              <RotateCcw className="h-4 w-4" /> Kembalikan
            </Button>
          </>
        }
        headerExtra={
          <Button variant="outline" size="sm" onClick={unduhContoh}>
            <Download className="h-4 w-4" /> Contoh Surat Dinas Sistem
          </Button>
        }
        ekspor={{
          fileName: "daftar-jenis-surat-dinas",
          header: ["Nama Surat", "Kode / Klasifikasi", "Lampiran", "Deskripsi", "Status"],
          values: eksporValues,
        }}
      />

      <SettingsForm
        grup="surat-dinas"
        title="Pengaturan Surat Dinas"
        hideHeader
        cardTitle="Pengaturan Surat Dinas Global"
        submitLabel="Simpan Pengaturan Surat Dinas"
        showReset
        fields={PENGATURAN_SURAT_DINAS}
      />

      <KodeIsianAlias />

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Format Tanggal Surat Dinas</CardTitle>
          <CardDescription>
            Token format tanggal yang dapat dipakai pada format penomoran dan tanggal surat.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-24">Format</TableHead>
                  <TableHead>Deskripsi</TableHead>
                  <TableHead>Contoh</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {FORMAT_TANGGAL.map(([format, deskripsi, contoh]) => (
                  <TableRow key={format}>
                    <TableCell className="font-mono text-xs">{format}</TableCell>
                    <TableCell>{deskripsi}</TableCell>
                    <TableCell className="text-muted-foreground">{contoh}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      <Dialog open={imporOpen} onOpenChange={(open) => !open && setImporOpen(false)}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>Impor Surat</DialogTitle>
            <DialogDescription>
              Unggah berkas CSV dengan urutan kolom: Nama Surat, Kode / Klasifikasi,
              Lampiran, Deskripsi.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div className="flex flex-wrap items-center gap-2">
              <Input
                type="file"
                accept=".csv,text/csv"
                className="max-w-xs"
                onChange={(event) => {
                  const file = event.target.files?.[0];
                  event.target.value = "";
                  void bacaBerkas(file);
                }}
              />
              <Button type="button" variant="outline" size="sm" onClick={unduhContoh}>
                <Download className="h-4 w-4" /> Unduh Contoh
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              {berkas
                ? `${berkas} — ${baris.length} baris siap diimpor`
                : "Belum ada berkas dipilih."}
            </p>
            {baris.length > 0 && (
              <div className="max-h-48 overflow-auto rounded-lg border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Nama Surat</TableHead>
                      <TableHead>Kode</TableHead>
                      <TableHead>Lampiran</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {baris.slice(0, 10).map((row, index) => (
                      <TableRow key={index}>
                        <TableCell>{row[0]}</TableCell>
                        <TableCell>{row[1]}</TableCell>
                        <TableCell>{row[2]}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setImporOpen(false)}>
              Batal
            </Button>
            <Button onClick={jalankanImpor} disabled={imporProses || !baris.length}>
              <Upload className="h-4 w-4" /> {imporProses ? "Mengimpor…" : "Impor"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <BagianFormBuilder
        target={bagianTarget}
        onClose={() => setBagianTarget(null)}
        onSaved={() => void mutate()}
      />

      <Dialog open={kembalikanOpen} onOpenChange={(open) => !open && setKembalikanOpen(false)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Kembalikan Surat Bawaan Sistem</DialogTitle>
            <DialogDescription>
              Apakah Anda yakin ingin mengembalikan surat bawaan/sistem (Pernyataan, kode S1)?
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setKembalikanOpen(false)}>
              Tutup
            </Button>
            <Button onClick={kembalikan}>
              <RotateCcw className="h-4 w-4" /> Kembalikan
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}