"use client";

import useSWR from "swr";
import { Baby, HeartPulse, Stethoscope, Users } from "lucide-react";
import { fetcher } from "@/lib/api";
import { formatNumber } from "@/lib/utils";
import { PageHeader, StatCard } from "@/components/page-header";
import { StuntingNav } from "@/components/admin/stunting-nav";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  SimpleCrud,
  type CrudColumn,
  type CrudField,
  type CrudRow,
} from "@/components/admin/simple-crud";

const FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Posyandu", required: true },
  { name: "alamat", label: "Alamat", full: true },
];

const COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Nama Posyandu" },
  { name: "alamat", label: "Alamat" },
];

function jumlahBulanIni(rows: CrudRow[]) {
  const now = new Date();
  return rows.filter((row) => {
    if (!row.tanggalPeriksa) return false;
    const date = new Date(String(row.tanggalPeriksa));
    if (Number.isNaN(date.getTime())) return false;
    return date.getMonth() === now.getMonth() && date.getFullYear() === now.getFullYear();
  }).length;
}

export default function StuntingPage() {
  const { data: ibuHamil } = useSWR<CrudRow[]>("/master/kia-ibu-hamil", fetcher);
  const { data: anak } = useSWR<CrudRow[]>("/master/kia-anak", fetcher);
  const daftarIbu = ibuHamil ?? [];
  const daftarAnak = anak ?? [];

  return (
    <div className="animate-fade-in space-y-6">
      <PageHeader
        title="Stunting Posyandu"
        description="Posyandu, pemantauan ibu hamil dan anak, rekapitulasi, serta scorecard konvergensi pencegahan stunting."
      />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard
          title="Ibu Hamil Periksa Bulan ini"
          value={formatNumber(jumlahBulanIni(daftarIbu))}
          hint={new Date().toLocaleDateString("id-ID", { month: "long", year: "numeric" })}
          icon={HeartPulse}
          tone="emerald"
        />
        <StatCard
          title="Anak Periksa Bulan ini"
          value={formatNumber(jumlahBulanIni(daftarAnak))}
          hint={new Date().toLocaleDateString("id-ID", { month: "long", year: "numeric" })}
          icon={Baby}
          tone="sky"
        />
        <StatCard
          title="Total Periksa Ibu Hamil"
          value={formatNumber(daftarIbu.length)}
          hint="Seluruh catatan pemeriksaan"
          icon={Stethoscope}
          tone="violet"
        />
        <StatCard
          title="Total Periksa Anak"
          value={formatNumber(daftarAnak.length)}
          hint="Seluruh catatan pemeriksaan"
          icon={Users}
          tone="amber"
        />
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Kesehatan Ibu dan Anak (KIA)</CardTitle>
        </CardHeader>
        <CardContent>
          <StuntingNav />
        </CardContent>
      </Card>

      <SimpleCrud
        title="Posyandu"
        description="Daftar posyandu desa beserta alamatnya."
        entity="posyandu"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari nama atau alamat posyandu…"
        createLabel="Tambah"
        showNo
        selectable
        actionOnLeft
        canWrite
        ekspor={{
          fileName: "daftar-posyandu",
          header: ["Nama Posyandu", "Alamat"],
          values: (row) => [String(row.nama ?? ""), String(row.alamat ?? "")],
        }}
        cetak={(rows) => ({
          judul: "Daftar Posyandu",
          isi: `
            <table>
              <thead><tr><th>No</th><th>Nama Posyandu</th><th>Alamat</th></tr></thead>
              <tbody>
                ${rows
                  .map(
                    (row, index) =>
                      `<tr><td class="num">${index + 1}</td><td>${String(
                        row.nama ?? "-",
                      )}</td><td>${String(row.alamat ?? "-")}</td></tr>`,
                  )
                  .join("")}
              </tbody>
            </table>
          `,
        })}
      />
    </div>
  );
}