"use client";

import { useMemo, useState } from "react";
import useSWR from "swr";
import { Download, Printer, Search } from "lucide-react";
import { toast } from "sonner";
import { fetcher } from "@/lib/api";
import { unduhCsv } from "@/lib/sekretariat";
import { formatNumber } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { PageHeader, StatCard } from "@/components/page-header";
import { StuntingNav } from "@/components/admin/stunting-nav";
import type { CrudRow } from "@/components/admin/simple-crud";
import { Baby, HeartPulse, Stethoscope, Users } from "lucide-react";

const KUARTAL = [
  { value: "1", label: "Kuartal ke 1 (Januari - Maret)", awal: 1, akhir: 3 },
  { value: "2", label: "Kuartal ke 2 (April - Juni)", awal: 4, akhir: 6 },
  { value: "3", label: "Kuartal ke 3 (Juli - September)", awal: 7, akhir: 9 },
  { value: "4", label: "Kuartal ke 4 (Oktober - Desember)", awal: 10, akhir: 12 },
];

const INDIKATOR_IBU = [
  "Pemeriksaan Kehamilan",
  "Dapat & Konsumsi Pil Fe",
  "Pemeriksaan Nifas",
  "Konseling Gizi (Kelas IH)",
  "Kunjungan Rumah",
  "Kepemilikan Akses Air Bersih",
  "Kepemilikan Jamban",
  "Jaminan Kesehatan",
];

const INDIKATOR_ANAK = [
  "Pemberian Imunisasi Dasar",
  "Pengukuran Berat Badan",
  "Pengukuran Tinggi Badan",
  "Konseling Gizi Ayah",
  "Konseling Gizi Ibu",
  "Kunjungan Rumah",
  "Kepemilikan Akses Air Bersih",
  "Kepemilikan Jamban Sehat",
  "Akta Lahir",
  "Jaminan Kesehatan",
  "Pengasuhan (PAUD)",
];

const KUNCI_IBU = [
  "periksaKehamilan",
  "konsumsiPilFe",
  "periksaNifas",
  "konselingGizi",
  "kunjunganRumah",
  "airBersih",
  "jamban",
  "jaminanKesehatan",
];

const KUNCI_ANAK = [
  "imunisasiDasar",
  "pengukuranBerat",
  "pengukuranTinggi",
  "konselingGiziAyah",
  "konselingGiziIbu",
  "kunjunganRumah",
  "airBersih",
  "jamban",
  "aktaLahir",
  "jaminanKesehatan",
  "pengasuhanPaud",
];

function dalamKuartal(row: CrudRow, kuartal: number, tahun: string) {
  const raw = row.tanggalPeriksa ?? row.tanggal;
  if (!raw) return false;
  const date = new Date(String(raw));
  if (Number.isNaN(date.getTime())) return false;
  if (date.getFullYear() !== Number(tahun)) return false;
  const batas = KUARTAL.find((item) => item.value === String(kuartal));
  if (!batas) return true;
  const bulan = date.getMonth() + 1;
  return bulan >= batas.awal && bulan <= batas.akhir;
}

function persen(nilai: number, total: number) {
  return total ? `${Math.round((nilai / total) * 1000) / 10}%` : "0%";
}

export default function ScorecardKonvergensiPage() {
  const sekarang = new Date();
  const [kuartal, setKuartal] = useState(String(Math.floor(sekarang.getMonth() / 3) + 1));
  const [tahun, setTahun] = useState(String(sekarang.getFullYear()));
  const [posyandu, setPosyandu] = useState("");

  const { data: ibuHamil } = useSWR<CrudRow[]>("/master/kia-ibu-hamil", fetcher);
  const { data: anak } = useSWR<CrudRow[]>("/master/kia-anak", fetcher);
  const { data: paud } = useSWR<CrudRow[]>("/master/kia-paud", fetcher);
  const { data: posyanduList } = useSWR<CrudRow[]>("/master/posyandu", fetcher);

  const tahunOptions = useMemo(() => {
    const set = new Set<number>([sekarang.getFullYear()]);
    for (let index = 0; index < 6; index += 1) set.add(sekarang.getFullYear() - index);
    return [...set].sort((a, b) => b - a);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const cocok = (row: CrudRow) =>
    dalamKuartal(row, Number(kuartal), tahun) &&
    (!posyandu || String(row.posyandu ?? "") === posyandu);

  const ibu = (ibuHamil ?? []).filter(cocok);
  const balita = (anak ?? []).filter(cocok);
  const anak23 = balita.filter((row) => Number(row.umurBulan ?? 99) <= 23);
  const paudRows = (paud ?? []).filter(cocok);

  const ibuKek = ibu.filter((row) => String(row.statusKehamilan ?? "").includes("KEK")).length;
  const anakStunting = anak23.filter((row) => String(row.statusGizi ?? "").includes("Stunting")).length;
  const hijau = anak23.filter((row) => String(row.statusTikar ?? "").startsWith("Hijau")).length;
  const kuning = anak23.filter((row) => String(row.statusTikar ?? "").startsWith("Kuning")).length;
  const merah = anak23.filter((row) => String(row.statusTikar ?? "").startsWith("Merah")).length;

  function hitungIndikator(rows: CrudRow[], kunci: string[]) {
    return kunci.map((key) => rows.filter((row) => Boolean(row[key])).length);
  }

  const ibuDiterima = hitungIndikator(ibu, KUNCI_IBU);
  const anakDiterima = hitungIndikator(anak23, KUNCI_ANAK);

  const totalIbuDiterima = ibuDiterima.reduce((sum, value) => sum + value, 0);
  const totalAnakDiterima = anakDiterima.reduce((sum, value) => sum + value, 0);

  function cetak() {
    window.print();
  }

  function unduh() {
    unduhCsv("scorecard-konvergensi", ["Tabel", "Sasaran", "Jumlah"], [
      ["1", "Ibu Hamil", String(ibu.length)],
      ["1", "Anak 0-23 Bulan", String(anak23.length)],
      ["1", "KEK/Resti", String(ibuKek)],
      ["1", "Gizi Kurang/Buruk/Stunting", String(anakStunting)],
      ["2", "Hijau (Normal)", String(hijau)],
      ["2", "Kuning (Risiko Stunting)", String(kuning)],
      ["2", "Merah (Terindikasi Stunting)", String(merah)],
      ["4", "Tingkat Konvergensi Ibu Hamil (%)", persen(totalIbuDiterima, ibu.length * KUNCI_IBU.length)],
      ["4", "Tingkat Konvergensi Anak 0-23 (%)", persen(totalAnakDiterima, anak23.length * KUNCI_ANAK.length)],
    ]);
    toast.success("Data scorecard diunduh");
  }

  return (
    <div className="space-y-5">
      <StuntingNav active="scorecard" />
      <PageHeader
        title="Scorecard Konvergensi"
        description="Scorecard konvergensi pencegahan stunting desa per kuartal."
        action={
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" onClick={cetak}>
              <Printer className="h-4 w-4" />
              Cetak Data
            </Button>
            <Button variant="outline" onClick={unduh}>
              <Download className="h-4 w-4" />
              Unduh Data
            </Button>
          </div>
        }
      />

      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <StatCard title="Ibu Hamil Periksa Bulan ini" value={formatNumber(ibu.length)} icon={HeartPulse} />
        <StatCard title="Anak Periksa Bulan ini" value={formatNumber(balita.length)} icon={Baby} tone="sky" />
        <StatCard title="Total Periksa Ibu Hamil" value={formatNumber(ibu.length)} icon={Stethoscope} tone="violet" />
        <StatCard title="Total Periksa Anak" value={formatNumber(balita.length)} icon={Users} tone="amber" />
      </div>

      <Card>
        <CardContent className="flex flex-col gap-3 p-4 sm:flex-row sm:items-end">
          <div className="space-y-1.5">
            <Label htmlFor="kuartal">Kuartal</Label>
            <Select
              id="kuartal"
              value={kuartal}
              onChange={(event) => setKuartal(event.target.value)}
              className="w-64"
            >
              {KUARTAL.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="tahun-skor">Tahun</Label>
            <Select
              id="tahun-skor"
              value={tahun}
              onChange={(event) => setTahun(event.target.value)}
              className="w-28"
            >
              {tahunOptions.map((item) => (
                <option key={item} value={String(item)}>
                  {item}
                </option>
              ))}
            </Select>
          </div>
          <div className="space-y-1.5">
            <Label htmlFor="posyandu-skor">Posyandu</Label>
            <Select
              id="posyandu-skor"
              value={posyandu}
              onChange={(event) => setPosyandu(event.target.value)}
              className="w-48"
            >
              <option value="">Semua</option>
              {(posyanduList ?? []).map((row) => (
                <option key={String(row.id)} value={String(row.nama ?? "")}>
                  {String(row.nama ?? "")}
                </option>
              ))}
            </Select>
          </div>
          <Button variant="outline">
            <Search className="h-4 w-4" />
            Cari
          </Button>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>TABEL 1. Jumlah Sasaran 1.000 HPK (Ibu Hamil dan Anak 0-23 Bulan)</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Sasaran</TableHead>
                <TableHead>Jumlah Total Rumah Tangga 1.000 HPK</TableHead>
                <TableHead>Ibu Hamil</TableHead>
                <TableHead>KEK/Resti</TableHead>
                <TableHead>Anak 0 – 23 Bulan</TableHead>
                <TableHead>Gizi Kurang/Gizi Buruk/Stunting</TableHead>
                <TableHead>Jumlah</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell className="font-medium">Jumlah</TableCell>
                <TableCell>{formatNumber(ibu.length + anak23.length)}</TableCell>
                <TableCell>{formatNumber(ibu.length)}</TableCell>
                <TableCell>{formatNumber(ibuKek)}</TableCell>
                <TableCell>{formatNumber(anak23.length)}</TableCell>
                <TableCell>{formatNumber(anakStunting)}</TableCell>
                <TableCell>{formatNumber(ibu.length + anak23.length)}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>TABEL 2. Hasil Pengukuran Tikar Pertumbuhan (Deteksi Dini Stunting)</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Sasaran</TableHead>
                <TableHead>Jumlah Total Anak Usia 0 – 23 Bulan</TableHead>
                <TableHead>Hijau (Normal)</TableHead>
                <TableHead>Kuning (Risiko Stunting)</TableHead>
                <TableHead>Merah (Terindikasi Stunting)</TableHead>
                <TableHead>Jumlah</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell className="font-medium">Jumlah</TableCell>
                <TableCell>{formatNumber(anak23.length)}</TableCell>
                <TableCell>{formatNumber(hijau)}</TableCell>
                <TableCell>{formatNumber(kuning)}</TableCell>
                <TableCell>{formatNumber(merah)}</TableCell>
                <TableCell>{formatNumber(hijau + kuning + merah)}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>TABEL 3. Kelengkapan Konvergensi Paket Layanan Pencegahan Stunting bagi 1.000 HPK</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Ibu Hamil
            </p>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>No</TableHead>
                  <TableHead>Indikator</TableHead>
                  <TableHead>Jumlah</TableHead>
                  <TableHead>%</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {INDIKATOR_IBU.map((label, index) => (
                  <TableRow key={label}>
                    <TableCell>{index + 1}</TableCell>
                    <TableCell>{label}</TableCell>
                    <TableCell>{formatNumber(ibuDiterima[index])}</TableCell>
                    <TableCell>{persen(ibuDiterima[index], ibu.length)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          <div>
            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Anak 0 sd 23 Bulan (0 sd 2 Tahun)
            </p>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>No</TableHead>
                  <TableHead>Indikator</TableHead>
                  <TableHead>Jumlah</TableHead>
                  <TableHead>%</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {INDIKATOR_ANAK.map((label, index) => (
                  <TableRow key={label}>
                    <TableCell>{index + 1}</TableCell>
                    <TableCell>{label}</TableCell>
                    <TableCell>{formatNumber(anakDiterima[index])}</TableCell>
                    <TableCell>{persen(anakDiterima[index], anak23.length)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          <div>
            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
              Anak 2 sd 6 Tahun
            </p>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>No</TableHead>
                  <TableHead>Indikator</TableHead>
                  <TableHead>Jumlah</TableHead>
                  <TableHead>%</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>1</TableCell>
                  <TableCell>Pengasuhan (PAUD)</TableCell>
                  <TableCell>
                    {formatNumber(paudRows.filter((row) => Boolean(row.kelasPaud)).length)}
                  </TableCell>
                  <TableCell>{persen(paudRows.filter((row) => Boolean(row.kelasPaud)).length, paudRows.length)}</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>TABEL 4. Tingkat Konvergensi Desa</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>No</TableHead>
                <TableHead>Sasaran</TableHead>
                <TableHead>Jumlah Indikator</TableHead>
                <TableHead>Yang Diterima</TableHead>
                <TableHead>Seharusnya Diterima</TableHead>
                <TableHead>Tingkat Konvergensi (%)</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>1</TableCell>
                <TableCell>Ibu Hamil</TableCell>
                <TableCell>{KUNCI_IBU.length}</TableCell>
                <TableCell>{formatNumber(totalIbuDiterima)}</TableCell>
                <TableCell>{formatNumber(ibu.length * KUNCI_IBU.length)}</TableCell>
                <TableCell>{persen(totalIbuDiterima, ibu.length * KUNCI_IBU.length)}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>2</TableCell>
                <TableCell>Anak 0 – 23 Bulan</TableCell>
                <TableCell>{KUNCI_ANAK.length}</TableCell>
                <TableCell>{formatNumber(totalAnakDiterima)}</TableCell>
                <TableCell>{formatNumber(anak23.length * KUNCI_ANAK.length)}</TableCell>
                <TableCell>{persen(totalAnakDiterima, anak23.length * KUNCI_ANAK.length)}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell colSpan={2} className="font-semibold">
                  Total Tingkat Konvergensi Desa
                </TableCell>
                <TableCell colSpan={3} />
                <TableCell className="font-semibold">
                  {persen(
                    totalIbuDiterima + totalAnakDiterima,
                    ibu.length * KUNCI_IBU.length + anak23.length * KUNCI_ANAK.length,
                  )}
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>TABEL 5. Penggunaan Dana Desa dalam Pencegahan Stunting</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>No</TableHead>
                <TableHead>Bidang/Kegiatan</TableHead>
                <TableHead>Kegiatan Khusus Pencegahan Stunting</TableHead>
                <TableHead>Total Alokasi Dana</TableHead>
                <TableHead>Alokasi Dana</TableHead>
                <TableHead>% (Persen)</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>1</TableCell>
                <TableCell>Bidang Kesehatan</TableCell>
                <TableCell>Posyandu dan pemantauan tumbuh kembang</TableCell>
                <TableCell>-</TableCell>
                <TableCell>-</TableCell>
                <TableCell>-</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>2</TableCell>
                <TableCell>Bidang Pendidikan</TableCell>
                <TableCell>Layanan PAUD</TableCell>
                <TableCell>-</TableCell>
                <TableCell>-</TableCell>
                <TableCell>-</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}