"use client";

import { useEffect, useState } from "react";
import useSWR from "swr";
import {
  Boxes,
  ClipboardList,
  Coins,
  Eye,
  History,
  LayoutList,
  Pencil,
  Plus,
  Printer,
  Search,
  Tag,
  Trash2,
  TrendingUp,
} from "lucide-react";
import { toast } from "sonner";
import type {
  InventarisAset,
  InventarisMutasi,
  JenisInventaris,
  Paginated,
  RingkasanInventaris,
} from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { useSession } from "@/lib/use-session";
import {
  JENIS_INVENTARIS_LABEL,
  JENIS_INVENTARIS_OPTIONS,
  JENIS_MUTASI_GROUPS,
  KONDISI_OPTIONS,
  STATUS_MUTASI_OPTIONS,
  tanggalInput,
} 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 { formatRupiah } from "@/lib/utils";

type View = "aset" | "mutasi" | "laporan";

type FormState = {
  jenis: JenisInventaris;
  namaBarang: string;
  kodeBarang: string;
  register: string;
  tahunPengadaan: string;
  harga: string;
  penggunaan: string;
  asal: string;
  kondisi: string;
  letak: string;
  luas: string;
  jumlah: string;
  merk: string;
  ukuran: string;
  bahan: string;
  noSertifikat: string;
  tanggalSertifikat: string;
  keterangan: string;
};

function emptyForm(register: string): FormState {
  return {
    jenis: "TANAH",
    namaBarang: "",
    kodeBarang: "",
    register,
    tahunPengadaan: String(new Date().getFullYear()),
    harga: "",
    penggunaan: "",
    asal: "Pembelian",
    kondisi: "Baik",
    letak: "",
    luas: "",
    jumlah: "",
    merk: "",
    ukuran: "",
    bahan: "",
    noSertifikat: "",
    tanggalSertifikat: "",
    keterangan: "",
  };
}

type MutasiForm = {
  statusMutasi: string;
  jenisMutasi: string;
  tanggalMutasi: string;
  tujuan: string;
  hargaJual: string;
  keterangan: string;
};

function emptyMutasi(): MutasiForm {
  return {
    statusMutasi: "Baik",
    jenisMutasi: "Status Baik",
    tanggalMutasi: tanggalInput(new Date().toISOString()),
    tujuan: "",
    hargaJual: "",
    keterangan: "",
  };
}

const KONDISI_BADGE: Record<string, "success" | "warning" | "danger" | "secondary"> = {
  Baik: "success",
  "Rusak Ringan": "warning",
  "Rusak Berat": "danger",
  "Dalam Pengerjaan": "secondary",
};

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

  const [view, setView] = useState<View>("aset");
  const [jenis, setJenis] = useState("");
  const [kondisi, setKondisi] = useState("");
  const [search, setSearch] = useState("");
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [mutasiPage, setMutasiPage] = useState(1);

  const filter = new URLSearchParams();
  if (jenis) filter.set("jenis", jenis);
  if (kondisi) filter.set("kondisi", kondisi);
  if (q) filter.set("q", q);

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

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

  const mutasiFilter = new URLSearchParams();
  if (jenis) mutasiFilter.set("jenis", jenis);
  if (q) mutasiFilter.set("q", q);
  mutasiFilter.set("page", String(mutasiPage));
  mutasiFilter.set("limit", "10");
  const { data: mutasiData, isLoading: mutasiLoading, mutate: mutateMutasi } = useSWR<
    Paginated<InventarisMutasi>
  >(view === "mutasi" ? `/sekretariat/inventaris/mutasi?${mutasiFilter.toString()}` : null, fetcher);

  const laporanKey = view === "laporan"
    ? `/sekretariat/inventaris/laporan${jenis ? `?jenis=${jenis}` : ""}`
    : null;
  const { data: laporan, isLoading: laporanLoading } = useSWR<{
    data: InventarisAset[];
    total: number;
    nilai: string | number;
  }>(laporanKey, fetcher);

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

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

  const [mutasiTarget, setMutasiTarget] = useState<InventarisAset | null>(null);
  const [mutasiForm, setMutasiForm] = useState<MutasiForm>(emptyMutasi);
  const [mutasiSaving, setMutasiSaving] = useState(false);

  const [historyTarget, setHistoryTarget] = useState<InventarisAset | null>(null);
  const { data: history, mutate: mutateHistory } = useSWR<InventarisMutasi[]>(
    historyTarget ? `/sekretariat/inventaris/${historyTarget.id}/mutasi` : null,
    fetcher,
  );

  const [deleteMutasiTarget, setDeleteMutasiTarget] = useState<InventarisMutasi | null>(null);

  useEffect(() => {
    setPage(1);
    setMutasiPage(1);
  }, [q, jenis, kondisi]);

  useEffect(() => {
    setSelected([]);
  }, [page, q, jenis, kondisi]);

  function nextRegister() {
    const rows = semua?.data ?? [];
    const nomor = rows.reduce((max, item) => Math.max(max, Number(item.register) || 0), 0);
    return String(nomor + 1 || rows.length + 1).padStart(6, "0");
  }

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

  function openForm(item: InventarisAset, viewMode: boolean) {
    setEditing(item);
    setReadOnly(viewMode || !isAdmin);
    setForm({
      jenis: item.jenis,
      namaBarang: item.namaBarang,
      kodeBarang: item.kodeBarang,
      register: item.register,
      tahunPengadaan: item.tahunPengadaan ? String(item.tahunPengadaan) : "",
      harga: String(item.harga ?? ""),
      penggunaan: item.penggunaan ?? "",
      asal: item.asal ?? "",
      kondisi: item.kondisi ?? "",
      letak: item.letak ?? "",
      luas: item.luas ? String(item.luas) : "",
      jumlah: item.jumlah ? String(item.jumlah) : "",
      merk: item.merk ?? "",
      ukuran: item.ukuran ?? "",
      bahan: item.bahan ?? "",
      noSertifikat: item.noSertifikat ?? "",
      tanggalSertifikat: tanggalInput(item.tanggalSertifikat),
      keterangan: item.keterangan ?? "",
    });
    setFormOpen(true);
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!form.namaBarang.trim() || !form.kodeBarang.trim() || !form.register.trim()) {
      toast.error("Nama barang, kode barang, dan nomor register wajib diisi");
      return;
    }
    setSaving(true);
    try {
      const payload = {
        jenis: form.jenis,
        namaBarang: form.namaBarang.trim(),
        kodeBarang: form.kodeBarang.trim(),
        register: form.register.trim(),
        harga: Number(form.harga) || 0,
        ...(form.tahunPengadaan ? { tahunPengadaan: Number(form.tahunPengadaan) } : {}),
        ...(form.penggunaan ? { penggunaan: form.penggunaan } : {}),
        ...(form.asal ? { asal: form.asal } : {}),
        ...(form.kondisi ? { kondisi: form.kondisi } : {}),
        ...(form.letak ? { letak: form.letak } : {}),
        ...(form.luas ? { luas: Number(form.luas) } : {}),
        ...(form.jumlah ? { jumlah: Number(form.jumlah) } : {}),
        ...(form.merk ? { merk: form.merk } : {}),
        ...(form.ukuran ? { ukuran: form.ukuran } : {}),
        ...(form.bahan ? { bahan: form.bahan } : {}),
        ...(form.noSertifikat ? { noSertifikat: form.noSertifikat } : {}),
        ...(form.tanggalSertifikat ? { tanggalSertifikat: form.tanggalSertifikat } : {}),
        ...(form.keterangan ? { keterangan: form.keterangan } : {}),
      };
      if (editing) {
        await apiSend(`/sekretariat/inventaris/${editing.id}`, "PATCH", payload);
        toast.success("Data inventaris diperbarui");
      } else {
        await apiSend("/sekretariat/inventaris", "POST", payload);
        toast.success("Aset inventaris ditambahkan");
      }
      setFormOpen(false);
      await mutate();
      await mutateRingkasan();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan aset");
    } finally {
      setSaving(false);
    }
  }

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

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

  function openMutasi(item: InventarisAset) {
    setMutasiTarget(item);
    setMutasiForm(emptyMutasi());
  }

  async function simpanMutasi(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!mutasiTarget) return;
    setMutasiSaving(true);
    try {
      const payload = {
        statusMutasi: mutasiForm.statusMutasi,
        jenisMutasi: mutasiForm.jenisMutasi,
        tanggalMutasi: mutasiForm.tanggalMutasi,
        ...(mutasiForm.tujuan ? { tujuan: mutasiForm.tujuan } : {}),
        ...(mutasiForm.hargaJual ? { hargaJual: Number(mutasiForm.hargaJual) } : {}),
        ...(mutasiForm.keterangan ? { keterangan: mutasiForm.keterangan } : {}),
      };
      await apiSend(`/sekretariat/inventaris/${mutasiTarget.id}/mutasi`, "POST", payload);
      toast.success("Mutasi aset dicatat");
      setMutasiTarget(null);
      await mutate();
      await mutateRingkasan();
      await mutateMutasi();
      await mutateHistory();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan mutasi");
    } finally {
      setMutasiSaving(false);
    }
  }

  async function hapusMutasi() {
    if (!deleteMutasiTarget) return;
    setDeleting(true);
    try {
      await apiSend(`/sekretariat/inventaris/mutasi/${deleteMutasiTarget.id}`, "DELETE");
      toast.success("Mutasi dihapus");
      setDeleteMutasiTarget(null);
      await mutate();
      await mutateRingkasan();
      await mutateMutasi();
      await mutateHistory();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus mutasi");
    } finally {
      setDeleting(false);
    }
  }

  const jenisTabs = [
    { value: "", label: "Semua", jumlah: ringkasan?.total ?? 0 },
    ...JENIS_INVENTARIS_OPTIONS.map((option) => ({
      ...option,
      jumlah:
        ringkasan?.perJenis.find((row) => row.jenis === option.value)?.jumlah ?? 0,
    })),
  ];

  const barisCetak = semua?.data ?? daftar;
  const semuaTerpilih = daftar.length > 0 && selected.length === daftar.length;
  const mutasiRows = mutasiData?.data ?? [];
  const laporanRows = laporan?.data ?? [];
  const laporanKelompok = JENIS_INVENTARIS_OPTIONS.map((option) => ({
    ...option,
    rows: laporanRows.filter((row) => row.jenis === option.value),
  })).filter((group) => group.rows.length);

  return (
    <div className="animate-fade-in space-y-6">
      <div className="space-y-6 print:hidden">
        <PageHeader
          title="Inventaris"
          description="Daftar inventaris dan kekayaan Desa Mulyadadi beserta mutasi dan laporannya."
          action={
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Cetak
              </Button>
              {isAdmin && (
                <Button onClick={openCreate}>
                  <Plus className="h-4 w-4" />
                  Tambah Aset
                </Button>
              )}
            </div>
          }
        />

        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard
            title="Total aset"
            value={ringkasan?.total ?? 0}
            hint="Seluruh kategori inventaris"
            icon={Boxes}
          />
          <StatCard
            title="Nilai aset"
            value={formatRupiah(ringkasan?.nilai ?? 0)}
            hint="Akumulasi harga perolehan"
            icon={Coins}
            tone="sky"
          />
          <StatCard
            title="Mutasi tercatat"
            value={ringkasan?.mutasi ?? 0}
            hint="Perubahan status aset"
            icon={TrendingUp}
            tone="amber"
          />
          <StatCard
            title="Kategori"
            value={ringkasan?.perJenis.length ?? 0}
            hint="Jenis inventaris desa"
            icon={Tag}
            tone="violet"
          />
        </div>

        <Card>
          <CardContent className="p-0">
            <div className="flex flex-wrap gap-2 border-b p-4">
              {jenisTabs.map((tab) => (
                <Button
                  key={tab.value || "SEMUA"}
                  type="button"
                  size="sm"
                  variant={jenis === tab.value ? "default" : "outline"}
                  onClick={() => setJenis(tab.value)}
                >
                  {tab.label}
                  <span
                    className={`ml-1 rounded-full px-1.5 text-[10px] ${
                      jenis === tab.value ? "bg-white/20" : "bg-muted"
                    }`}
                  >
                    {tab.jumlah}
                  </span>
                </Button>
              ))}
            </div>

            <div className="flex flex-col gap-3 border-b p-4 xl:flex-row xl:items-center xl:justify-between">
              <div className="flex flex-wrap gap-1 rounded-lg bg-muted p-1">
                {[
                  { value: "aset" as View, label: "Daftar Aset", icon: LayoutList },
                  { value: "mutasi" as View, label: "Daftar Mutasi", icon: History },
                  { value: "laporan" as View, label: "Laporan", icon: ClipboardList },
                ].map((item) => (
                  <Button
                    key={item.value}
                    type="button"
                    size="sm"
                    variant={view === item.value ? "default" : "ghost"}
                    onClick={() => setView(item.value)}
                  >
                    <item.icon className="h-4 w-4" />
                    {item.label}
                  </Button>
                ))}
              </div>

              {view !== "laporan" && (
                <div className="flex flex-1 flex-wrap items-end gap-2 xl:justify-end">
                  <form
                    onSubmit={(event) => {
                      event.preventDefault();
                      setQ(search.trim());
                    }}
                    className="relative w-full sm:max-w-xs"
                  >
                    <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 nama, kode, register, lokasi…"
                      className="pl-9"
                    />
                  </form>
                  {view === "aset" && (
                    <Select
                      value={kondisi}
                      onChange={(event) => setKondisi(event.target.value)}
                      className="w-full sm:w-40"
                    >
                      <option value="">Semua kondisi</option>
                      {KONDISI_OPTIONS.map((item) => (
                        <option key={item} value={item}>
                          {item}
                        </option>
                      ))}
                    </Select>
                  )}
                  {(q || kondisi) && (
                    <Button
                      type="button"
                      variant="ghost"
                      onClick={() => {
                        setSearch("");
                        setQ("");
                        setKondisi("");
                      }}
                    >
                      Reset
                    </Button>
                  )}
                  {isAdmin && view === "aset" && selected.length > 0 && (
                    <Button type="button" variant="destructive" onClick={() => setBulkOpen(true)}>
                      <Trash2 className="h-4 w-4" />
                      Hapus ({selected.length})
                    </Button>
                  )}
                </div>
              )}
            </div>

            {view === "aset" &&
              (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 aset"
                            />
                          </TableHead>
                        )}
                        <TableHead className="w-12">No</TableHead>
                        <TableHead className="w-40">Aksi</TableHead>
                        <TableHead>Kode Barang / Nomor Registrasi</TableHead>
                        <TableHead>Nama Barang</TableHead>
                        <TableHead>Luas (M2)</TableHead>
                        <TableHead>Tahun Pengadaan</TableHead>
                        <TableHead>Letak / Alamat</TableHead>
                        <TableHead>Nomor Sertifikat</TableHead>
                        <TableHead>Asal Usul</TableHead>
                        <TableHead>Harga (Rp)</TableHead>
                        <TableHead>Kategori</TableHead>
                        <TableHead>Kondisi</TableHead>
                        <TableHead>Mutasi</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.namaBarang}`}
                              />
                            </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 aset"
                                onClick={() => openForm(item, true)}
                              >
                                <Eye className="h-4 w-4" />
                              </Button>
                              {isAdmin && (
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-8 w-8"
                                  title="Ubah aset"
                                  onClick={() => openForm(item, false)}
                                >
                                  <Pencil className="h-4 w-4" />
                                </Button>
                              )}
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8"
                                title="Riwayat mutasi"
                                onClick={() => setHistoryTarget(item)}
                              >
                                <History className="h-4 w-4" />
                              </Button>
                              {isAdmin && (
                                <>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    className="h-8 w-8 text-sky-700"
                                    title="Catat mutasi"
                                    onClick={() => openMutasi(item)}
                                  >
                                    <TrendingUp className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    className="h-8 w-8 text-destructive"
                                    title="Hapus aset"
                                    onClick={() => setDeleteTarget(item)}
                                  >
                                    <Trash2 className="h-4 w-4" />
                                  </Button>
                                </>
                              )}
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="font-mono text-xs">{item.kodeBarang}</div>
                            <div className="font-mono text-xs text-muted-foreground">
                              {item.register}
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="min-w-[180px] font-medium">{item.namaBarang}</div>
                            {(item.merk || item.ukuran) && (
                              <div className="text-xs text-muted-foreground">
                                {[item.merk, item.ukuran].filter(Boolean).join(" · ")}
                              </div>
                            )}
                          </TableCell>
                          <TableCell className="whitespace-nowrap">
                            {item.luas ? `${item.luas} m²` : "-"}
                          </TableCell>
                          <TableCell>{item.tahunPengadaan ?? "-"}</TableCell>
                          <TableCell>
                            <div className="max-w-[180px] text-sm text-muted-foreground">
                              {item.letak ?? "-"}
                            </div>
                          </TableCell>
                          <TableCell className="font-mono text-xs">
                            {item.noSertifikat ?? "-"}
                          </TableCell>
                          <TableCell className="text-xs">{item.asal ?? "-"}</TableCell>
                          <TableCell className="whitespace-nowrap">
                            {formatRupiah(item.harga)}
                          </TableCell>
                          <TableCell>
                            <Badge variant="info">{JENIS_INVENTARIS_LABEL[item.jenis]}</Badge>
                          </TableCell>
                          <TableCell>
                            <Badge variant={KONDISI_BADGE[item.kondisi ?? ""] ?? "secondary"}>
                              {item.kondisi ?? "-"}
                            </Badge>
                          </TableCell>
                          <TableCell>{item._count?.mutasi ?? 0}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
                  <Boxes className="h-8 w-8 text-muted-foreground" />
                  <p className="font-semibold">Belum ada aset inventaris</p>
                  <p className="max-w-md text-sm text-muted-foreground">
                    Tambahkan aset pada kategori {jenis ? JENIS_INVENTARIS_LABEL[jenis as JenisInventaris] : "inventaris"}.
                  </p>
                </div>
              ))}

            {view === "mutasi" &&
              (mutasiLoading ? (
                <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>
              ) : mutasiRows.length ? (
                <div className="overflow-x-auto">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-12">No</TableHead>
                        <TableHead>Aset</TableHead>
                        <TableHead>Kategori</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Jenis Mutasi</TableHead>
                        <TableHead>Tanggal</TableHead>
                        <TableHead>Tujuan</TableHead>
                        <TableHead>Harga Jual</TableHead>
                        <TableHead>Keterangan</TableHead>
                        {isAdmin && <TableHead className="text-right">Aksi</TableHead>}
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {mutasiRows.map((item, index) => (
                        <TableRow key={item.id}>
                          <TableCell className="text-muted-foreground">
                            {(mutasiPage - 1) * 10 + index + 1}
                          </TableCell>
                          <TableCell>
                            <div className="font-medium">{item.aset?.namaBarang ?? "-"}</div>
                            <div className="font-mono text-xs text-muted-foreground">
                              {item.aset?.kodeBarang}
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant="info">
                              {item.aset ? JENIS_INVENTARIS_LABEL[item.aset.jenis] : "-"}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            <Badge variant={KONDISI_BADGE[item.statusMutasi] ?? "secondary"}>
                              {item.statusMutasi}
                            </Badge>
                          </TableCell>
                          <TableCell>{item.jenisMutasi ?? "-"}</TableCell>
                          <TableCell className="whitespace-nowrap">
                            {new Date(item.tanggalMutasi).toLocaleDateString("id-ID")}
                          </TableCell>
                          <TableCell>{item.tujuan ?? "-"}</TableCell>
                          <TableCell className="whitespace-nowrap">
                            {item.hargaJual ? formatRupiah(item.hargaJual) : "-"}
                          </TableCell>
                          <TableCell>
                            <div className="max-w-[240px] text-sm text-muted-foreground">
                              {item.keterangan ?? "-"}
                            </div>
                          </TableCell>
                          {isAdmin && (
                            <TableCell className="text-right">
                              <Button
                                variant="ghost"
                                size="icon"
                                className="h-8 w-8 text-destructive"
                                title="Hapus mutasi"
                                onClick={() => setDeleteMutasiTarget(item)}
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </TableCell>
                          )}
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
                  <History className="h-8 w-8 text-muted-foreground" />
                  <p className="font-semibold">Belum ada mutasi aset</p>
                  <p className="max-w-md text-sm text-muted-foreground">
                    Catat mutasi dari daftar aset untuk merekam perubahan status inventaris.
                  </p>
                </div>
              ))}

            {view === "laporan" &&
              (laporanLoading ? (
                <div className="space-y-2 p-4">
                  {Array.from({ length: 4 }).map((_, index) => (
                    <div key={index} className="h-12 animate-pulse rounded-lg bg-muted" />
                  ))}
                </div>
              ) : laporanRows.length ? (
                <div className="p-6">
                  <div className="mb-5 text-center">
                    <h2 className="text-lg font-bold uppercase">
                      Laporan Inventaris {jenis ? JENIS_INVENTARIS_LABEL[jenis as JenisInventaris] : "Desa Mulyadadi"}
                    </h2>
                    <p className="text-sm text-muted-foreground">
                      Kecamatan Cipari, Kabupaten Cilacap · {laporanRows.length} aset · Total{" "}
                      {formatRupiah(laporan?.nilai ?? 0)}
                    </p>
                  </div>
                  <div className="space-y-6">
                    {laporanKelompok.map((group) => (
                      <div key={group.value}>
                        <h3 className="mb-2 text-sm font-semibold">{group.label}</h3>
                        <div className="overflow-x-auto">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead className="w-12">No</TableHead>
                                <TableHead>Kode / Register</TableHead>
                                <TableHead>Nama Barang</TableHead>
                                <TableHead>Tahun</TableHead>
                                <TableHead>Harga</TableHead>
                                <TableHead>Kondisi</TableHead>
                                <TableHead>Lokasi</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {group.rows.map((row, index) => (
                                <TableRow key={row.id}>
                                  <TableCell>{index + 1}</TableCell>
                                  <TableCell>
                                    <div className="font-mono text-xs">{row.kodeBarang}</div>
                                    <div className="font-mono text-xs text-muted-foreground">
                                      {row.register}
                                    </div>
                                  </TableCell>
                                  <TableCell className="font-medium">{row.namaBarang}</TableCell>
                                  <TableCell>{row.tahunPengadaan ?? "-"}</TableCell>
                                  <TableCell className="whitespace-nowrap">
                                    {formatRupiah(row.harga)}
                                  </TableCell>
                                  <TableCell>{row.kondisi ?? "-"}</TableCell>
                                  <TableCell>{row.letak ?? "-"}</TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
                  <ClipboardList className="h-8 w-8 text-muted-foreground" />
                  <p className="font-semibold">Belum ada data laporan</p>
                  <p className="max-w-md text-sm text-muted-foreground">
                    Tambahkan aset inventaris untuk menghasilkan laporan.
                  </p>
                </div>
              ))}

            {view === "aset" && data && data.meta.total > 0 && (
              <Pagination
                page={page}
                totalPages={data.meta.totalPages}
                total={data.meta.total}
                onChange={setPage}
              />
            )}
            {view === "mutasi" && mutasiData && mutasiData.meta.total > 0 && (
              <Pagination
                page={mutasiPage}
                totalPages={mutasiData.meta.totalPages}
                total={mutasiData.meta.total}
                onChange={setMutasiPage}
              />
            )}
          </CardContent>
        </Card>
      </div>

      <div className="hidden print:block">
        <div className="mb-4 text-center">
          <h1 className="text-lg font-bold uppercase">
            {view === "laporan"
              ? "Laporan Inventaris Desa Mulyadadi"
              : view === "mutasi"
                ? "Daftar Mutasi Inventaris Desa Mulyadadi"
                : "Daftar Inventaris Desa Mulyadadi"}
          </h1>
          <p className="text-sm">Kecamatan Cipari, Kabupaten Cilacap</p>
          <p className="text-xs text-muted-foreground">
            Dicetak pada {new Date().toLocaleDateString("id-ID")}
            {jenis ? ` · ${JENIS_INVENTARIS_LABEL[jenis as JenisInventaris]}` : ""}
          </p>
        </div>

        {view === "mutasi" ? (
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                {["No", "Aset", "Kategori", "Status", "Jenis Mutasi", "Tanggal", "Keterangan"].map(
                  (judul) => (
                    <th key={judul} className="border border-slate-400 px-2 py-1 text-left">
                      {judul}
                    </th>
                  ),
                )}
              </tr>
            </thead>
            <tbody>
              {mutasiRows.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.aset?.namaBarang ?? "-"}</td>
                  <td className="border border-slate-400 px-2 py-1">
                    {item.aset ? JENIS_INVENTARIS_LABEL[item.aset.jenis] : "-"}
                  </td>
                  <td className="border border-slate-400 px-2 py-1">{item.statusMutasi}</td>
                  <td className="border border-slate-400 px-2 py-1">{item.jenisMutasi ?? "-"}</td>
                  <td className="border border-slate-400 px-2 py-1">
                    {new Date(item.tanggalMutasi).toLocaleDateString("id-ID")}
                  </td>
                  <td className="border border-slate-400 px-2 py-1">{item.keterangan ?? "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <table className="w-full border-collapse text-xs">
            <thead>
              <tr>
                {["No", "Kode / Register", "Nama Barang", "Kategori", "Tahun", "Harga", "Kondisi", "Lokasi"].map(
                  (judul) => (
                    <th key={judul} className="border border-slate-400 px-2 py-1 text-left">
                      {judul}
                    </th>
                  ),
                )}
              </tr>
            </thead>
            <tbody>
              {(laporanRows.length ? laporanRows : 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 font-mono">
                    {item.kodeBarang} / {item.register}
                  </td>
                  <td className="border border-slate-400 px-2 py-1">{item.namaBarang}</td>
                  <td className="border border-slate-400 px-2 py-1">
                    {JENIS_INVENTARIS_LABEL[item.jenis]}
                  </td>
                  <td className="border border-slate-400 px-2 py-1">{item.tahunPengadaan ?? "-"}</td>
                  <td className="border border-slate-400 px-2 py-1">{formatRupiah(item.harga)}</td>
                  <td className="border border-slate-400 px-2 py-1">{item.kondisi ?? "-"}</td>
                  <td className="border border-slate-400 px-2 py-1">{item.letak ?? "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      <Dialog open={formOpen} onOpenChange={setFormOpen}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>
              {readOnly ? "Detail Aset" : editing ? "Ubah Aset Inventaris" : "Tambah Aset Inventaris"}
            </DialogTitle>
            <DialogDescription>
              Data inventaris kekayaan desa sesuai golongan barang.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={save} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="aset-jenis">Kategori Inventaris</Label>
                <Select
                  id="aset-jenis"
                  value={form.jenis}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      jenis: event.target.value as JenisInventaris,
                    }))
                  }
                  disabled={readOnly}
                >
                  {JENIS_INVENTARIS_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="aset-kondisi">Kondisi</Label>
                <Select
                  id="aset-kondisi"
                  value={form.kondisi}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, kondisi: event.target.value }))
                  }
                  disabled={readOnly}
                >
                  {KONDISI_OPTIONS.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </Select>
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="aset-nama">Nama Barang / Jenis Barang</Label>
              <Input
                id="aset-nama"
                value={form.namaBarang}
                onChange={(event) =>
                  setForm((current) => ({ ...current, namaBarang: event.target.value }))
                }
                maxLength={150}
                disabled={readOnly}
                placeholder="Contoh: Tanah Kas Desa"
              />
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="aset-kode">Kode Barang</Label>
                <Input
                  id="aset-kode"
                  value={form.kodeBarang}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, kodeBarang: event.target.value }))
                  }
                  maxLength={50}
                  disabled={readOnly}
                  placeholder="2.01.01.01.01"
                  className="font-mono"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="aset-register">Nomor Register</Label>
                <Input
                  id="aset-register"
                  value={form.register}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, register: event.target.value }))
                  }
                  maxLength={50}
                  disabled={readOnly}
                  className="font-mono"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="aset-tahun">Tahun Pengadaan</Label>
                <Input
                  id="aset-tahun"
                  type="number"
                  value={form.tahunPengadaan}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, tahunPengadaan: event.target.value }))
                  }
                  disabled={readOnly}
                />
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="aset-harga">Harga</Label>
                <Input
                  id="aset-harga"
                  type="number"
                  min={0}
                  value={form.harga}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, harga: event.target.value }))
                  }
                  disabled={readOnly}
                  placeholder="0"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="aset-penggunaan">Penggunaan Barang</Label>
                <Input
                  id="aset-penggunaan"
                  value={form.penggunaan}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, penggunaan: event.target.value }))
                  }
                  maxLength={100}
                  disabled={readOnly}
                  placeholder="Pemerintah Desa"
                />
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="aset-asal">Asal Usul</Label>
                <Select
                  id="aset-asal"
                  value={form.asal}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, asal: event.target.value }))
                  }
                  disabled={readOnly}
                >
                  {["Pembelian", "Hibah", "Pembangunan", "Bantuan", "Lainnya"].map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="aset-letak">Letak / Alamat</Label>
                <Input
                  id="aset-letak"
                  value={form.letak}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, letak: event.target.value }))
                  }
                  maxLength={255}
                  disabled={readOnly}
                  placeholder="Dusun Krajan, RT 01 RW 01"
                />
              </div>
            </div>

            {form.jenis === "TANAH" && (
              <div className="grid gap-4 sm:grid-cols-3">
                <div className="space-y-2">
                  <Label htmlFor="aset-luas">Luas Tanah (m²)</Label>
                  <Input
                    id="aset-luas"
                    type="number"
                    min={0}
                    value={form.luas}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, luas: event.target.value }))
                    }
                    disabled={readOnly}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="aset-sertifikat">Nomor Sertifikat</Label>
                  <Input
                    id="aset-sertifikat"
                    value={form.noSertifikat}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, noSertifikat: event.target.value }))
                    }
                    maxLength={50}
                    disabled={readOnly}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="aset-tanggal-sertifikat">Tanggal Sertifikat</Label>
                  <Input
                    id="aset-tanggal-sertifikat"
                    type="date"
                    value={form.tanggalSertifikat}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, tanggalSertifikat: event.target.value }))
                    }
                    disabled={readOnly}
                  />
                </div>
              </div>
            )}

            {form.jenis === "PERALATAN" && (
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div className="space-y-2">
                  <Label htmlFor="aset-merk">Merk</Label>
                  <Input
                    id="aset-merk"
                    value={form.merk}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, merk: event.target.value }))
                    }
                    maxLength={100}
                    disabled={readOnly}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="aset-ukuran">Ukuran</Label>
                  <Input
                    id="aset-ukuran"
                    value={form.ukuran}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, ukuran: event.target.value }))
                    }
                    maxLength={50}
                    disabled={readOnly}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="aset-bahan">Bahan</Label>
                  <Input
                    id="aset-bahan"
                    value={form.bahan}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, bahan: event.target.value }))
                    }
                    maxLength={50}
                    disabled={readOnly}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="aset-jumlah">Jumlah</Label>
                  <Input
                    id="aset-jumlah"
                    type="number"
                    min={0}
                    value={form.jumlah}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, jumlah: event.target.value }))
                    }
                    disabled={readOnly}
                  />
                </div>
              </div>
            )}

            {["GEDUNG", "JALAN", "KONSTRUKSI"].includes(form.jenis) && (
              <div className="space-y-2">
                <Label htmlFor="aset-luas-bangunan">Luas (m²)</Label>
                <Input
                  id="aset-luas-bangunan"
                  type="number"
                  min={0}
                  value={form.luas}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, luas: event.target.value }))
                  }
                  disabled={readOnly}
                  className="sm:max-w-xs"
                />
              </div>
            )}

            {form.jenis === "ASET" && (
              <div className="space-y-2">
                <Label htmlFor="aset-jumlah-aset">Jumlah</Label>
                <Input
                  id="aset-jumlah-aset"
                  type="number"
                  min={0}
                  value={form.jumlah}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, jumlah: event.target.value }))
                  }
                  disabled={readOnly}
                  className="sm:max-w-xs"
                />
              </div>
            )}

            <div className="space-y-2">
              <Label htmlFor="aset-keterangan">Keterangan</Label>
              <Textarea
                id="aset-keterangan"
                value={form.keterangan}
                onChange={(event) =>
                  setForm((current) => ({ ...current, keterangan: event.target.value }))
                }
                rows={3}
                disabled={readOnly}
                placeholder="Keterangan tambahan aset"
              />
            </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(mutasiTarget)} onOpenChange={(open) => !open && setMutasiTarget(null)}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Catat Mutasi Aset</DialogTitle>
            <DialogDescription>
              {mutasiTarget?.namaBarang} · {mutasiTarget?.kodeBarang}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={simpanMutasi} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="mutasi-status">Status Aset</Label>
                <Select
                  id="mutasi-status"
                  value={mutasiForm.statusMutasi}
                  onChange={(event) =>
                    setMutasiForm((current) => ({ ...current, statusMutasi: event.target.value }))
                  }
                >
                  {STATUS_MUTASI_OPTIONS.map((option) => (
                    <option key={option} value={option}>
                      {option === "Hapus" ? "Dihapus" : option}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="mutasi-tanggal">Tanggal Mutasi</Label>
                <Input
                  id="mutasi-tanggal"
                  type="date"
                  value={mutasiForm.tanggalMutasi}
                  onChange={(event) =>
                    setMutasiForm((current) => ({ ...current, tanggalMutasi: event.target.value }))
                  }
                />
              </div>
            </div>
            <div className="space-y-2">
              <Label htmlFor="mutasi-jenis">Jenis Mutasi</Label>
              <Select
                id="mutasi-jenis"
                value={mutasiForm.jenisMutasi}
                onChange={(event) =>
                  setMutasiForm((current) => ({ ...current, jenisMutasi: event.target.value }))
                }
              >
                {JENIS_MUTASI_GROUPS.map((group) => (
                  <optgroup key={group.label} label={group.label}>
                    {group.options.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </optgroup>
                ))}
              </Select>
            </div>
            {mutasiForm.jenisMutasi.includes("Disumbangkan") && (
              <div className="space-y-2">
                <Label htmlFor="mutasi-tujuan">Disumbangkan ke</Label>
                <Input
                  id="mutasi-tujuan"
                  value={mutasiForm.tujuan}
                  onChange={(event) =>
                    setMutasiForm((current) => ({ ...current, tujuan: event.target.value }))
                  }
                  placeholder="Nama penerima sumbangan"
                />
              </div>
            )}
            {mutasiForm.jenisMutasi.includes("Dijual") && (
              <div className="space-y-2">
                <Label htmlFor="mutasi-harga">Harga Penjualan</Label>
                <Input
                  id="mutasi-harga"
                  type="number"
                  min={0}
                  value={mutasiForm.hargaJual}
                  onChange={(event) =>
                    setMutasiForm((current) => ({ ...current, hargaJual: event.target.value }))
                  }
                  placeholder="0"
                />
              </div>
            )}
            <div className="space-y-2">
              <Label htmlFor="mutasi-keterangan">Keterangan</Label>
              <Textarea
                id="mutasi-keterangan"
                value={mutasiForm.keterangan}
                onChange={(event) =>
                  setMutasiForm((current) => ({ ...current, keterangan: event.target.value }))
                }
                rows={3}
                placeholder="Keterangan mutasi aset"
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setMutasiTarget(null)}>
                Batal
              </Button>
              <Button type="submit" disabled={mutasiSaving}>
                {mutasiSaving ? "Menyimpan…" : "Simpan Mutasi"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(historyTarget)} onOpenChange={(open) => !open && setHistoryTarget(null)}>
        <DialogContent className="max-w-3xl">
          <DialogHeader>
            <DialogTitle>Riwayat Mutasi</DialogTitle>
            <DialogDescription>
              {historyTarget?.namaBarang} · {historyTarget?.kodeBarang}
            </DialogDescription>
          </DialogHeader>
          {history?.length ? (
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Tanggal</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Jenis</TableHead>
                    <TableHead>Keterangan</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {history.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="whitespace-nowrap">
                        {new Date(item.tanggalMutasi).toLocaleDateString("id-ID")}
                      </TableCell>
                      <TableCell>
                        <Badge variant={KONDISI_BADGE[item.statusMutasi] ?? "secondary"}>
                          {item.statusMutasi}
                        </Badge>
                      </TableCell>
                      <TableCell>{item.jenisMutasi ?? "-"}</TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {item.keterangan ?? "-"}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          ) : (
            <p className="py-6 text-center text-sm text-muted-foreground">
              Belum ada mutasi untuk aset ini.
            </p>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setHistoryTarget(null)}>
              Tutup
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(deleteTarget)}
        onOpenChange={(open) => !open && setDeleteTarget(null)}
      >
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus aset?</DialogTitle>
            <DialogDescription>
              Aset “{deleteTarget?.namaBarang}” beserta riwayat mutasinya 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} aset?</DialogTitle>
            <DialogDescription>
              Seluruh aset dan riwayat mutasinya 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>

      <Dialog
        open={Boolean(deleteMutasiTarget)}
        onOpenChange={(open) => !open && setDeleteMutasiTarget(null)}
      >
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus mutasi?</DialogTitle>
            <DialogDescription>
              Catatan mutasi {deleteMutasiTarget?.jenisMutasi ?? ""} akan dihapus permanen.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteMutasiTarget(null)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={hapusMutasi} disabled={deleting}>
              {deleting ? "Menghapus…" : "Hapus"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}