import Link from "next/link";
import {
  ArrowRight,
  BarChart3,
  Building2,
  CalendarDays,
  CheckCircle2,
  FileText,
  Home,
  Landmark,
  MapPin,
  ShieldCheck,
  Users,
  Wallet,
} from "lucide-react";
import type { Artikel, Desa, Paginated, StatistikPublik, SuratJenis } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { formatRupiah, formatNumber, initials } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ArticleCard } from "@/components/public/article-card";
import { SectionPetaDesa } from "@/components/public/section-peta";
import { AgeBar, SexDonut } from "@/components/charts/population-charts";

export default async function HomePage() {
  const [statistik, berita, suratJenis] = await Promise.all([
    serverGet<StatistikPublik>("/statistik"),
    serverGet<Paginated<Artikel>>("/artikel/publik?limit=3"),
    serverGet<SuratJenis[]>("/surat/jenis/publik"),
  ]);

  const desa: Desa | null = statistik?.desa ?? null;
  const nama = desa?.nama ?? "Mulyadadi";
  const penduduk = statistik?.penduduk;
  const keuangan = statistik?.keuangan;
  const artikelList = berita?.data ?? [];
  const jenisList = (suratJenis ?? []).slice(0, 4);
  const persenRealisasi =
    keuangan?.belanja && keuangan.belanja > 0
      ? Math.round((keuangan.realisasiBelanja / keuangan.belanja) * 100)
      : 0;

  return (
    <div className="animate-fade-in">
      <section className="relative overflow-hidden bg-brand-deep text-white">
        <div className="hero-grid absolute inset-0 opacity-70" />
        <div className="orb-brand absolute -left-24 top-10 h-72 w-72 rounded-full blur-3xl" />
        <div className="absolute -right-16 bottom-0 h-80 w-80 rounded-full bg-[hsl(var(--primary)/0.28)] blur-3xl" />

        <div className="container relative py-16 lg:py-24">
          <div className="grid items-center gap-12 lg:grid-cols-[1.35fr_1fr]">
            <div>
              <span 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 backdrop-blur">
                <ShieldCheck className="h-3.5 w-3.5" />
                Website Resmi Pemerintah Desa
              </span>

              <h1 className="mt-5 text-4xl font-bold leading-[1.1] tracking-tight text-balance sm:text-5xl lg:text-6xl">
                Desa {nama.replace(/^Desa\s+/i, "")}
                <span className="mt-3 block text-brand-gradient">
                  Maju, Mandiri, dan Sejahtera
                </span>
              </h1>

              <p className="mt-5 max-w-xl text-base leading-relaxed text-white/75">
                {desa?.visi ??
                  "Pelayanan publik yang transparan, partisipatif, dan berbasis digital untuk seluruh warga desa."}
              </p>

              <div className="mt-8 flex flex-wrap gap-3">
                <Button asChild size="lg" className="bg-white text-primary hover:bg-white/90">
                  <Link href="/profil">
                    Jelajahi Profil Desa
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </Button>
                <Button
                  asChild
                  size="lg"
                  variant="outline"
                  className="border-white/25 bg-transparent text-white hover:bg-white/10 hover:text-white"
                >
                  <Link href="/apbdes">
                    <Wallet className="h-4 w-4" />
                    Transparansi APBDes
                  </Link>
                </Button>
              </div>

              <div className="mt-10 grid max-w-xl grid-cols-2 gap-x-8 gap-y-4 sm:grid-cols-4">
                {[
                  { label: "Penduduk", value: formatNumber(penduduk?.total ?? 0) },
                  { label: "Keluarga", value: formatNumber(penduduk?.keluarga ?? 0) },
                  { label: "Wilayah RT", value: formatNumber(penduduk?.byRt.length ?? 0) },
                  { label: "Tahun APBDes", value: keuangan?.tahun ?? "-" },
                ].map((item) => (
                  <div key={item.label}>
                    <div className="text-2xl font-bold text-white">{item.value}</div>
                    <div className="text-xs text-white/55">{item.label}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="relative">
              <div className="rounded-2xl border border-white/10 bg-white/[0.06] p-6 shadow-2xl backdrop-blur-md">
                <div className="flex items-center justify-between">
                  <div className="text-sm font-semibold text-white">Sekilas Desa</div>
                  <Landmark className="h-5 w-5 text-brand-accent" />
                </div>
                <div className="mt-5 space-y-4 text-sm">
                  <InfoRow icon={MapPin} label="Kecamatan" value={desa?.kecamatan ?? "-"} />
                  <InfoRow icon={Building2} label="Kabupaten" value={desa?.kabupaten ?? "-"} />
                  <InfoRow
                    icon={CalendarDays}
                    label="Luas Wilayah"
                    value={desa?.luasWilayah ? `${formatNumber(desa.luasWilayah)} Ha` : "-"}
                  />
                  <InfoRow icon={Users} label="Kepala Desa" value={desa?.kepalaDesa ?? "-"} />
                  <InfoRow
                    icon={Home}
                    label="Kode Desa"
                    value={desa?.kodeDesa ?? "-"}
                  />
                </div>
                <div className="mt-6 rounded-xl bg-white/10 p-4">
                  <div className="flex items-center gap-2 text-xs font-semibold text-white/85">
                    <CheckCircle2 className="h-4 w-4" />
                    Layanan administrasi aktif
                  </div>
                  <p className="mt-1 text-xs leading-relaxed text-white/55">
                    {jenisList.length} jenis surat keterangan dapat diajukan warga
                    melalui kantor desa.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container -mt-6 relative z-10">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[
            { href: "/profil", icon: Landmark, title: "Profil Desa", desc: "Visi, misi, dan sejarah desa" },
            { href: "/berita", icon: FileText, title: "Berita Desa", desc: "Kabar terbaru dan pengumuman" },
            { href: "/statistik", icon: BarChart3, title: "Statistik", desc: "Data penduduk dan wilayah" },
            { href: "/apbdes", icon: Wallet, title: "APBDes", desc: "Anggaran dan realisasi" },
          ].map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="group flex gap-4 rounded-xl border border-border bg-card p-5 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-soft"
            >
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-secondary text-primary transition-colors group-hover:bg-primary group-hover:text-white">
                <item.icon className="h-5 w-5" />
              </div>
              <div>
                <div className="text-sm font-semibold">{item.title}</div>
                <div className="mt-0.5 text-xs text-muted-foreground">{item.desc}</div>
              </div>
            </Link>
          ))}
        </div>
      </section>

      <section className="container py-16 lg:py-20">
        <div className="grid items-center gap-10 lg:grid-cols-[1fr_1.2fr]">
          <div className="relative">
            <div className="aspect-[4/5] w-full max-w-sm overflow-hidden rounded-2xl bg-brand-deep p-8 text-white shadow-xl">
              <div className="flex h-full flex-col justify-between">
                <div>
                  <div className="inline-flex rounded-full bg-white/15 px-3 py-1 text-xs font-medium">
                    Sambutan Kepala Desa
                  </div>
                  <p className="mt-6 text-lg font-medium leading-relaxed text-white/85">
                    “Selamat datang di website resmi desa kami. Mari bersama membangun
                    desa yang lebih maju, transparan, dan sejahtera.”
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/15 text-sm font-bold">
                    {initials(desa?.kepalaDesa ?? "Kepala Desa")}
                  </div>
                  <div>
                    <div className="text-sm font-semibold">{desa?.kepalaDesa ?? "Kepala Desa"}</div>
                    <div className="text-xs text-white/60">Kepala Desa {nama}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div className="text-sm font-semibold uppercase tracking-wider text-primary">
              Tentang Desa
            </div>
            <h2 className="mt-2 text-3xl font-bold tracking-tight text-balance">
              Pemerintahan yang terbuka untuk seluruh warga
            </h2>
            <p className="mt-4 leading-relaxed text-muted-foreground">
              {desa?.sejarah ??
                "Desa kami berkomitmen menghadirkan pelayanan publik yang cepat, mudah, dan transparan. Seluruh informasi pembangunan dan anggaran desa dapat diakses secara terbuka melalui website ini."}
            </p>
            <div className="mt-6 grid gap-4 sm:grid-cols-2">
              {[
                { icon: Users, title: "Pelayanan Inklusif", desc: "Melayani seluruh warga tanpa diskriminasi." },
                { icon: ShieldCheck, title: "Tata Kelola Transparan", desc: "APBDes dan program desa dipublikasikan terbuka." },
                { icon: BarChart3, title: "Berbasis Data", desc: "Perencanaan pembangunan berdasarkan data penduduk." },
                { icon: CheckCircle2, title: "Partisipatif", desc: "Musyawarah dan aspirasi warga menjadi prioritas." },
              ].map((item) => (
                <div key={item.title} className="rounded-xl border border-border bg-card p-4">
                  <item.icon className="h-5 w-5 text-primary" />
                  <div className="mt-2 text-sm font-semibold">{item.title}</div>
                  <div className="mt-1 text-xs leading-relaxed text-muted-foreground">
                    {item.desc}
                  </div>
                </div>
              ))}
            </div>
            <Button asChild className="mt-6" variant="outline">
              <Link href="/profil">
                Selengkapnya tentang desa
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      <section className="border-y bg-secondary/40 py-16 lg:py-20">
        <div className="container">
          <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-end">
            <div>
              <div className="text-sm font-semibold uppercase tracking-wider text-primary">
                Data Penduduk
              </div>
              <h2 className="mt-2 text-3xl font-bold tracking-tight">Statistik Desa</h2>
              <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
                Gambaran demografi dan sebaran penduduk {nama} berdasarkan data administrasi desa.
              </p>
            </div>
            <Button asChild variant="outline">
              <Link href="/statistik">
                Lihat semua statistik
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </div>

          <div className="mt-8 grid gap-4 md:grid-cols-3">
            <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
              <div className="text-sm font-semibold">Komposisi Gender</div>
              <div className="mt-1 text-xs text-muted-foreground">Berdasarkan jenis kelamin</div>
              <SexDonut data={penduduk?.bySex ?? []} />
            </div>
            <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
              <div className="text-sm font-semibold">Kelompok Umur</div>
              <div className="mt-1 text-xs text-muted-foreground">Sebaran usia penduduk</div>
              <AgeBar data={penduduk?.byUmur ?? []} />
            </div>
            <div className="rounded-xl border border-border bg-card p-5 shadow-sm">
              <div className="text-sm font-semibold">Ringkasan Kependudukan</div>
              <div className="mt-1 text-xs text-muted-foreground">Data agregat desa</div>
              <div className="mt-5 space-y-4">
                {[
                  { label: "Total penduduk", value: formatNumber(penduduk?.total ?? 0) },
                  { label: "Kepala keluarga", value: formatNumber(penduduk?.keluarga ?? 0) },
                  { label: "Wilayah RT", value: formatNumber(penduduk?.byRt.length ?? 0) },
                  {
                    label: "Agama terbanyak",
                    value: penduduk?.byAgama?.[0]?.name ?? "-",
                  },
                ].map((row) => (
                  <div key={row.label} className="flex items-center justify-between border-b pb-3 last:border-0 last:pb-0">
                    <span className="text-sm text-muted-foreground">{row.label}</span>
                    <span className="text-sm font-semibold">{row.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {desa && <SectionPetaDesa desa={desa} />}

      <section className="container py-16 lg:py-20">
        <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-end">
          <div>
            <div className="text-sm font-semibold uppercase tracking-wider text-primary">
              Informasi Terkini
            </div>
            <h2 className="mt-2 text-3xl font-bold tracking-tight">Berita Desa</h2>
            <p className="mt-2 text-sm text-muted-foreground">
              Kabar pembangunan, kegiatan, dan pengumuman resmi desa.
            </p>
          </div>
          <Button asChild variant="outline">
            <Link href="/berita">
              Semua berita
              <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>

        {artikelList.length ? (
          <div className="mt-8 grid gap-5 md:grid-cols-3">
            {artikelList.map((artikel) => (
              <ArticleCard key={artikel.id} artikel={artikel} />
            ))}
          </div>
        ) : (
          <div className="mt-8 rounded-xl border border-dashed p-10 text-center text-sm text-muted-foreground">
            Belum ada berita yang dipublikasikan.
          </div>
        )}
      </section>

      <section className="container pb-16 lg:pb-20">
        <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-soft">
          <div className="grid lg:grid-cols-[1.2fr_1fr]">
            <div className="p-8 lg:p-10">
              <div className="inline-flex items-center gap-2 rounded-full bg-secondary px-3 py-1 text-xs font-semibold text-primary">
                <Wallet className="h-3.5 w-3.5" />
                Transparansi Anggaran
              </div>
              <h2 className="mt-4 text-2xl font-bold tracking-tight">
                APBDes Tahun Anggaran {keuangan?.tahun ?? "-"}
              </h2>
              <p className="mt-2 max-w-lg text-sm leading-relaxed text-muted-foreground">
                Pemerintah desa mempublikasikan struktur anggaran dan realisasinya agar
                masyarakat dapat ikut mengawasi pembangunan desa.
              </p>

              <div className="mt-6 grid gap-4 sm:grid-cols-3">
                {[
                  { label: "Pendapatan", value: keuangan?.pendapatan ?? 0 },
                  { label: "Belanja", value: keuangan?.belanja ?? 0 },
                  { label: "Pembiayaan", value: keuangan?.pembiayaan ?? 0 },
                ].map((item) => (
                  <div key={item.label} className="rounded-xl bg-muted/60 p-4">
                    <div className="text-xs text-muted-foreground">{item.label}</div>
                    <div className="mt-1 text-lg font-bold text-foreground">
                      {formatRupiah(item.value)}
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-6">
                <div className="mb-2 flex items-center justify-between text-xs">
                  <span className="text-muted-foreground">Realisasi belanja</span>
                  <span className="font-semibold">{persenRealisasi}%</span>
                </div>
                <div className="h-2.5 overflow-hidden rounded-full bg-muted">
                  <div
                    className="h-full rounded-full bg-brand-gradient"
                    style={{ width: `${Math.min(100, persenRealisasi)}%` }}
                  />
                </div>
              </div>

              <Button asChild className="mt-6">
                <Link href="/apbdes">
                  Lihat rincian APBDes
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>

            <div className="relative flex items-center justify-center overflow-hidden bg-brand-deep p-8 text-white">
              <div className="absolute inset-0 opacity-20 [background-image:radial-gradient(circle_at_30%_20%,#fff_0,transparent_40%),radial-gradient(circle_at_70%_80%,#5eead4_0,transparent_45%)]" />
              <div className="relative w-full max-w-xs">
                <div className="text-sm font-medium text-white/80">Belanja per Bidang</div>
                <div className="mt-4 space-y-3">
                  {(keuangan?.byBidang ?? []).slice(0, 4).map((item) => {
                    const percent =
                      keuangan?.belanja && keuangan.belanja > 0
                        ? Math.round((item.value / keuangan.belanja) * 100)
                        : 0;
                    return (
                      <div key={item.name}>
                        <div className="flex justify-between text-xs">
                          <span className="max-w-[75%] truncate text-white/85">
                            {item.name}
                          </span>
                          <span className="font-semibold">{percent}%</span>
                        </div>
                        <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-white/20">
                          <div
                            className="h-full rounded-full bg-white/80"
                            style={{ width: `${percent}%` }}
                          />
                        </div>
                      </div>
                    );
                  })}
                  {!keuangan?.byBidang?.length && (
                    <div className="text-sm text-white/55">Belum ada data bidang.</div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container pb-20">
        <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-end">
          <div>
            <div className="text-sm font-semibold uppercase tracking-wider text-primary">
              Layanan Warga
            </div>
            <h2 className="mt-2 text-3xl font-bold tracking-tight">Surat Keterangan</h2>
            <p className="mt-2 text-sm text-muted-foreground">
              Jenis layanan administrasi yang tersedia di kantor desa.
            </p>
          </div>
        </div>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {jenisList.map((jenis) => (
            <div
              key={jenis.id}
              className="rounded-xl border border-border bg-card p-5 shadow-sm transition-shadow hover:shadow-soft"
            >
              <div className="flex items-center justify-between">
                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-secondary text-primary">
                  <FileText className="h-5 w-5" />
                </div>
                <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-semibold text-muted-foreground">
                  {jenis.kode}
                </span>
              </div>
              <div className="mt-3 text-sm font-semibold leading-snug">{jenis.nama}</div>
              <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
                {jenis.deskripsi}
              </p>
            </div>
          ))}
          {!jenisList.length && (
            <div className="col-span-full rounded-xl border border-dashed p-8 text-center text-sm text-muted-foreground">
              Belum ada layanan surat yang aktif.
            </div>
          )}
        </div>
      </section>
    </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 border-white/10 pb-3 last:border-0 last:pb-0">
      <span className="flex items-center gap-2 text-white/65">
        <Icon className="h-4 w-4" />
        {label}
      </span>
      <span className="max-w-[55%] text-right font-medium text-white">{value}</span>
    </div>
  );
}