"use client";

import dynamic from "next/dynamic";
import { Building2, MapPinned, MapPin } from "lucide-react";
import type { Desa } from "@/lib/types";
import { parsePath } from "@/lib/gpx";

const pemuat = () => (
  <div className="h-[420px] w-full animate-pulse rounded-xl bg-muted" />
);

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

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

export function SectionPetaDesa({ desa }: { desa: Desa }) {
  const adaWilayah = parsePath(desa.wilayahPath).length >= 3;
  const adaKantor = desa.petaLat != null && desa.petaLng != null;
  if (!adaWilayah && !adaKantor) return null;

  return (
    <section className="container py-16 lg:py-20">
      <div className="text-sm font-semibold uppercase tracking-wider text-primary">
        Geografi Desa
      </div>
      <h2 className="mt-2 text-3xl font-bold tracking-tight">Peta Desa</h2>
      <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
        Batas wilayah dan titik lokasi kantor {desa.nama}, bersumber dari data administrasi
        desa.
      </p>

      <div className="mt-8 grid gap-5 lg:grid-cols-2">
        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
          <div className="flex items-center gap-2 border-b bg-secondary/40 px-5 py-3">
            <MapPinned className="h-4 w-4 text-primary" />
            <div className="text-sm font-semibold">Peta Wilayah Desa</div>
          </div>
          <div className="p-3">
            {adaWilayah ? (
              <PetaWilayahDesa desa={desa} />
            ) : (
              <div className="flex h-[420px] items-center justify-center rounded-xl border border-dashed px-6 text-center text-sm text-muted-foreground">
                Batas wilayah desa belum dipetakan.
              </div>
            )}
          </div>
        </div>

        <div className="overflow-hidden rounded-xl border border-border bg-card shadow-sm">
          <div className="flex items-center gap-2 border-b bg-secondary/40 px-5 py-3">
            <MapPin className="h-4 w-4 text-primary" />
            <div className="text-sm font-semibold">Peta Lokasi Kantor</div>
          </div>
          <div className="p-3">
            {adaKantor ? (
              <>
                <PetaLokasiKantor desa={desa} />
                <div className="flex items-start gap-2 px-2 py-3 text-sm text-muted-foreground">
                  <Building2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                  <span>
                    Kantor {desa.nama}
                    {desa.alamat ? ` — ${desa.alamat}` : ""}
                    {desa.kecamatan ? `, Kec. ${desa.kecamatan}` : ""}
                    {desa.kabupaten ? `, ${desa.kabupaten}` : ""}
                  </span>
                </div>
              </>
            ) : (
              <div className="flex h-[420px] items-center justify-center rounded-xl border border-dashed px-6 text-center text-sm text-muted-foreground">
                Lokasi kantor desa belum dipetakan.
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}