"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import useSWR from "swr";
import {
  Building2,
  ExternalLink,
  Globe2,
  Landmark,
  Mail,
  MapPinned,
  MapPin,
  Network,
  Phone,
  Save,
  ShieldCheck,
  Sparkles,
  Trees,
  X,
} from "lucide-react";
import { toast } from "sonner";
import type { Desa } from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { parsePath } from "@/lib/gpx";
import { useSession } from "@/lib/use-session";
import { WilayahSync } from "@/components/admin/wilayah-sync";
import { PageHeader } from "@/components/page-header";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const PetaLokasiKantor = dynamic(
  () => import("@/components/public/peta-desa").then((mod) => mod.PetaLokasiKantor),
  { ssr: false },
);
const PetaWilayahDesa = dynamic(
  () => import("@/components/public/peta-desa").then((mod) => mod.PetaWilayahDesa),
  { ssr: false },
);
const PetaPratinjau = dynamic(
  () => import("@/components/public/peta-desa").then((mod) => mod.PetaTitik),
  { ssr: false },
);

type FormState = Record<string, string>;

const empty: FormState = {
  nama: "",
  kodeDesa: "",
  kodeDesaBps: "",
  kodeKecamatan: "",
  kecamatan: "",
  namaCamat: "",
  nipCamat: "",
  kodeKabupaten: "",
  kabupaten: "",
  kodeProvinsi: "",
  provinsi: "",
  alamat: "",
  kantorDesa: "",
  kodePos: "",
  telepon: "",
  nomorOperator: "",
  email: "",
  website: "",
  kepalaDesa: "",
  nipKepalaDesa: "",
  logo: "",
  ukuranLogo: "",
  kontakNama: "",
  kontakHp: "",
  kontakJabatan: "",
  luasWilayah: "",
  petaLat: "",
  petaLng: "",
  visi: "",
  misi: "",
  sejarah: "",
  jenisTanah: "",
  topografi: "",
  sumberDayaAlam: "",
  floraFauna: "",
  rawanBencana: "",
  kearifanLokal: "",
  jenisJaringan: "",
  providerInternet: "",
  cakupanWilayah: "",
  kecepatanInternet: "",
  aksesPublik: "",
  statusDesaAdat: "",
  lembagaAdat: "",
  strukturAdat: "",
  wilayahAdat: "",
  peraturanAdat: "",
  regulasiAdat: "",
  dokumenRegulasiAdat: "",
};

const TEXT_FIELDS = Object.keys(empty).filter(
  (key) => !["luasWilayah", "ukuranLogo", "petaLat", "petaLng"].includes(key),
);
const NUMBER_FIELDS = ["luasWilayah", "ukuranLogo", "petaLat", "petaLng"];

function desaToForm(desa: Desa): FormState {
  const form: FormState = { ...empty };
  for (const key of Object.keys(empty)) {
    const value = (desa as unknown as Record<string, unknown>)[key];
    form[key] = value == null ? "" : String(value);
  }
  return form;
}

export default function IdentitasDesaPage() {
  const router = useRouter();
  const { user } = useSession();
  const isAdmin = user?.role === "ADMIN";
  const { data: desa, isLoading, mutate } = useSWR<Desa>("/desa", fetcher);
  const [form, setForm] = useState<FormState>(empty);
  const [mode, setMode] = useState<"view" | "edit">("view");
  const [tab, setTab] = useState<"umum" | "profil">("umum");
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (!desa) return;
    setForm(desaToForm(desa));
  }, [desa]);

  function update(key: string, value: string) {
    setForm((current) => ({ ...current, [key]: value }));
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSaving(true);
    try {
      const payload: Record<string, unknown> = {};
      for (const key of TEXT_FIELDS) {
        payload[key] = form[key] === "" ? null : form[key];
      }
      for (const key of NUMBER_FIELDS) {
        payload[key] = form[key] === "" ? null : Number(form[key]);
      }
      await apiSend("/desa", "PUT", payload);
      toast.success("Identitas desa diperbarui");
      setMode("view");
      await mutate();
      router.refresh();
    } catch (error) {
      toast.error(
        error instanceof ApiError ? error.message : "Gagal menyimpan identitas desa",
      );
    } finally {
      setSaving(false);
    }
  }

  if (isLoading || !desa) {
    return (
      <div className="space-y-4">
        <div className="h-16 animate-pulse rounded-xl bg-muted" />
        <div className="h-96 animate-pulse rounded-xl bg-muted" />
      </div>
    );
  }

  const latForm = Number(form.petaLat);
  const lngForm = Number(form.petaLng);
  const titikForm =
    form.petaLat !== "" &&
    form.petaLng !== "" &&
    Number.isFinite(latForm) &&
    Number.isFinite(lngForm)
      ? ([latForm, lngForm] as [number, number])
      : null;

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Identitas Desa"
        description="Data identitas, profil, potensi, dan lokasi kantor Desa Mulyadadi."
        action={
          isAdmin ? (
            mode === "view" ? (
              <Button onClick={() => setMode("edit")}>
                <Building2 className="h-4 w-4" />
                Ubah Data
              </Button>
            ) : (
              <div className="flex gap-2">
                <Button variant="outline" onClick={() => setMode("view")}>
                  <X className="h-4 w-4" />
                  Batal
                </Button>
                <Button form="form-identitas" type="submit" disabled={saving}>
                  <Save className="h-4 w-4" />
                  {saving ? "Menyimpan…" : "Simpan"}
                </Button>
              </div>
            )
          ) : undefined
        }
      />

      {mode === "edit" ? (
        <form id="form-identitas" onSubmit={save} className="space-y-5">
          <WilayahSync
            onApply={(values) => setForm((current) => ({ ...current, ...values }))}
          />

          <Card>
            <SectionTitle icon={Building2} title="Identitas Wilayah" />
            <CardContent className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
              <Field label="Nama desa" required>
                <Input
                  required
                  value={form.nama}
                  onChange={(event) => update("nama", event.target.value)}
                />
              </Field>
              <Field label="Kode desa">
                <Input
                  value={form.kodeDesa}
                  onChange={(event) => update("kodeDesa", event.target.value)}
                  placeholder="33.01.18.2007"
                />
              </Field>
              <Field label="Kode desa BPS">
                <Input
                  value={form.kodeDesaBps}
                  onChange={(event) => update("kodeDesaBps", event.target.value)}
                />
              </Field>
              <Field label="Kecamatan" required>
                <Input
                  required
                  value={form.kecamatan}
                  onChange={(event) => update("kecamatan", event.target.value)}
                />
              </Field>
              <Field label="Kode kecamatan">
                <Input
                  value={form.kodeKecamatan}
                  onChange={(event) => update("kodeKecamatan", event.target.value)}
                />
              </Field>
              <Field label="Nama camat">
                <Input
                  value={form.namaCamat}
                  onChange={(event) => update("namaCamat", event.target.value)}
                />
              </Field>
              <Field label="NIP camat">
                <Input
                  value={form.nipCamat}
                  onChange={(event) => update("nipCamat", event.target.value)}
                />
              </Field>
              <Field label="Kabupaten" required>
                <Input
                  required
                  value={form.kabupaten}
                  onChange={(event) => update("kabupaten", event.target.value)}
                />
              </Field>
              <Field label="Kode kabupaten">
                <Input
                  value={form.kodeKabupaten}
                  onChange={(event) => update("kodeKabupaten", event.target.value)}
                />
              </Field>
              <Field label="Provinsi" required>
                <Input
                  required
                  value={form.provinsi}
                  onChange={(event) => update("provinsi", event.target.value)}
                />
              </Field>
              <Field label="Kode provinsi">
                <Input
                  value={form.kodeProvinsi}
                  onChange={(event) => update("kodeProvinsi", event.target.value)}
                />
              </Field>
              <Field label="Luas wilayah (Ha)">
                <Input
                  type="number"
                  min={0}
                  step="0.01"
                  value={form.luasWilayah}
                  onChange={(event) => update("luasWilayah", event.target.value)}
                />
              </Field>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={Landmark} title="Kantor & Kontak" />
            <CardContent className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
              <div className="sm:col-span-2 xl:col-span-3">
                <Field label="Alamat kantor desa">
                  <Input
                    value={form.alamat}
                    onChange={(event) => update("alamat", event.target.value)}
                  />
                </Field>
              </div>
              <Field label="Kode pos">
                <Input
                  value={form.kodePos}
                  onChange={(event) => update("kodePos", event.target.value)}
                />
              </Field>
              <Field label="Telepon">
                <Input
                  value={form.telepon}
                  onChange={(event) => update("telepon", event.target.value)}
                />
              </Field>
              <Field label="Nomor operator">
                <Input
                  value={form.nomorOperator}
                  onChange={(event) => update("nomorOperator", event.target.value)}
                />
              </Field>
              <Field label="Email">
                <Input
                  type="email"
                  value={form.email}
                  onChange={(event) => update("email", event.target.value)}
                />
              </Field>
              <Field label="Website">
                <Input
                  value={form.website}
                  onChange={(event) => update("website", event.target.value)}
                  placeholder="https://mulyadadi.desa.id"
                />
              </Field>
              <Field label="Ukuran logo (px)">
                <Input
                  type="number"
                  min={0}
                  value={form.ukuranLogo}
                  onChange={(event) => update("ukuranLogo", event.target.value)}
                />
              </Field>
              <Field label="Nama kontak">
                <Input
                  value={form.kontakNama}
                  onChange={(event) => update("kontakNama", event.target.value)}
                />
              </Field>
              <Field label="Jabatan kontak">
                <Input
                  value={form.kontakJabatan}
                  onChange={(event) => update("kontakJabatan", event.target.value)}
                />
              </Field>
              <Field label="HP kontak">
                <Input
                  value={form.kontakHp}
                  onChange={(event) => update("kontakHp", event.target.value)}
                />
              </Field>
              <div className="sm:col-span-2 xl:col-span-3">
                <Field label="URL / data logo desa">
                  <Input
                    value={form.logo}
                    onChange={(event) => update("logo", event.target.value)}
                    placeholder="/logo-desa.png atau data:image/png;base64,…"
                  />
                </Field>
              </div>
              <div className="sm:col-span-2 xl:col-span-3">
                <Field label="URL / data foto kantor desa">
                  <Input
                    value={form.kantorDesa}
                    onChange={(event) => update("kantorDesa", event.target.value)}
                    placeholder="/kantor-desa.jpg"
                  />
                </Field>
              </div>
              <Field label="Nama kepala desa">
                <Input
                  value={form.kepalaDesa}
                  onChange={(event) => update("kepalaDesa", event.target.value)}
                />
              </Field>
              <Field label="NIP kepala desa">
                <Input
                  value={form.nipKepalaDesa}
                  onChange={(event) => update("nipKepalaDesa", event.target.value)}
                />
              </Field>
              <Field label="Latitude kantor">
                <Input
                  type="number"
                  step="0.0000001"
                  value={form.petaLat}
                  onChange={(event) => update("petaLat", event.target.value)}
                />
              </Field>
              <Field label="Longitude kantor">
                <Input
                  type="number"
                  step="0.0000001"
                  value={form.petaLng}
                  onChange={(event) => update("petaLng", event.target.value)}
                />
              </Field>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={MapPin} title="Pratinjau Lokasi Kantor" />
            <CardContent className="space-y-3">
              {titikForm ? (
                <>
                  <PetaPratinjau
                    lat={titikForm[0]}
                    lng={titikForm[1]}
                    zoom={desa.petaZoom ?? 16}
                    warna={desa.temaPrimer}
                    label={`Kantor ${form.nama || "Desa"}`}
                    className="h-[300px] rounded-xl border"
                  />
                  <p className="text-xs text-muted-foreground">
                    Titik ikut bergerak begitu Latitude atau Longitude diketik. Untuk menentukan
                    posisi dengan klik langsung di peta, buka halaman Peta Lokasi Kantor.
                  </p>
                </>
              ) : (
                <div className="rounded-xl border border-dashed py-10 text-center text-sm text-muted-foreground">
                  Isi Latitude dan Longitude di atas untuk melihat posisi kantor.
                </div>
              )}
              <Button asChild variant="outline" size="sm">
                <Link href="/admin/pengaturan/peta-kantor">Buka Peta Lokasi Kantor</Link>
              </Button>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={Sparkles} title="Profil & Narasi" />
            <CardContent className="space-y-4">
              <Field label="Visi">
                <Textarea
                  rows={3}
                  value={form.visi}
                  onChange={(event) => update("visi", event.target.value)}
                />
              </Field>
              <Field label="Misi">
                <Textarea
                  rows={5}
                  value={form.misi}
                  onChange={(event) => update("misi", event.target.value)}
                  placeholder="Satu misi per baris"
                />
              </Field>
              <Field label="Sejarah singkat">
                <Textarea
                  rows={5}
                  value={form.sejarah}
                  onChange={(event) => update("sejarah", event.target.value)}
                />
              </Field>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={Trees} title="Potensi Sumber Daya" />
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <Field label="Jenis tanah">
                <Input
                  value={form.jenisTanah}
                  onChange={(event) => update("jenisTanah", event.target.value)}
                />
              </Field>
              <Field label="Topografi">
                <Input
                  value={form.topografi}
                  onChange={(event) => update("topografi", event.target.value)}
                />
              </Field>
              <Field label="Sumber daya alam">
                <Textarea
                  rows={3}
                  value={form.sumberDayaAlam}
                  onChange={(event) => update("sumberDayaAlam", event.target.value)}
                />
              </Field>
              <Field label="Flora & fauna">
                <Textarea
                  rows={3}
                  value={form.floraFauna}
                  onChange={(event) => update("floraFauna", event.target.value)}
                />
              </Field>
              <Field label="Rawan bencana">
                <Input
                  value={form.rawanBencana}
                  onChange={(event) => update("rawanBencana", event.target.value)}
                  placeholder="Banjir, longsor"
                />
              </Field>
              <Field label="Kearifan lokal">
                <Textarea
                  rows={3}
                  value={form.kearifanLokal}
                  onChange={(event) => update("kearifanLokal", event.target.value)}
                />
              </Field>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={Network} title="Internet & Komunikasi" />
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <Field label="Jenis jaringan">
                <Input
                  value={form.jenisJaringan}
                  onChange={(event) => update("jenisJaringan", event.target.value)}
                  placeholder="4G / Fiber"
                />
              </Field>
              <Field label="Provider internet">
                <Input
                  value={form.providerInternet}
                  onChange={(event) => update("providerInternet", event.target.value)}
                />
              </Field>
              <Field label="Cakupan wilayah">
                <Textarea
                  rows={2}
                  value={form.cakupanWilayah}
                  onChange={(event) => update("cakupanWilayah", event.target.value)}
                />
              </Field>
              <Field label="Kecepatan internet">
                <Input
                  value={form.kecepatanInternet}
                  onChange={(event) => update("kecepatanInternet", event.target.value)}
                />
              </Field>
              <div className="sm:col-span-2">
                <Field label="Akses publik">
                  <Textarea
                    rows={3}
                    value={form.aksesPublik}
                    onChange={(event) => update("aksesPublik", event.target.value)}
                  />
                </Field>
              </div>
            </CardContent>
          </Card>

          <Card>
            <SectionTitle icon={ShieldCheck} title="Desa Adat" />
            <CardContent className="grid gap-4 sm:grid-cols-2">
              <Field label="Status desa adat">
                <Input
                  value={form.statusDesaAdat}
                  onChange={(event) => update("statusDesaAdat", event.target.value)}
                />
              </Field>
              <Field label="Lembaga adat">
                <Input
                  value={form.lembagaAdat}
                  onChange={(event) => update("lembagaAdat", event.target.value)}
                />
              </Field>
              <div className="sm:col-span-2">
                <Field label="Struktur adat">
                  <Textarea
                    rows={3}
                    value={form.strukturAdat}
                    onChange={(event) => update("strukturAdat", event.target.value)}
                  />
                </Field>
              </div>
              <Field label="Wilayah adat">
                <Textarea
                  rows={3}
                  value={form.wilayahAdat}
                  onChange={(event) => update("wilayahAdat", event.target.value)}
                />
              </Field>
              <Field label="Peraturan adat">
                <Textarea
                  rows={3}
                  value={form.peraturanAdat}
                  onChange={(event) => update("peraturanAdat", event.target.value)}
                />
              </Field>
              <Field label="Regulasi adat">
                <Input
                  value={form.regulasiAdat}
                  onChange={(event) => update("regulasiAdat", event.target.value)}
                />
              </Field>
              <Field label="Dokumen regulasi adat">
                <Input
                  value={form.dokumenRegulasiAdat}
                  onChange={(event) => update("dokumenRegulasiAdat", event.target.value)}
                />
              </Field>
            </CardContent>
          </Card>

          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={() => setMode("view")}>
              Batal
            </Button>
            <Button type="submit" disabled={saving}>
              <Save className="h-4 w-4" />
              {saving ? "Menyimpan…" : "Simpan Perubahan"}
            </Button>
          </div>
        </form>
      ) : (
        <>
          <Card className="overflow-hidden">
            <div className="bg-brand-deep px-6 py-7 text-white">
              <div className="flex flex-col gap-5 sm:flex-row sm:items-center">
                <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-white/10 ring-1 ring-white/25">
                  {desa.logo ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={desa.logo}
                      alt={`Logo ${desa.nama}`}
                      className="h-full w-full object-contain p-1.5"
                    />
                  ) : (
                    <Landmark className="h-9 w-9 text-white/70" />
                  )}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="text-[11px] uppercase tracking-[0.18em] text-white/60">
                    Pemerintah Kabupaten {desa.kabupaten}
                  </div>
                  <h2 className="mt-1 text-2xl font-bold leading-tight sm:text-3xl">
                    Desa {desa.nama.replace(/^Desa\s+/i, "")}
                  </h2>
                  <div className="mt-1 text-sm text-white/75">
                    Kecamatan {desa.kecamatan} · {desa.kabupaten} · {desa.provinsi}
                  </div>
                  <div className="mt-3 flex flex-wrap gap-1.5">
                    {desa.kodeDesa && (
                      <span className="rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium">
                        Kode {desa.kodeDesa}
                      </span>
                    )}
                    {desa.kodeDesaBps && (
                      <span className="rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium">
                        BPS {desa.kodeDesaBps}
                      </span>
                    )}
                    {desa.luasWilayah != null && (
                      <span className="rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium">
                        Luas {desa.luasWilayah} Ha
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <CardContent className="grid gap-3 border-t p-4 text-sm sm:grid-cols-2 lg:grid-cols-4">
              <ContactItem icon={MapPin} label="Alamat" value={desa.alamat} />
              <ContactItem
                icon={Phone}
                label="Telepon"
                value={desa.telepon ?? desa.nomorOperator}
              />
              <ContactItem icon={Mail} label="Email" value={desa.email} />
              <ContactItem icon={Globe2} label="Website" value={desa.website} />
            </CardContent>
          </Card>

          <div className="flex gap-2 border-b">
            {[
              { id: "umum" as const, label: "Umum", icon: Building2 },
              { id: "profil" as const, label: "Profil", icon: Sparkles },
            ].map((item) => (
              <button
                key={item.id}
                type="button"
                onClick={() => setTab(item.id)}
                className={cn(
                  "-mb-px flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors",
                  tab === item.id
                    ? "border-primary text-primary"
                    : "border-transparent text-muted-foreground hover:text-foreground",
                )}
              >
                <item.icon className="h-4 w-4" />
                {item.label}
              </button>
            ))}
          </div>

          {tab === "umum" ? (
            <div className="grid gap-5 lg:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle className="text-base">Identitas Wilayah</CardTitle>
                </CardHeader>
                <CardContent className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
                  <Description label="Nama desa" value={desa.nama.replace(/^Desa\s+/i, "")} />
                  <Description label="Kode desa" value={desa.kodeDesa} />
                  <Description label="Kode BPS" value={desa.kodeDesaBps} />
                  <Description label="Luas wilayah" value={desa.luasWilayah ? `${desa.luasWilayah} Ha` : null} />
                  <Description label="Kecamatan" value={desa.kecamatan} />
                  <Description label="Kode kecamatan" value={desa.kodeKecamatan} />
                  <Description label="Camat" value={desa.namaCamat} />
                  <Description label="NIP camat" value={desa.nipCamat} />
                  <Description label="Kabupaten" value={desa.kabupaten} />
                  <Description label="Kode kabupaten" value={desa.kodeKabupaten} />
                  <Description label="Provinsi" value={desa.provinsi} />
                  <Description label="Kode provinsi" value={desa.kodeProvinsi} />
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-base">Kantor & Kontak</CardTitle>
                </CardHeader>
                <CardContent className="grid gap-x-6 gap-y-3 sm:grid-cols-2">
                  <div className="sm:col-span-2">
                    <Description label="Alamat kantor" value={desa.alamat} />
                  </div>
                  <Description label="Kode pos" value={desa.kodePos} />
                  <Description label="Telepon" value={desa.telepon} />
                  <Description label="Nomor operator" value={desa.nomorOperator} />
                  <Description label="Email" value={desa.email} />
                  <Description label="Website" value={desa.website} />
                  <Description label="Kepala desa" value={desa.kepalaDesa} />
                  <Description label="NIP kepala desa" value={desa.nipKepalaDesa} />
                  <Description label="Kontak" value={desa.kontakNama} />
                  <Description label="Jabatan kontak" value={desa.kontakJabatan} />
                  <Description label="HP kontak" value={desa.kontakHp} />
                </CardContent>
              </Card>

              <Card className="lg:col-span-2">
                <CardHeader className="flex-row items-center justify-between space-y-0">
                  <CardTitle className="flex items-center gap-2 text-base">
                    <MapPin className="h-4 w-4 text-primary" />
                    Lokasi Kantor Desa
                  </CardTitle>
                  <div className="flex items-center gap-3">
                    {desa.petaLat != null && desa.petaLng != null && (
                      <a
                        href={`https://www.openstreetmap.org/?mlat=${desa.petaLat}&mlon=${desa.petaLng}#map=16/${desa.petaLat}/${desa.petaLng}`}
                        target="_blank"
                        rel="noreferrer"
                        className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
                      >
                        Buka peta
                        <ExternalLink className="h-3 w-3" />
                      </a>
                    )}
                    {isAdmin && (
                      <Button asChild size="sm" variant="outline">
                        <Link href="/admin/pengaturan/peta-kantor">Atur Lokasi</Link>
                      </Button>
                    )}
                  </div>
                </CardHeader>
                <CardContent>
                  {desa.petaLat != null && desa.petaLng != null ? (
                    <PetaLokasiKantor desa={desa} />
                  ) : (
                    <div className="rounded-xl border border-dashed py-12 text-center">
                      <MapPin className="mx-auto h-8 w-8 text-muted-foreground/50" />
                      <p className="mt-2 text-sm font-medium">Koordinat belum diatur</p>
                      <p className="text-xs text-muted-foreground">
                        Buka halaman Peta Lokasi Kantor lalu klik titik pada peta.
                      </p>
                    </div>
                  )}
                  {desa.kantorDesa && (
                    <div className="mt-4 overflow-hidden rounded-xl border">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={desa.kantorDesa}
                        alt={`Kantor desa ${desa.nama}`}
                        className="max-h-72 w-full object-cover"
                      />
                    </div>
                  )}
                </CardContent>
              </Card>

              <Card className="lg:col-span-2">
                <CardHeader className="flex-row items-center justify-between space-y-0">
                  <CardTitle className="flex items-center gap-2 text-base">
                    <MapPinned className="h-4 w-4 text-primary" />
                    Peta Wilayah Desa
                  </CardTitle>
                  <div className="flex items-center gap-3">
                    <span className="text-xs text-muted-foreground">
                      {parsePath(desa.wilayahPath).length} titik sudut
                    </span>
                    {isAdmin && (
                      <Button asChild size="sm" variant="outline">
                        <Link href="/admin/pengaturan/peta-wilayah">Gambar Batas</Link>
                      </Button>
                    )}
                  </div>
                </CardHeader>
                <CardContent>
                  {parsePath(desa.wilayahPath).length >= 3 ? (
                    <PetaWilayahDesa desa={desa} />
                  ) : (
                    <div className="rounded-xl border border-dashed py-12 text-center">
                      <MapPinned className="mx-auto h-8 w-8 text-muted-foreground/50" />
                      <p className="mt-2 text-sm font-medium">Batas wilayah belum digambar</p>
                      <p className="text-xs text-muted-foreground">
                        Gambar poligon minimal tiga titik agar area desa tampil di website.
                      </p>
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          ) : (
            <div className="space-y-5">
              <div className="grid gap-5 lg:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Visi & Misi</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4 text-sm">
                    <div>
                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                        Visi
                      </div>
                      <p className="mt-1 whitespace-pre-line leading-relaxed">
                        {desa.visi || "Belum diisi"}
                      </p>
                    </div>
                    <div>
                      <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                        Misi
                      </div>
                      <p className="mt-1 whitespace-pre-line leading-relaxed">
                        {desa.misi || "Belum diisi"}
                      </p>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <CardTitle className="text-base">Sejarah Desa</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="whitespace-pre-line text-sm leading-relaxed text-muted-foreground">
                      {desa.sejarah || "Belum diisi"}
                    </p>
                  </CardContent>
                </Card>
              </div>

              <div className="grid gap-5 lg:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                      <Trees className="h-4 w-4 text-primary" />
                      Potensi Sumber Daya
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="grid gap-3 sm:grid-cols-2">
                    <Description label="Jenis tanah" value={desa.jenisTanah} />
                    <Description label="Topografi" value={desa.topografi} />
                    <div className="sm:col-span-2">
                      <Description label="Sumber daya alam" value={desa.sumberDayaAlam} />
                    </div>
                    <div className="sm:col-span-2">
                      <Description label="Flora & fauna" value={desa.floraFauna} />
                    </div>
                    <Description label="Rawan bencana" value={desa.rawanBencana} />
                    <Description label="Kearifan lokal" value={desa.kearifanLokal} />
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2 text-base">
                      <Network className="h-4 w-4 text-primary" />
                      Internet & Komunikasi
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="grid gap-3 sm:grid-cols-2">
                    <Description label="Jenis jaringan" value={desa.jenisJaringan} />
                    <Description label="Provider" value={desa.providerInternet} />
                    <Description label="Kecepatan" value={desa.kecepatanInternet} />
                    <div className="sm:col-span-2">
                      <Description label="Cakupan wilayah" value={desa.cakupanWilayah} />
                    </div>
                    <div className="sm:col-span-2">
                      <Description label="Akses publik" value={desa.aksesPublik} />
                    </div>
                  </CardContent>
                </Card>
              </div>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-base">
                    <ShieldCheck className="h-4 w-4 text-primary" />
                    Desa Adat
                  </CardTitle>
                </CardHeader>
                <CardContent className="grid gap-3 sm:grid-cols-2">
                  <Description label="Status desa adat" value={desa.statusDesaAdat} />
                  <Description label="Lembaga adat" value={desa.lembagaAdat} />
                  <div className="sm:col-span-2">
                    <Description label="Struktur adat" value={desa.strukturAdat} />
                  </div>
                  <Description label="Wilayah adat" value={desa.wilayahAdat} />
                  <Description label="Peraturan adat" value={desa.peraturanAdat} />
                  <Description label="Regulasi adat" value={desa.regulasiAdat} />
                  <Description
                    label="Dokumen regulasi adat"
                    value={desa.dokumenRegulasiAdat}
                  />
                </CardContent>
              </Card>
            </div>
          )}
        </>
      )}
    </div>
  );
}

function SectionTitle({
  icon: Icon,
  title,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
}) {
  return (
    <CardHeader className="flex-row items-center gap-2 space-y-0">
      <Icon className="h-4 w-4 text-primary" />
      <CardTitle className="text-base">{title}</CardTitle>
    </CardHeader>
  );
}

function ContactItem({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string | null;
}) {
  return (
    <div className="flex items-start gap-2.5">
      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary text-primary">
        <Icon className="h-4 w-4" />
      </div>
      <div className="min-w-0">
        <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
          {label}
        </div>
        <div className="truncate font-medium">{value || "-"}</div>
      </div>
    </div>
  );
}

function Description({ label, value }: { label: string; value: string | number | null }) {
  return (
    <div>
      <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
        {label}
      </div>
      <div className="mt-0.5 break-words text-sm font-medium">{value || "-"}</div>
    </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>
  );
}