"use client";

import { useState } from "react";
import useSWR from "swr";
import {
  BadgeCheck,
  FilePenLine,
  Mail,
  Network,
  Pencil,
  Phone,
  Plus,
  Printer,
  Settings2,
  Trash2,
  UserRound,
  UsersRound,
} from "lucide-react";
import { toast } from "sonner";
import type {
  JabatanPerangkat,
  JenisPerangkat,
  Penduduk,
  PerangkatDesa,
} from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { useSession } from "@/lib/use-session";
import { PageHeader, StatCard } from "@/components/page-header";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { 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 { initials } from "@/lib/utils";

const JENIS_OPTIONS: { value: JenisPerangkat; label: string }[] = [
  { value: "KEPALA_DESA", label: "Kepala Desa" },
  { value: "SEKRETARIS", label: "Sekretaris Desa" },
  { value: "KAUR", label: "Kaur / Kepala Urusan" },
  { value: "KASI", label: "Kasi / Kepala Seksi" },
  { value: "KADUS", label: "Kadus / Kepala Dusun" },
  { value: "STAF", label: "Staf" },
  { value: "BPD", label: "BPD" },
];

type FormState = {
  pendudukId: string;
  nama: string;
  gelarDepan: string;
  gelarBelakang: string;
  nik: string;
  nip: string;
  niap: string;
  tagIdCard: string;
  foto: string;
  tempatLahir: string;
  tanggalLahir: string;
  jenisKelamin: string;
  agama: string;
  pendidikan: string;
  pangkat: string;
  jabatan: string;
  jenis: JenisPerangkat;
  noSk: string;
  tglSk: string;
  noHenti: string;
  tglHenti: string;
  atasanId: string;
  masaJabatan: string;
  telepon: string;
  email: string;
  alamat: string;
  urut: string;
  statusPejabat: boolean;
  aktif: boolean;
  keterangan: string;
};

const emptyForm: FormState = {
  pendudukId: "",
  nama: "",
  gelarDepan: "",
  gelarBelakang: "",
  nik: "",
  nip: "",
  niap: "",
  tagIdCard: "",
  foto: "",
  tempatLahir: "",
  tanggalLahir: "",
  jenisKelamin: "",
  agama: "",
  pendidikan: "",
  pangkat: "",
  jabatan: "",
  jenis: "STAF",
  noSk: "",
  tglSk: "",
  noHenti: "",
  tglHenti: "",
  atasanId: "",
  masaJabatan: "",
  telepon: "",
  email: "",
  alamat: "",
  urut: "0",
  statusPejabat: false,
  aktif: true,
  keterangan: "",
};

type PendudukPage = { data: Penduduk[] };

const dateOnly = (value: string | null) => (value ? value.slice(0, 10) : "");

function namaLengkap(item: PerangkatDesa) {
  return [item.gelarDepan, item.nama, item.gelarBelakang].filter(Boolean).join(" ");
}

type JabatanForm = {
  id: number;
  nama: string;
  jenis: JenisPerangkat;
  urut: string;
};

const emptyJabatan: JabatanForm = { id: 0, nama: "", jenis: "STAF", urut: "0" };

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

  const { data, isLoading, mutate: mutatePerangkat } = useSWR<PerangkatDesa[]>(
    "/perangkat",
    fetcher,
  );
  const { data: jabatanList, mutate: mutateJabatan } = useSWR<JabatanPerangkat[]>(
    "/perangkat/jabatan",
    fetcher,
  );
  const { data: pendudukPage } = useSWR<PendudukPage>(
    "/penduduk?limit=200&status=HIDUP",
    fetcher,
  );
  const penduduk = pendudukPage?.data ?? [];
  const daftar = data ?? [];

  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<PerangkatDesa | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [saving, setSaving] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<PerangkatDesa | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [jabatanOpen, setJabatanOpen] = useState(false);
  const [jabatanForm, setJabatanForm] = useState<JabatanForm>(emptyJabatan);
  const [jabatanSaving, setJabatanSaving] = useState(false);
  const [confirmJabatan, setConfirmJabatan] = useState<JabatanPerangkat | null>(null);
  const [baganOpen, setBaganOpen] = useState(false);

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

  function openEdit(item: PerangkatDesa) {
    setEditing(item);
    setForm({
      pendudukId: item.pendudukId ? String(item.pendudukId) : "",
      nama: item.nama,
      gelarDepan: item.gelarDepan ?? "",
      gelarBelakang: item.gelarBelakang ?? "",
      nik: item.nik ?? "",
      nip: item.nip ?? "",
      niap: item.niap ?? "",
      tagIdCard: item.tagIdCard ?? "",
      foto: item.foto ?? "",
      tempatLahir: item.tempatLahir ?? "",
      tanggalLahir: dateOnly(item.tanggalLahir),
      jenisKelamin: item.jenisKelamin ?? "",
      agama: item.agama ?? "",
      pendidikan: item.pendidikan ?? "",
      pangkat: item.pangkat ?? "",
      jabatan: item.jabatan,
      jenis: item.jenis,
      noSk: item.noSk ?? "",
      tglSk: dateOnly(item.tglSk),
      noHenti: item.noHenti ?? "",
      tglHenti: dateOnly(item.tglHenti),
      atasanId: item.atasanId ? String(item.atasanId) : "",
      masaJabatan: item.masaJabatan ?? "",
      telepon: item.telepon ?? "",
      email: item.email ?? "",
      alamat: item.alamat ?? "",
      urut: String(item.urut),
      statusPejabat: item.statusPejabat ?? false,
      aktif: item.aktif,
      keterangan: item.keterangan ?? "",
    });
    setFormOpen(true);
  }

  function applyPenduduk(value: string) {
    const selected = penduduk.find((item) => String(item.id) === value);
    if (!selected) {
      setForm((current) => ({ ...current, pendudukId: "" }));
      return;
    }
    setForm((current) => ({
      ...current,
      pendudukId: value,
      nama: selected.nama,
      nik: selected.nik,
      tempatLahir: selected.tempatLahir ?? "",
      tanggalLahir: dateOnly(selected.tanggalLahir),
      jenisKelamin: selected.jenisKelamin ?? "",
      agama: selected.agama ?? "",
      pendidikan: selected.pendidikan ?? "",
      alamat: selected.alamat ?? "",
      telepon: selected.telepon ?? "",
      email: selected.email ?? "",
      foto: current.foto || (selected.foto ?? ""),
    }));
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      const optional = (value: string) => (value.trim() === "" ? null : value.trim());
      const payload = {
        pendudukId: form.pendudukId ? Number(form.pendudukId) : null,
        nama: form.nama.trim(),
        gelarDepan: optional(form.gelarDepan),
        gelarBelakang: optional(form.gelarBelakang),
        nik: optional(form.nik),
        nip: optional(form.nip),
        niap: optional(form.niap),
        tagIdCard: optional(form.tagIdCard),
        foto: optional(form.foto),
        tempatLahir: optional(form.tempatLahir),
        tanggalLahir: optional(form.tanggalLahir),
        jenisKelamin: optional(form.jenisKelamin),
        agama: optional(form.agama),
        pendidikan: optional(form.pendidikan),
        pangkat: optional(form.pangkat),
        jabatan: form.jabatan,
        jenis: form.jenis,
        noSk: optional(form.noSk),
        tglSk: optional(form.tglSk),
        noHenti: optional(form.noHenti),
        tglHenti: optional(form.tglHenti),
        atasanId: form.atasanId ? Number(form.atasanId) : null,
        masaJabatan: optional(form.masaJabatan),
        telepon: optional(form.telepon),
        email: optional(form.email),
        alamat: optional(form.alamat),
        urut: Number(form.urut) || 0,
        statusPejabat: form.statusPejabat,
        aktif: form.aktif,
        keterangan: optional(form.keterangan),
      };
      if (editing) {
        await apiSend(`/perangkat/${editing.id}`, "PATCH", payload);
        toast.success("Data perangkat diperbarui");
      } else {
        await apiSend("/perangkat", "POST", payload);
        toast.success("Perangkat desa ditambahkan");
      }
      setFormOpen(false);
      await mutatePerangkat();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan data");
    } finally {
      setSaving(false);
    }
  }

  async function remove() {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await apiSend(`/perangkat/${deleteTarget.id}`, "DELETE");
      toast.success("Perangkat desa dihapus");
      setDeleteTarget(null);
      await mutatePerangkat();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus data");
    } finally {
      setDeleting(false);
    }
  }

  function editJabatan(item: JabatanPerangkat) {
    setJabatanForm({
      id: item.id,
      nama: item.nama,
      jenis: item.jenis,
      urut: String(item.urut),
    });
  }

  async function saveJabatan(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setJabatanSaving(true);
    try {
      const payload = {
        nama: jabatanForm.nama,
        jenis: jabatanForm.jenis,
        urut: Number(jabatanForm.urut) || 0,
      };
      if (jabatanForm.id) {
        await apiSend(`/perangkat/jabatan/${jabatanForm.id}`, "PATCH", payload);
        toast.success("Jabatan diperbarui");
      } else {
        await apiSend("/perangkat/jabatan", "POST", payload);
        toast.success("Jabatan ditambahkan");
      }
      setJabatanForm(emptyJabatan);
      await Promise.all([mutateJabatan(), mutatePerangkat()]);
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan jabatan");
    } finally {
      setJabatanSaving(false);
    }
  }

  async function removeJabatan(item: JabatanPerangkat) {
    setJabatanSaving(true);
    try {
      await apiSend(`/perangkat/jabatan/${item.id}`, "DELETE");
      toast.success(`Jabatan ${item.nama} dihapus`);
      setConfirmJabatan(null);
      if (jabatanForm.id === item.id) setJabatanForm(emptyJabatan);
      await Promise.all([mutateJabatan(), mutatePerangkat()]);
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus jabatan");
    } finally {
      setJabatanSaving(false);
    }
  }

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Pemerintah Desa"
        description="Susunan perangkat Desa Mulyadadi beserta jabatan, SK, kontak, dan masa jabatan."
        action={
          <div className="flex flex-wrap gap-2 print:hidden">
            <Button variant="outline" onClick={() => window.print()}>
              <Printer className="h-4 w-4" />
              Cetak
            </Button>
            <Button variant="outline" onClick={() => setBaganOpen(true)}>
              <Network className="h-4 w-4" />
              Bagan Organisasi
            </Button>
            {isAdmin && (
              <>
                <Button variant="outline" onClick={() => setJabatanOpen(true)}>
                  <Settings2 className="h-4 w-4" />
                  Kelola Jabatan
                </Button>
                <Button onClick={openCreate}>
                  <Plus className="h-4 w-4" />
                  Tambah Perangkat
                </Button>
              </>
            )}
          </div>
        }
      />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 print:hidden">
        <StatCard title="Total perangkat" value={daftar.length} icon={UsersRound} />
        <StatCard
          title="Aktif menjabat"
          value={daftar.filter((item) => item.aktif).length}
          icon={BadgeCheck}
          tone="sky"
        />
        <StatCard
          title="BPD"
          value={daftar.filter((item) => item.jenis === "BPD").length}
          icon={UserRound}
          tone="amber"
        />
        <StatCard
          title="Master jabatan"
          value={jabatanList?.length ?? 0}
          icon={Settings2}
          tone="emerald"
        />
      </div>

      <Card>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="space-y-2 p-4">
              {Array.from({ length: 5 }).map((_, index) => (
                <div key={index} className="h-14 animate-pulse rounded-lg bg-muted" />
              ))}
            </div>
          ) : daftar.length ? (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-10">No</TableHead>
                  <TableHead>
                    Nama, NIP/NIPD, NIK, Tag ID Card
                  </TableHead>
                  <TableHead>Tempat, Tanggal Lahir</TableHead>
                  <TableHead>Jenis Kelamin</TableHead>
                  <TableHead>Agama</TableHead>
                  <TableHead>Pangkat / Golongan</TableHead>
                  <TableHead>Jabatan</TableHead>
                  <TableHead>Pendidikan Terakhir</TableHead>
                  <TableHead>Nomor Keputusan Pengangkatan</TableHead>
                  <TableHead>Tanggal Keputusan Pengangkatan</TableHead>
                  <TableHead>Nomor Keputusan Pemberhentian</TableHead>
                  <TableHead>Tanggal Keputusan Pemberhentian</TableHead>
                  <TableHead>Masa / Periode Jabatan</TableHead>
                  <TableHead>Kontak</TableHead>
                  <TableHead>Status</TableHead>
                  {isAdmin && <TableHead className="text-right print:hidden">Aksi</TableHead>}
                </TableRow>
              </TableHeader>
              <TableBody>
                {daftar.map((item, index) => (
                  <TableRow key={item.id}>
                    <TableCell className="text-xs text-muted-foreground">
                      {index + 1}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        {item.foto ? (
                          <img
                            src={item.foto}
                            alt={item.nama}
                            className="h-9 w-9 shrink-0 rounded-full object-cover"
                            onError={(event) => {
                              event.currentTarget.style.display = "none";
                            }}
                          />
                        ) : (
                          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary text-xs font-bold text-primary">
                            {initials(item.nama)}
                          </div>
                        )}
                        <div>
                          <div className="font-medium">{namaLengkap(item)}</div>
                          <div className="font-mono text-xs text-muted-foreground">
                            {item.nik ? `NIK ${item.nik}` : item.nip ?? "NIP -"}
                          </div>
                          {(item.niap || item.tagIdCard) && (
                            <div className="font-mono text-xs text-muted-foreground">
                              {[item.niap, item.tagIdCard].filter(Boolean).join(" · ")}
                            </div>
                          )}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {item.tempatLahir || item.tanggalLahir
                        ? `${item.tempatLahir ?? "-"}, ${dateOnly(item.tanggalLahir) || "-"}`
                        : "-"}
                    </TableCell>
                    <TableCell className="text-xs">
                      {item.jenisKelamin === "L"
                        ? "Laki-laki"
                        : item.jenisKelamin === "P"
                          ? "Perempuan"
                          : (item.jenisKelamin ?? "-")}
                    </TableCell>
                    <TableCell className="text-xs">{item.agama ?? "-"}</TableCell>
                    <TableCell className="text-xs">{item.pangkat ?? "-"}</TableCell>
                    <TableCell>
                      <div>{item.jabatan}</div>
                      <Badge variant="secondary" className="mt-1">
                        {JENIS_OPTIONS.find((option) => option.value === item.jenis)?.label ??
                          item.jenis}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-xs">{item.pendidikan ?? "-"}</TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {item.noSk ?? "-"}
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {dateOnly(item.tglSk) || "-"}
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {item.noHenti ?? "-"}
                    </TableCell>
                    <TableCell className="text-xs text-muted-foreground">
                      {dateOnly(item.tglHenti) || "-"}
                    </TableCell>
                    <TableCell className="text-xs">{item.masaJabatan ?? "-"}</TableCell>
                    <TableCell>
                      <div className="flex flex-col gap-0.5 text-xs text-muted-foreground">
                        {item.telepon && (
                          <span className="flex items-center gap-1">
                            <Phone className="h-3 w-3" />
                            {item.telepon}
                          </span>
                        )}
                        {item.email && (
                          <span className="flex items-center gap-1">
                            <Mail className="h-3 w-3" />
                            {item.email}
                          </span>
                        )}
                        {!item.telepon && !item.email && "-"}
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-col gap-1">
                        <Badge variant={item.aktif ? "success" : "secondary"}>
                          {item.aktif ? "Aktif" : "Nonaktif"}
                        </Badge>
                        {item.statusPejabat && (
                          <Badge variant="secondary">Pejabat</Badge>
                        )}
                      </div>
                    </TableCell>
                    {isAdmin && (
                      <TableCell className="text-right print:hidden">
                        <div className="flex justify-end gap-1">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8"
                            onClick={() => openEdit(item)}
                            aria-label="Ubah data"
                          >
                            <FilePenLine className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-8 w-8 text-destructive hover:text-destructive"
                            onClick={() => setDeleteTarget(item)}
                            aria-label="Hapus data"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    )}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <div className="py-16 text-center">
              <p className="font-semibold">Belum ada data perangkat</p>
              <p className="mt-1 text-sm text-muted-foreground">
                Tambahkan kepala desa, sekretaris, kaur, kasi, kadus, dan staf.
              </p>
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog open={formOpen} onOpenChange={setFormOpen}>
        <DialogContent className="max-h-[88vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editing ? "Ubah Perangkat Desa" : "Tambah Perangkat Desa"}
            </DialogTitle>
            <DialogDescription>
              Data ini ditampilkan pada halaman profil pemerintah desa.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={save} className="space-y-5">
            <div className="space-y-1.5 rounded-lg border bg-secondary/30 p-3">
              <Label htmlFor="perangkat-penduduk">Ambil dari data penduduk</Label>
              <Select
                id="perangkat-penduduk"
                value={form.pendudukId}
                onChange={(event) => applyPenduduk(event.target.value)}
              >
                <option value="">Tidak terhubung ke data penduduk</option>
                {penduduk.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.nama} — {item.nik}
                  </option>
                ))}
              </Select>
              <p className="text-xs text-muted-foreground">
                Memilih penduduk mengisi identitas dan kontak secara otomatis.
              </p>
            </div>

            <div className="space-y-3">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Identitas
              </p>
              <div className="grid gap-4 sm:grid-cols-2">
                <Field label="Nama" required>
                  <Input
                    required
                    value={form.nama}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, nama: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Gelar depan">
                  <Input
                    value={form.gelarDepan}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, gelarDepan: event.target.value }))
                    }
                    placeholder="H."
                  />
                </Field>
                <Field label="Gelar belakang">
                  <Input
                    value={form.gelarBelakang}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        gelarBelakang: event.target.value,
                      }))
                    }
                    placeholder="S.Sos."
                  />
                </Field>
                <Field label="NIK">
                  <Input
                    value={form.nik}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, nik: event.target.value }))
                    }
                  />
                </Field>
                <Field label="NIP">
                  <Input
                    value={form.nip}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, nip: event.target.value }))
                    }
                  />
                </Field>
                <Field label="NIAP">
                  <Input
                    value={form.niap}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, niap: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Tag ID card">
                  <Input
                    value={form.tagIdCard}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, tagIdCard: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Tempat lahir">
                  <Input
                    value={form.tempatLahir}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, tempatLahir: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Tanggal lahir">
                  <Input
                    type="date"
                    value={form.tanggalLahir}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        tanggalLahir: event.target.value,
                      }))
                    }
                  />
                </Field>
                <Field label="Jenis kelamin">
                  <Select
                    value={form.jenisKelamin}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        jenisKelamin: event.target.value,
                      }))
                    }
                  >
                    <option value="">Pilih</option>
                    <option value="L">Laki-laki</option>
                    <option value="P">Perempuan</option>
                  </Select>
                </Field>
                <Field label="Agama">
                  <Input
                    value={form.agama}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, agama: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Pendidikan">
                  <Input
                    value={form.pendidikan}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, pendidikan: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Pangkat / golongan">
                  <Input
                    value={form.pangkat}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, pangkat: event.target.value }))
                    }
                  />
                </Field>
                <Field label="URL foto">
                  <Input
                    value={form.foto}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, foto: event.target.value }))
                    }
                    placeholder="https://…"
                  />
                </Field>
              </div>
            </div>

            <div className="space-y-3">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Jabatan &amp; SK
              </p>
              <div className="grid gap-4 sm:grid-cols-2">
                <Field label="Jabatan" required>
                  <Select
                    required
                    value={form.jabatan}
                    onChange={(event) => {
                      const nama = event.target.value;
                      const master = jabatanList?.find((item) => item.nama === nama);
                      setForm((current) => ({
                        ...current,
                        jabatan: nama,
                        jenis: master?.jenis ?? current.jenis,
                      }));
                    }}
                  >
                    <option value="">Pilih jabatan</option>
                    {(jabatanList ?? []).map((item) => (
                      <option key={item.id} value={item.nama}>
                        {item.nama}
                      </option>
                    ))}
                    {form.jabatan &&
                      !(jabatanList ?? []).some((item) => item.nama === form.jabatan) && (
                        <option value={form.jabatan}>{form.jabatan} (tidak terdaftar)</option>
                      )}
                  </Select>
                </Field>
                <Field label="Kategori">
                  <div className="flex h-9 items-center gap-2 rounded-md border bg-muted/40 px-3 text-sm">
                    <Badge variant="secondary">
                      {JENIS_OPTIONS.find((option) => option.value === form.jenis)?.label ??
                        form.jenis}
                    </Badge>
                    <span className="text-xs text-muted-foreground">Dari master jabatan</span>
                  </div>
                </Field>
                <Field label="Atasan langsung">
                  <Select
                    value={form.atasanId}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, atasanId: event.target.value }))
                    }
                  >
                    <option value="">Tidak ada</option>
                    {daftar
                      .filter((item) => item.id !== editing?.id)
                      .map((item) => (
                        <option key={item.id} value={item.id}>
                          {namaLengkap(item)} — {item.jabatan}
                        </option>
                      ))}
                  </Select>
                </Field>
                <Field label="Masa jabatan">
                  <Input
                    value={form.masaJabatan}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, masaJabatan: event.target.value }))
                    }
                    placeholder="2023 - 2029"
                  />
                </Field>
                <Field label="Nomor SK pengangkatan">
                  <Input
                    value={form.noSk}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, noSk: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Tanggal SK">
                  <Input
                    type="date"
                    value={form.tglSk}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, tglSk: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Nomor SK pemberhentian">
                  <Input
                    value={form.noHenti}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, noHenti: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Tanggal pemberhentian">
                  <Input
                    type="date"
                    value={form.tglHenti}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, tglHenti: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Urutan tampil">
                  <Input
                    type="number"
                    min={0}
                    value={form.urut}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, urut: event.target.value }))
                    }
                  />
                </Field>
              </div>
            </div>

            <div className="space-y-3">
              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Kontak &amp; keterangan
              </p>
              <div className="grid gap-4 sm:grid-cols-2">
                <Field label="Telepon">
                  <Input
                    value={form.telepon}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, telepon: event.target.value }))
                    }
                  />
                </Field>
                <Field label="Email">
                  <Input
                    type="email"
                    value={form.email}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, email: event.target.value }))
                    }
                  />
                </Field>
                <div className="sm:col-span-2">
                  <Field label="Alamat">
                    <Input
                      value={form.alamat}
                      onChange={(event) =>
                        setForm((current) => ({ ...current, alamat: event.target.value }))
                      }
                    />
                  </Field>
                </div>
                <div className="sm:col-span-2">
                  <Field label="Keterangan">
                    <Textarea
                      rows={2}
                      value={form.keterangan}
                      onChange={(event) =>
                        setForm((current) => ({ ...current, keterangan: event.target.value }))
                      }
                    />
                  </Field>
                </div>
              </div>
            </div>

            <div className="flex flex-wrap gap-x-6 gap-y-2">
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  checked={form.statusPejabat}
                  onChange={(event) =>
                    setForm((current) => ({
                      ...current,
                      statusPejabat: event.target.checked,
                    }))
                  }
                  className="h-4 w-4 rounded border-input accent-emerald-600"
                />
                Pejabat (tampil di bagan organisasi)
              </label>
              <label className="flex items-center gap-2 text-sm">
                <input
                  type="checkbox"
                  checked={form.aktif}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, aktif: event.target.checked }))
                  }
                  className="h-4 w-4 rounded border-input accent-emerald-600"
                />
                Masih aktif menjabat
              </label>
            </div>

            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setFormOpen(false)}>
                Batal
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? "Menyimpan…" : editing ? "Simpan Perubahan" : "Tambah"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog
        open={jabatanOpen}
        onOpenChange={(open) => {
          setJabatanOpen(open);
          if (!open) {
            setJabatanForm(emptyJabatan);
            setConfirmJabatan(null);
          }
        }}
      >
        <DialogContent className="max-h-[88vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Master Jabatan Pemerintah Desa</DialogTitle>
            <DialogDescription>
              Daftar jabatan yang dapat dipilih saat menambah atau mengubah perangkat desa.
            </DialogDescription>
          </DialogHeader>

          <form
            onSubmit={saveJabatan}
            className="grid gap-3 rounded-lg border bg-secondary/30 p-3 sm:grid-cols-[1fr_170px_90px_auto] sm:items-end"
          >
            <div className="space-y-1">
              <Label htmlFor="jabatan-nama">Nama jabatan</Label>
              <Input
                id="jabatan-nama"
                required
                maxLength={100}
                value={jabatanForm.nama}
                onChange={(event) =>
                  setJabatanForm((current) => ({ ...current, nama: event.target.value }))
                }
                placeholder="Kaur Tata Usaha dan Umum"
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="jabatan-jenis">Kategori</Label>
              <Select
                id="jabatan-jenis"
                value={jabatanForm.jenis}
                onChange={(event) =>
                  setJabatanForm((current) => ({
                    ...current,
                    jenis: event.target.value as JenisPerangkat,
                  }))
                }
              >
                {JENIS_OPTIONS.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </Select>
            </div>
            <div className="space-y-1">
              <Label htmlFor="jabatan-urut">Urutan</Label>
              <Input
                id="jabatan-urut"
                type="number"
                min={0}
                value={jabatanForm.urut}
                onChange={(event) =>
                  setJabatanForm((current) => ({ ...current, urut: event.target.value }))
                }
              />
            </div>
            <div className="flex gap-1">
              <Button type="submit" disabled={jabatanSaving}>
                {jabatanSaving ? "Menyimpan…" : jabatanForm.id ? "Simpan" : "Tambah"}
              </Button>
              {jabatanForm.id > 0 && (
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => setJabatanForm(emptyJabatan)}
                  disabled={jabatanSaving}
                >
                  Batal
                </Button>
              )}
            </div>
          </form>

          <div className="rounded-lg border">
            {jabatanList?.length ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Jabatan</TableHead>
                    <TableHead className="w-36">Kategori</TableHead>
                    <TableHead className="w-24">Dipakai</TableHead>
                    <TableHead className="w-32 text-right">Aksi</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {jabatanList.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.nama}</TableCell>
                      <TableCell>
                        <Badge variant="secondary">
                          {JENIS_OPTIONS.find((option) => option.value === item.jenis)?.label ??
                            item.jenis}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {item.dipakai} perangkat
                      </TableCell>
                      <TableCell>
                        {confirmJabatan?.id === item.id ? (
                          <div className="flex justify-end gap-1">
                            <Button
                              size="sm"
                              variant="destructive"
                              onClick={() => removeJabatan(item)}
                              disabled={jabatanSaving}
                            >
                              Hapus
                            </Button>
                            <Button
                              size="sm"
                              variant="ghost"
                              onClick={() => setConfirmJabatan(null)}
                              disabled={jabatanSaving}
                            >
                              Batal
                            </Button>
                          </div>
                        ) : (
                          <div className="flex justify-end gap-1">
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8"
                              onClick={() => editJabatan(item)}
                              aria-label={`Ubah ${item.nama}`}
                            >
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8 text-destructive hover:text-destructive disabled:text-muted-foreground"
                              onClick={() => setConfirmJabatan(item)}
                              disabled={item.dipakai > 0 || jabatanSaving}
                              title={
                                item.dipakai > 0
                                  ? "Masih digunakan perangkat"
                                  : "Hapus jabatan"
                              }
                              aria-label={`Hapus ${item.nama}`}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        )}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <p className="py-8 text-center text-sm text-muted-foreground">
                Belum ada master jabatan.
              </p>
            )}
          </div>

          <p className="text-xs text-muted-foreground">
            Jabatan yang masih dipakai perangkat tidak dapat dihapus. Mengubah nama jabatan
            otomatis memperbarui data perangkat terkait.
          </p>

          <DialogFooter>
            <Button variant="outline" onClick={() => setJabatanOpen(false)}>
              Tutup
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={baganOpen} onOpenChange={setBaganOpen}>
        <DialogContent className="max-h-[88vh] max-w-4xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Bagan Organisasi Pemerintah Desa</DialogTitle>
            <DialogDescription>
              Susunan berdasarkan atasan langsung masing-masing perangkat yang aktif.
            </DialogDescription>
          </DialogHeader>
          <div className="rounded-lg border bg-muted/20 p-4">
            <BaganOrganisasi daftar={daftar.filter((item) => item.aktif)} />
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => window.print()}>
              <Printer className="h-4 w-4" />
              Cetak Bagan
            </Button>
            <Button variant="outline" onClick={() => setBaganOpen(false)}>
              Tutup
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus data perangkat?</DialogTitle>
            <DialogDescription>
              Data <span className="font-semibold">{deleteTarget?.nama}</span> (
              {deleteTarget?.jabatan}) 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>
    </div>
  );
}

function Field({
  label,
  required,
  children,
}: {
  label: string;
  required?: boolean;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-1.5">
      <Label>
        {label}
        {required && <span className="ml-0.5 text-destructive">*</span>}
      </Label>
      {children}
    </div>
  );
}

function BaganOrganisasi({ daftar }: { daftar: PerangkatDesa[] }) {
  const ids = new Set(daftar.map((item) => item.id));
  const roots = daftar.filter((item) => !item.atasanId || !ids.has(item.atasanId));

  if (!daftar.length) {
    return (
      <p className="py-8 text-center text-sm text-muted-foreground">
        Belum ada perangkat aktif untuk ditampilkan pada bagan.
      </p>
    );
  }

  return (
    <div className="space-y-3">
      {roots.map((item) => (
        <BaganNode key={item.id} item={item} semua={daftar} depth={0} />
      ))}
    </div>
  );
}

function BaganNode({
  item,
  semua,
  depth,
}: {
  item: PerangkatDesa;
  semua: PerangkatDesa[];
  depth: number;
}) {
  const children = semua.filter((child) => child.atasanId === item.id);

  return (
    <div className={depth > 0 ? "border-l border-dashed border-emerald-200 pl-4" : ""}>
      <div
        className={`flex flex-wrap items-center gap-3 rounded-lg border px-3 py-2 shadow-sm ${
          depth === 0
            ? "border-emerald-300 bg-emerald-50/70"
            : "border-slate-200 bg-background"
        }`}
      >
        {item.foto ? (
          <img
            src={item.foto}
            alt={item.nama}
            className="h-9 w-9 shrink-0 rounded-full object-cover"
          />
        ) : (
          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-secondary text-xs font-bold text-primary">
            {initials(item.nama)}
          </div>
        )}
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold">{namaLengkap(item)}</div>
          <div className="text-xs text-muted-foreground">{item.jabatan}</div>
        </div>
        <Badge variant="secondary">
          {JENIS_OPTIONS.find((option) => option.value === item.jenis)?.label ?? item.jenis}
        </Badge>
        {item.statusPejabat && <Badge variant="success">Pejabat</Badge>}
      </div>
      {children.length > 0 && (
        <div className="mt-2 space-y-2">
          {children.map((child) => (
            <BaganNode key={child.id} item={child} semua={semua} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}