import Link from "next/link";
import {
  ArrowRight,
  Building2,
  CalendarDays,
  Compass,
  Globe,
  Landmark,
  Mail,
  MapPin,
  Phone,
  Ruler,
  Target,
  UserRound,
} from "lucide-react";
import type { Desa } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { formatNumber, initials } from "@/lib/utils";
import { Button } from "@/components/ui/button";

export const metadata = { title: "Profil Desa" };

export default async function ProfilPage() {
  const desa = await serverGet<Desa>("/desa/publik");
  const nama = desa?.nama ?? "Mulyadadi";
  const misi = (desa?.misi ?? "")
    .split("\n")
    .map((line) => line.replace(/^\s*\d+\.\s*/, "").trim())
    .filter(Boolean);

  return (
    <div className="animate-fade-in">
      <section className="relative overflow-hidden bg-brand-deep py-14 text-white">
        <div className="hero-grid absolute inset-0 opacity-60" />
        <div className="orb-brand absolute -right-20 top-0 h-72 w-72 rounded-full blur-3xl" />
        <div className="container relative">
          <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-white/80">
            <Landmark className="h-3.5 w-3.5" />
            Profil Pemerintah Desa
          </div>
          <h1 className="mt-4 text-3xl font-bold tracking-tight text-balance sm:text-4xl">
            Desa {nama.replace(/^Desa\s+/i, "")}
          </h1>
          <p className="mt-3 max-w-2xl text-sm leading-relaxed text-white/75">
            {desa?.visi ??
              "Informasi profil, visi, misi, dan sejarah pemerintahan desa."}
          </p>
        </div>
      </section>

      <div className="container grid gap-6 py-10 lg:grid-cols-[1.6fr_1fr] lg:py-14">
        <div className="space-y-6">
          <section className="rounded-2xl border border-border bg-card p-6 shadow-sm sm:p-8">
            <div className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-primary">
              <Compass className="h-4 w-4" />
              Tentang Desa
            </div>
            <h2 className="mt-2 text-2xl font-bold tracking-tight">Sejarah Singkat</h2>
            <p className="mt-3 leading-relaxed text-muted-foreground">
              {desa?.sejarah ??
                "Informasi sejarah desa belum diisi oleh administrator desa."}
            </p>
          </section>

          <div className="grid gap-6 sm:grid-cols-2">
            <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                <Target className="h-5 w-5" />
              </div>
              <h2 className="mt-4 text-lg font-bold">Visi</h2>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                {desa?.visi ?? "Visi desa belum diisi."}
              </p>
            </section>

            <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
              <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-700">
                <Compass className="h-5 w-5" />
              </div>
              <h2 className="mt-4 text-lg font-bold">Misi</h2>
              {misi.length ? (
                <ol className="mt-2 space-y-2 text-sm leading-relaxed text-muted-foreground">
                  {misi.map((item, index) => (
                    <li key={item} className="flex gap-2">
                      <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-secondary text-[10px] font-bold text-primary">
                        {index + 1}
                      </span>
                      <span>{item}</span>
                    </li>
                  ))}
                </ol>
              ) : (
                <p className="mt-2 text-sm text-muted-foreground">Misi desa belum diisi.</p>
              )}
            </section>
          </div>

          <section className="rounded-2xl border border-border bg-card p-6 shadow-sm sm:p-8">
            <div className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-primary">
              <UserRound className="h-4 w-4" />
              Pemerintahan
            </div>
            <div className="mt-4 flex flex-col gap-4 rounded-xl bg-secondary/50 p-5 sm:flex-row sm:items-center">
              <div className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-brand-gradient text-lg font-bold text-white">
                {initials(desa?.kepalaDesa ?? "Kepala Desa")}
              </div>
              <div>
                <div className="text-sm text-muted-foreground">Kepala Desa</div>
                <div className="text-lg font-bold">{desa?.kepalaDesa ?? "-"}</div>
                {desa?.nipKepalaDesa && (
                  <div className="text-xs text-muted-foreground">
                    NIP {desa.nipKepalaDesa}
                  </div>
                )}
              </div>
              <Button asChild variant="outline" className="sm:ml-auto">
                <Link href="/berita">
                  Kabar desa
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </section>
        </div>

        <aside className="space-y-6">
          <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
            <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Identitas Wilayah
            </h2>
            <dl className="mt-4 space-y-4 text-sm">
              <InfoRow icon={Building2} label="Kecamatan" value={desa?.kecamatan ?? "-"} />
              <InfoRow icon={Building2} label="Kabupaten" value={desa?.kabupaten ?? "-"} />
              <InfoRow icon={Building2} label="Provinsi" value={desa?.provinsi ?? "-"} />
              <InfoRow icon={Landmark} label="Kode desa" value={desa?.kodeDesa ?? "-"} />
              <InfoRow
                icon={Ruler}
                label="Luas wilayah"
                value={
                  desa?.luasWilayah != null
                    ? `${formatNumber(desa.luasWilayah)} Ha`
                    : "-"
                }
              />
              <InfoRow icon={CalendarDays} label="Kode pos" value={desa?.kodePos ?? "-"} />
            </dl>
          </section>

          <section className="rounded-2xl border border-border bg-card p-6 shadow-sm">
            <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Kontak Kantor Desa
            </h2>
            <div className="mt-4 space-y-4 text-sm">
              <div className="flex gap-3">
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                <span className="text-muted-foreground">
                  {desa?.alamat ?? `${desa?.kecamatan ?? ""}, ${desa?.kabupaten ?? ""}`}
                </span>
              </div>
              {desa?.telepon && (
                <div className="flex gap-3">
                  <Phone className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                  <span className="text-muted-foreground">{desa.telepon}</span>
                </div>
              )}
              {desa?.email && (
                <div className="flex gap-3">
                  <Mail className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                  <span className="text-muted-foreground">{desa.email}</span>
                </div>
              )}
              {desa?.website && (
                <div className="flex gap-3">
                  <Globe className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                  <span className="break-all text-muted-foreground">{desa.website}</span>
                </div>
              )}
            </div>
          </section>
        </aside>
      </div>
    </div>
  );
}

function InfoRow({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string;
}) {
  return (
    <div className="flex items-start justify-between gap-3 border-b pb-3 last:border-0 last:pb-0">
      <dt className="flex items-center gap-2 text-muted-foreground">
        <Icon className="h-4 w-4" />
        {label}
      </dt>
      <dd className="max-w-[55%] text-right font-medium">{value}</dd>
    </div>
  );
}