"use client";

import useSWR from "swr";
import type { Paginated, Penduduk } from "@/lib/types";
import { fetcher } from "@/lib/api";
import { formatDateShort } from "@/lib/utils";
import { StuntingNav } from "@/components/admin/stunting-nav";
import {
  SimpleCrud,
  type CrudColumn,
  type CrudField,
  type CrudRow,
} from "@/components/admin/simple-crud";

const FIELDS: CrudField[] = [
  { name: "noKia", label: "Nomor KIA", required: true },
  { name: "noKiaLama", label: "Nomor KIA Lama" },
  {
    name: "ibuId",
    label: "Nama Ibu",
    type: "select",
    optionsKey: "penduduk",
    full: true,
  },
  {
    name: "anakId",
    label: "Nama Anak",
    type: "select",
    optionsKey: "penduduk",
    full: true,
  },
  { name: "perkiraanLahir", label: "Hari Perkiraan Lahir", type: "date" },
];

function pendudukRingkas(row: CrudRow, key: "ibu" | "anak") {
  return (row[key] ?? {}) as { nama?: string };
}

const COLUMNS: CrudColumn[] = [
  { name: "noKia", label: "Nomor KIA" },
  { name: "namaIbu", label: "Nama Ibu", render: (row) => pendudukRingkas(row, "ibu").nama ?? "-" },
  { name: "namaAnak", label: "Nama Anak", render: (row) => pendudukRingkas(row, "anak").nama ?? "-" },
  {
    name: "perkiraanLahir",
    label: "Perkiraan Lahir",
    render: (row) =>
      row.perkiraanLahir ? formatDateShort(String(row.perkiraanLahir)) : "-",
  },
];

export default function StuntingKiaPage() {
  const { data: penduduk } = useSWR<Paginated<Penduduk>>("/penduduk?limit=200", fetcher);
  const daftar = penduduk?.data ?? [];

  return (
    <div className="space-y-5">
      <StuntingNav active="kia" />
      <SimpleCrud
        title="Stunting KIA"
        description="Daftar Kartu Ibu dan Anak (KIA) sebagai dasar pemantauan ibu hamil dan anak."
        entity="kia"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari nomor KIA atau nama…"
        createLabel="Tambah"
        showNo
        selectable
        actionOnLeft
        canWrite
        options={{
          penduduk: daftar.map((item) => ({
            value: String(item.id),
            label: `${item.nama} — ${item.nik}`,
          })),
        }}
        ekspor={{
          fileName: "stunting-kia",
          header: ["Nomor KIA", "Nama Ibu", "Nama Anak", "Perkiraan Lahir"],
          values: (row) => [
            String(row.noKia ?? ""),
            pendudukRingkas(row, "ibu").nama ?? "",
            pendudukRingkas(row, "anak").nama ?? "",
            String(row.perkiraanLahir ?? "").slice(0, 10),
          ],
        }}
        cetak={(rows) => ({
          judul: "Daftar KIA",
          isi: `
            <table>
              <thead><tr><th>No</th><th>Nomor KIA</th><th>Nama Ibu</th><th>Nama Anak</th><th>Perkiraan Lahir</th></tr></thead>
              <tbody>
                ${rows
                  .map(
                    (row, index) =>
                      `<tr><td class="num">${index + 1}</td><td>${String(
                        row.noKia ?? "-",
                      )}</td><td>${pendudukRingkas(row, "ibu").nama ?? "-"}</td><td>${
                        pendudukRingkas(row, "anak").nama ?? "-"
                      }</td><td>${
                        row.perkiraanLahir
                          ? formatDateShort(String(row.perkiraanLahir))
                          : "-"
                      }</td></tr>`,
                  )
                  .join("")}
              </tbody>
            </table>
          `,
        })}
      />
    </div>
  );
}