import Link from "next/link";
import { ArrowRight, Home, User, UserCheck, Users } from "lucide-react";
import type { StatistikPublik } from "@/lib/types";
import { serverGet } from "@/lib/api";
import { PageHeader, StatCard } from "@/components/page-header";
import { AgeBar, ReligionDonut, RtBar, SexDonut } from "@/components/charts/population-charts";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatNumber } from "@/lib/utils";

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

export default async function StatistikPage() {
  const statistik = await serverGet<StatistikPublik>("/statistik");
  const penduduk = statistik?.penduduk;
  const laki =
    penduduk?.bySex.find((item) => item.name === "Laki-laki")?.value ?? 0;
  const perempuan =
    penduduk?.bySex.find((item) => item.name === "Perempuan")?.value ?? 0;
  const nama = statistik?.desa?.nama ?? "Mulyadadi";

  return (
    <div className="animate-fade-in">
      <section className="border-b bg-secondary/40 py-12">
        <div className="container">
          <PageHeader
            title={`Statistik Desa ${nama.replace(/^Desa\s+/i, "")}`}
            description="Data agregat kependudukan berdasarkan administrasi desa. Data pribadi warga tidak dipublikasikan."
            action={
              <Button asChild variant="outline">
                <Link href="/apbdes">
                  Data APBDes
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            }
          />
        </div>
      </section>

      <div className="container space-y-6 py-10">
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
          <StatCard
            title="Total penduduk"
            value={formatNumber(penduduk?.total ?? 0)}
            hint="Berstatus hidup"
            icon={Users}
          />
          <StatCard
            title="Kartu keluarga"
            value={formatNumber(penduduk?.keluarga ?? 0)}
            hint="Terdaftar di desa"
            icon={Home}
            tone="sky"
          />
          <StatCard
            title="Laki-laki"
            value={formatNumber(laki)}
            hint={`${penduduk?.total ? Math.round((laki / penduduk.total) * 100) : 0}% dari populasi`}
            icon={User}
            tone="violet"
          />
          <StatCard
            title="Perempuan"
            value={formatNumber(perempuan)}
            hint={`${penduduk?.total ? Math.round((perempuan / penduduk.total) * 100) : 0}% dari populasi`}
            icon={UserCheck}
            tone="amber"
          />
        </div>

        <div className="grid gap-4 lg:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Komposisi Jenis Kelamin</CardTitle>
            </CardHeader>
            <CardContent>
              <SexDonut data={penduduk?.bySex ?? []} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Kelompok Umur</CardTitle>
            </CardHeader>
            <CardContent>
              <AgeBar data={penduduk?.byUmur ?? []} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Agama</CardTitle>
            </CardHeader>
            <CardContent>
              <ReligionDonut data={penduduk?.byAgama ?? []} />
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Sebaran per RT</CardTitle>
            </CardHeader>
            <CardContent>
              <RtBar data={penduduk?.byRt ?? []} />
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Rincian Wilayah</CardTitle>
          </CardHeader>
          <CardContent className="p-0 pb-2">
            <div className="grid gap-px bg-border sm:grid-cols-2 lg:grid-cols-3">
              {(penduduk?.byRt ?? []).map((rt) => (
                <div key={rt.name} className="flex items-center justify-between bg-card px-5 py-4">
                  <span className="text-sm text-muted-foreground">{rt.name}</span>
                  <span className="text-sm font-semibold">
                    {formatNumber(rt.value)} jiwa
                  </span>
                </div>
              ))}
              {!penduduk?.byRt?.length && (
                <div className="col-span-full bg-card p-8 text-center text-sm text-muted-foreground">
                  Belum ada data wilayah.
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        <p className="text-xs leading-relaxed text-muted-foreground">
          Catatan: statistik dihitung dari penduduk berstatus hidup dan diperbarui secara
          otomatis setiap kali administrator desa memperbarui data kependudukan.
        </p>
      </div>
    </div>
  );
}