"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";
import {
  BadgeCheck,
  CheckCircle2,
  Download,
  FileText,
  Handshake,
  Info,
  Pencil,
  Plus,
  Printer,
  Search,
  Trash2,
  Upload,
} from "lucide-react";
import { toast } from "sonner";
import type { Desa } 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, CardHeader, CardTitle } 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 { cn } from "@/lib/utils";

type Kerjasama = {
  id: number;
  jenis: string;
  judul: string;
  mitra: string | null;
  email: string | null;
  mulai: string | null;
  selesai: string | null;
  tanggalTtd: string | null;
  berkas: string | null;
  status: string;
  keterangan: string | null;
};

const JENIS_OPTIONS = [
  "Pihak Ketiga",
  "Antar Desa",
  "Pemerintah",
  "CSR",
  "Penyedia Layanan",
];

const STATUS_OPTIONS = ["Diajukan", "Disetujui", "Ditolak", "Berakhir"];

const MITRA_LAYANAN = "Core Mulyadadi";
const JUDUL_LAYANAN = "Kerjasama Layanan Core Mulyadadi";

const statusVariant = (status: string) =>
  status === "Disetujui"
    ? "success"
    : status === "Ditolak"
      ? "danger"
      : status === "Berakhir"
        ? "secondary"
        : "warning";

function isoDate(value: string | null) {
  return value ? value.slice(0, 10) : "";
}

function tanggalPanjang(value: string | null) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleDateString("id-ID", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
}

type FormState = {
  jenis: string;
  judul: string;
  mitra: string;
  email: string;
  mulai: string;
  selesai: string;
  tanggalTtd: string;
  status: string;
  berkas: string;
  keterangan: string;
};

const emptyForm: FormState = {
  jenis: "Pihak Ketiga",
  judul: "",
  mitra: "",
  email: "",
  mulai: "",
  selesai: "",
  tanggalTtd: "",
  status: "Diajukan",
  berkas: "",
  keterangan: "",
};

type Tab = "daftar" | "pendaftaran";

export default function KerjasamaPage() {
  const { user } = useSession();
  const isAdmin = user?.role === "ADMIN";
  const [tab, setTab] = useState<Tab>("daftar");

  const { data, isLoading, mutate } = useSWR<Kerjasama[]>("/master/kerjasama", fetcher);
  const { data: desa } = useSWR<Desa>("/desa", fetcher);
  const daftar = data ?? [];

  const [kata, setKata] = useState("");
  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<Kerjasama | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [berkasNama, setBerkasNama] = useState("");
  const [saving, setSaving] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<Kerjasama | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [dokumenOpen, setDokumenOpen] = useState(false);

  const [regEmail, setRegEmail] = useState("");
  const [regKontak, setRegKontak] = useState("");
  const [regHp, setRegHp] = useState("");
  const [regTtd, setRegTtd] = useState("");
  const [regBerkas, setRegBerkas] = useState("");
  const [regBerkasNama, setRegBerkasNama] = useState("");
  const [regSaving, setRegSaving] = useState(false);

  const registrasi = useMemo(
    () =>
      daftar
        .filter((item) => item.mitra === MITRA_LAYANAN || item.jenis === "Penyedia Layanan")
        .sort((a, b) => b.id - a.id)[0] ?? null,
    [daftar],
  );

  const filtered = kata.trim()
    ? daftar.filter((row) =>
        [row.judul, row.mitra, row.jenis, row.email, row.status]
          .filter(Boolean)
          .some((value) =>
            String(value).toLowerCase().includes(kata.trim().toLowerCase()),
          ),
      )
    : daftar;

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

  function openEdit(item: Kerjasama) {
    setEditing(item);
    setForm({
      jenis: item.jenis,
      judul: item.judul,
      mitra: item.mitra ?? "",
      email: item.email ?? "",
      mulai: isoDate(item.mulai),
      selesai: isoDate(item.selesai),
      tanggalTtd: isoDate(item.tanggalTtd),
      status: item.status,
      berkas: item.berkas ?? "",
      keterangan: item.keterangan ?? "",
    });
    setBerkasNama("");
    setFormOpen(true);
  }

  function bacaBerkas(
    file: File | undefined,
    onDone: (data: string, nama: string) => void,
  ) {
    if (!file) return;
    if (file.type !== "application/pdf") {
      toast.error("Dokumen harus berformat PDF");
      return;
    }
    if (file.size > 2 * 1024 * 1024) {
      toast.error("Ukuran berkas maksimal 2 MB");
      return;
    }
    const reader = new FileReader();
    reader.onload = () => {
      onDone(String(reader.result ?? ""), file.name);
    };
    reader.onerror = () => toast.error("Gagal membaca berkas");
    reader.readAsDataURL(file);
  }

  function berkasUrl(value: string | null) {
    if (!value) return "";
    return value.startsWith("data:") ? value : value;
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      const payload = {
        jenis: form.jenis,
        judul: form.judul,
        mitra: form.mitra || null,
        email: form.email || null,
        mulai: form.mulai || null,
        selesai: form.selesai || null,
        tanggalTtd: form.tanggalTtd || null,
        status: form.status,
        berkas: form.berkas || null,
        keterangan: form.keterangan || null,
      };
      if (editing) {
        await apiSend(`/master/kerjasama/${editing.id}`, "PATCH", payload);
        toast.success("Kerjasama diperbarui");
      } else {
        await apiSend("/master/kerjasama", "POST", payload);
        toast.success("Kerjasama ditambahkan");
      }
      setFormOpen(false);
      await mutate();
    } 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(`/master/kerjasama/${deleteTarget.id}`, "DELETE");
      toast.success("Kerjasama dihapus");
      setDeleteTarget(null);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus data");
    } finally {
      setDeleting(false);
    }
  }

  async function simpanRegistrasi(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setRegSaving(true);
    try {
      const keterangan = [
        regKontak ? `Nama kontak: ${regKontak}` : "",
        regHp ? `No HP: ${regHp}` : "",
        "Pendaftaran kerjasama layanan melalui formulir admin.",
      ]
        .filter(Boolean)
        .join("\n");
      await apiSend("/master/kerjasama", "POST", {
        jenis: "Penyedia Layanan",
        judul: JUDUL_LAYANAN,
        mitra: MITRA_LAYANAN,
        email: regEmail,
        tanggalTtd: regTtd || null,
        status: "Diajukan",
        berkas: regBerkas || null,
        keterangan,
      });
      toast.success("Pendaftaran kerjasama terkirim");
      setRegBerkas("");
      setRegBerkasNama("");
      setRegTtd("");
      await mutate();
    } catch (error) {
      toast.error(
        error instanceof ApiError ? error.message : "Gagal mengirim pendaftaran",
      );
    } finally {
      setRegSaving(false);
    }
  }

  function unduhBerkas(item: Kerjasama) {
    const url = berkasUrl(item.berkas);
    if (!url) return;
    const link = document.createElement("a");
    link.href = url;
    link.download = `kerjasama-${item.id}.pdf`;
    link.click();
  }

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Pendaftaran Kerjasama"
        description="Pendaftaran kerjasama layanan desa dan daftar kerjasama dengan pihak ketiga, pemerintah, maupun CSR."
        action={
          tab === "daftar" && isAdmin ? (
            <Button onClick={openCreate}>
              <Plus className="h-4 w-4" />
              Tambah Kerjasama
            </Button>
          ) : undefined
        }
      />

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

      {tab === "pendaftaran" ? (
        <>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <StatCard
              title="Status registrasi"
              value={registrasi?.status ?? "Belum terdaftar"}
              icon={BadgeCheck}
            />
            <StatCard
              title="Mitra layanan"
              value={MITRA_LAYANAN}
              icon={Handshake}
              tone="sky"
            />
            <StatCard
              title="Tanggal penandatanganan"
              value={tanggalPanjang(registrasi?.tanggalTtd ?? null)}
              icon={FileText}
              tone="amber"
            />
            <StatCard
              title="Dokumen"
              value={registrasi?.berkas ? "Terunggah" : "Belum ada"}
              icon={Upload}
              tone="violet"
            />
          </div>

          <Card>
            <CardHeader>
              <CardTitle>Pendaftaran Kerjasama {MITRA_LAYANAN}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm leading-relaxed text-muted-foreground">
              <p>
                Layanan {MITRA_LAYANAN} yang bersifat berbayar memerlukan
                kesepakatan kerjasama pengadaan antara desa dan penyedia layanan
                agar sesuai dengan peraturan pengadaan yang berlaku.
              </p>
              <p>
                Setelah kesepakatan berlaku, desa terdaftar sebagai desa digital
                dan berhak mengakses layanan berbayar serta program peningkatan
                desa digital lainnya.
              </p>
              <div className="rounded-lg bg-muted/50 p-3 text-foreground">
                <p className="font-medium">Langkah pendaftaran</p>
                <ol className="mt-1 list-decimal space-y-1 pl-5">
                  <li>Cetak dokumen kesepakatan kerjasama.</li>
                  <li>Isi tanggal penandatanganan.</li>
                  <li>Tandatangani oleh Kepala Desa di atas meterai.</li>
                  <li>Pindai dokumen yang telah ditandatangani.</li>
                  <li>Unggah hasil pindai melalui formulir di bawah.</li>
                  <li>Simpan dokumen asli di arsip kantor desa.</li>
                </ol>
              </div>
              <div>
                <Button variant="outline" size="sm" onClick={() => setDokumenOpen(true)}>
                  <Printer className="h-4 w-4" />
                  Cetak Dokumen Kesepakatan
                </Button>
              </div>
            </CardContent>
          </Card>

          {registrasi && (
            <Card>
              <CardContent className="flex flex-wrap items-center justify-between gap-3 p-4">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-emerald-600" />
                  <div>
                    <p className="text-sm font-medium">
                      Pendaftaran tercatat dengan status {registrasi.status}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      Email: {registrasi.email ?? "-"} · Tanggal tanda tangan:{" "}
                      {tanggalPanjang(registrasi.tanggalTtd)}
                    </p>
                  </div>
                </div>
                {registrasi.berkas && (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => unduhBerkas(registrasi)}
                  >
                    <Download className="h-4 w-4" />
                    Unduh Dokumen
                  </Button>
                )}
              </CardContent>
            </Card>
          )}

          <Card>
            <CardHeader>
              <CardTitle>Form Pendaftaran Kerjasama</CardTitle>
            </CardHeader>
            <CardContent>
              <form onSubmit={simpanRegistrasi} className="space-y-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <Field label="Email" required>
                    <Input
                      type="email"
                      required
                      value={regEmail}
                      onChange={(event) => setRegEmail(event.target.value)}
                      placeholder="Gunakan email yang valid"
                    />
                  </Field>
                  <Field label="Status registrasi">
                    <Input value={registrasi?.status ?? "Belum terdaftar"} readOnly />
                  </Field>
                  <Field label="Kode Desa">
                    <Input value={desa?.kodeDesa ?? ""} readOnly />
                  </Field>
                  <Field label="Domain Desa">
                    <Input value={desa?.website ?? ""} readOnly />
                  </Field>
                  <Field label="Nama kontak" required>
                    <Input
                      required
                      value={regKontak}
                      onChange={(event) => setRegKontak(event.target.value)}
                      placeholder={desa?.kontakNama ?? "Nama perangkat desa"}
                    />
                  </Field>
                  <Field label="No HP kontak" required>
                    <Input
                      required
                      value={regHp}
                      onChange={(event) => setRegHp(event.target.value)}
                      placeholder={desa?.kontakHp ?? "08xxxxxxxxxx"}
                    />
                  </Field>
                  <Field label="Tanggal penandatanganan" required>
                    <Input
                      type="date"
                      required
                      value={regTtd}
                      onChange={(event) => setRegTtd(event.target.value)}
                    />
                  </Field>
                  <Field label="Dokumen kesepakatan (PDF)" required>
                    <div className="space-y-1.5">
                      <Input
                        type="file"
                        accept="application/pdf"
                        required={!regBerkas}
                        onChange={(event) =>
                          bacaBerkas(event.target.files?.[0], (data, nama) => {
                            setRegBerkas(data);
                            setRegBerkasNama(nama);
                          })
                        }
                      />
                      {regBerkasNama && (
                        <p className="text-xs text-muted-foreground">
                          Terpilih: {regBerkasNama}
                        </p>
                      )}
                    </div>
                  </Field>
                </div>
                <p className="rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground">
                  Dokumen PDF disimpan pada data kerjasama desa dan dapat diunduh
                  kembali kapan saja. Ukuran maksimal 2 MB.
                </p>
                <DialogFooter>
                  <Button
                    type="reset"
                    variant="outline"
                    onClick={() => {
                      setRegEmail("");
                      setRegKontak("");
                      setRegHp("");
                      setRegTtd("");
                      setRegBerkas("");
                      setRegBerkasNama("");
                    }}
                  >
                    Batal
                  </Button>
                  <Button type="submit" disabled={regSaving}>
                    {regSaving ? "Mengirim…" : "Kirim Pendaftaran"}
                  </Button>
                </DialogFooter>
              </form>
            </CardContent>
          </Card>
        </>
      ) : (
        <>
          <div className="grid gap-4 sm:grid-cols-3">
            <StatCard title="Total kerjasama" value={daftar.length} icon={Handshake} />
            <StatCard
              title="Disetujui"
              value={daftar.filter((item) => item.status === "Disetujui").length}
              icon={BadgeCheck}
              tone="sky"
            />
            <StatCard
              title="Diajukan"
              value={daftar.filter((item) => item.status === "Diajukan").length}
              icon={FileText}
              tone="amber"
            />
          </div>

          <Card>
            <CardContent className="space-y-4 p-4 md:p-5">
              <div 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={kata}
                  onChange={(event) => setKata(event.target.value)}
                  placeholder="Cari judul, mitra, atau email…"
                  className="pl-9"
                />
              </div>

              <div className="overflow-x-auto rounded-lg border border-border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Kerjasama</TableHead>
                      <TableHead>Jenis</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Tanggal TTD</TableHead>
                      <TableHead>Periode</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Berkas</TableHead>
                      {isAdmin && <TableHead className="text-right">Aksi</TableHead>}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {isLoading && (
                      <TableRow>
                        <TableCell colSpan={8} className="py-8 text-center text-sm text-muted-foreground">
                          Memuat data…
                        </TableCell>
                      </TableRow>
                    )}
                    {!isLoading &&
                      filtered.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell>
                            <div className="font-medium">{item.judul}</div>
                            <div className="text-xs text-muted-foreground">
                              {item.mitra ?? "-"}
                            </div>
                          </TableCell>
                          <TableCell>
                            <Badge variant="secondary">{item.jenis}</Badge>
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">
                            {item.email ?? "-"}
                          </TableCell>
                          <TableCell className="text-sm">
                            {tanggalPanjang(item.tanggalTtd)}
                          </TableCell>
                          <TableCell className="text-xs text-muted-foreground">
                            {item.mulai ? isoDate(item.mulai) : "-"} s.d.{" "}
                            {item.selesai ? isoDate(item.selesai) : "-"}
                          </TableCell>
                          <TableCell>
                            <Badge variant={statusVariant(item.status)}>
                              {item.status}
                            </Badge>
                          </TableCell>
                          <TableCell>
                            {item.berkas ? (
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => unduhBerkas(item)}
                              >
                                <Download className="h-4 w-4" />
                                Unduh
                              </Button>
                            ) : (
                              <span className="text-xs text-muted-foreground">-</span>
                            )}
                          </TableCell>
                          {isAdmin && (
                            <TableCell className="text-right">
                              <div className="flex justify-end gap-1">
                                <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-8 w-8"
                                  onClick={() => openEdit(item)}
                                  aria-label="Ubah"
                                >
                                  <Pencil 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"
                                >
                                  <Trash2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </TableCell>
                          )}
                        </TableRow>
                      ))}
                    {!isLoading && !filtered.length && (
                      <TableRow>
                        <TableCell colSpan={8} className="py-8 text-center text-sm text-muted-foreground">
                          Belum ada data kerjasama.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </>
      )}

      <Dialog open={formOpen} onOpenChange={setFormOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
          <DialogHeader>
            <DialogTitle>{editing ? "Ubah Kerjasama" : "Tambah Kerjasama"}</DialogTitle>
            <DialogDescription>
              Catat kesepakatan kerjasama desa beserta dokumen pendukungnya.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={save} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <Field label="Jenis kerjasama">
                <Select
                  value={form.jenis}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, jenis: event.target.value }))
                  }
                >
                  {JENIS_OPTIONS.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </Select>
              </Field>
              <Field label="Status">
                <Select
                  value={form.status}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, status: event.target.value }))
                  }
                >
                  {STATUS_OPTIONS.map((option) => (
                    <option key={option} value={option}>
                      {option}
                    </option>
                  ))}
                </Select>
              </Field>
              <div className="sm:col-span-2">
                <Field label="Judul kerjasama" required>
                  <Input
                    required
                    value={form.judul}
                    onChange={(event) =>
                      setForm((current) => ({ ...current, judul: event.target.value }))
                    }
                  />
                </Field>
              </div>
              <Field label="Mitra">
                <Input
                  value={form.mitra}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, mitra: event.target.value }))
                  }
                />
              </Field>
              <Field label="Email mitra">
                <Input
                  type="email"
                  value={form.email}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, email: event.target.value }))
                  }
                />
              </Field>
              <Field label="Mulai">
                <Input
                  type="date"
                  value={form.mulai}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, mulai: event.target.value }))
                  }
                />
              </Field>
              <Field label="Selesai">
                <Input
                  type="date"
                  value={form.selesai}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, selesai: event.target.value }))
                  }
                />
              </Field>
              <Field label="Tanggal penandatanganan">
                <Input
                  type="date"
                  value={form.tanggalTtd}
                  onChange={(event) =>
                    setForm((current) => ({ ...current, tanggalTtd: event.target.value }))
                  }
                />
              </Field>
              <Field label="Berkas (PDF)">
                <div className="space-y-1.5">
                  <Input
                    type="file"
                    accept="application/pdf"
                    onChange={(event) =>
                      bacaBerkas(event.target.files?.[0], (data, nama) => {
                        setForm((current) => ({ ...current, berkas: data }));
                        setBerkasNama(nama);
                      })
                    }
                  />
                  {berkasNama && (
                    <p className="text-xs text-muted-foreground">Terpilih: {berkasNama}</p>
                  )}
                  {!berkasNama && form.berkas && (
                    <p className="text-xs text-muted-foreground">
                      Dokumen sudah terlampir.{" "}
                      <button
                        type="button"
                        className="text-primary underline"
                        onClick={() =>
                          setForm((current) => ({ ...current, berkas: "" }))
                        }
                      >
                        Hapus
                      </button>
                    </p>
                  )}
                </div>
              </Field>
              <div className="sm:col-span-2">
                <Field label="Keterangan">
                  <Textarea
                    rows={3}
                    value={form.keterangan}
                    onChange={(event) =>
                      setForm((current) => ({
                        ...current,
                        keterangan: event.target.value,
                      }))
                    }
                  />
                </Field>
              </div>
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setFormOpen(false)}>
                Batal
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? "Menyimpan…" : "Simpan"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={dokumenOpen} onOpenChange={setDokumenOpen}>
        <DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Dokumen Kesepakatan Kerjasama</DialogTitle>
            <DialogDescription>
              Cetak dokumen ini, tandatangani Kepala Desa, lalu unggah hasil pindainya.
            </DialogDescription>
          </DialogHeader>
          <DokumenKerjasama desa={desa} />
          <DialogFooter>
            <Button variant="outline" onClick={() => window.print()}>
              <Printer className="h-4 w-4" />
              Cetak
            </Button>
            <Button variant="outline" onClick={() => setDokumenOpen(false)}>
              Tutup
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus kerjasama?</DialogTitle>
            <DialogDescription>
              Data <span className="font-semibold">{deleteTarget?.judul}</span> 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 DokumenKerjasama({ desa }: { desa?: Desa }) {
  const hariIni = new Date().toLocaleDateString("id-ID", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
  const namaDesa = (desa?.nama ?? "Mulyadadi").replace(/^Desa\s+/i, "");
  return (
    <div className="space-y-4 rounded-lg border bg-white p-6 text-sm leading-relaxed text-slate-800">
      <div className="text-center">
        <p className="font-semibold uppercase">Kesepakatan Kerjasama</p>
        <p className="text-xs">Nomor: ......../KS/......../........</p>
      </div>
      <p>
        Pada hari ini, {hariIni}, yang bertanda tangan di bawah ini:
      </p>
      <ol className="list-decimal space-y-2 pl-5">
        <li>
          <span className="font-semibold">
            {desa?.kepalaDesa ?? "Kepala Desa"}
          </span>{" "}
          selaku Kepala Desa {namaDesa}, Kecamatan{" "}
          {desa?.kecamatan ?? "-"}, Kabupaten {desa?.kabupaten ?? "-"}, Provinsi{" "}
          {desa?.provinsi ?? "-"}, bertindak untuk dan atas nama Pemerintah Desa,
          selanjutnya disebut <span className="font-semibold">PIHAK KESATU</span>.
        </li>
        <li>
          <span className="font-semibold">{MITRA_LAYANAN}</span>, selaku penyedia
          layanan sistem informasi desa, selanjutnya disebut{" "}
          <span className="font-semibold">PIHAK KEDUA</span>.
        </li>
      </ol>
      <p>
        PIHAK KESATU dan PIHAK KEDUA sepakat untuk mengadakan kerjasama pengadaan
        layanan sistem informasi desa dengan ketentuan sebagai berikut.
      </p>
      <div className="space-y-2">
        <p className="font-semibold">Pasal 1 — Maksud dan Tujuan</p>
        <p>
          Kerjasama ini dimaksudkan untuk mendukung penyelenggaraan pemerintahan
          dan pelayanan desa berbasis teknologi informasi secara tertib dan sesuai
          ketentuan pengadaan yang berlaku.
        </p>
      </div>
      <div className="space-y-2">
        <p className="font-semibold">Pasal 2 — Ruang Lingkup</p>
        <p>
          Ruang lingkup meliputi penyediaan aplikasi, pendampingan, dan layanan
          pendukung lain sesuai kebutuhan Pemerintah Desa.
        </p>
      </div>
      <div className="space-y-2">
        <p className="font-semibold">Pasal 3 — Hak dan Kewajiban</p>
        <p>
          PIHAK KESATU berhak menerima layanan dan berkewajiban memenuhi
          kewajiban administrasi serta pembayaran sesuai kesepakatan. PIHAK KEDUA
          berkewajiban menyediakan layanan sesuai standar yang disepakati.
        </p>
      </div>
      <div className="space-y-2">
        <p className="font-semibold">Pasal 4 — Jangka Waktu</p>
        <p>
          Kesepakatan ini berlaku sejak tanggal ditandatangani sampai dengan
          berakhirnya masa layanan yang disepakati.
        </p>
      </div>
      <div className="space-y-2">
        <p className="font-semibold">Pasal 5 — Penutup</p>
        <p>
          Hal-hal yang belum diatur akan ditentukan kemudian oleh para pihak
          melalui musyawarah.
        </p>
      </div>
      <p>
        Demikian kesepakatan ini dibuat dengan itikad baik untuk dipergunakan
        sebagaimana mestinya.
      </p>
      <div className="grid grid-cols-2 gap-8 pt-6 text-center">
        <div>
          <p>PIHAK KESATU</p>
          <p className="mt-16 font-semibold underline">
            {desa?.kepalaDesa ?? "Kepala Desa"}
          </p>
          <p className="text-xs">Kepala Desa {namaDesa}</p>
        </div>
        <div>
          <p>PIHAK KEDUA</p>
          <p className="mt-16 font-semibold underline">{MITRA_LAYANAN}</p>
          <p className="text-xs">Penyedia Layanan</p>
        </div>
      </div>
      <p className="flex items-center gap-1 text-xs text-slate-500">
        <Info className="h-3.5 w-3.5" />
        Bagi dokumen melalui proses pindai setelah ditandatangani di atas meterai.
      </p>
    </div>
  );
}

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