"use client";

import { useState } from "react";
import useSWR, { mutate } from "swr";
import { toast } from "sonner";
import type { Desa, Paginated, Penduduk } from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { cetakHtml, escapeHtml, kopDesa } from "@/lib/cetak";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import {
  SimpleCrud,
  type CrudColumn,
  type CrudField,
  type CrudRow,
} from "@/components/admin/simple-crud";

interface PendudukRingkas {
  nik: string;
  nama: string;
  jenisKelamin: string;
  tanggalLahir: string | null;
}

function warga(row: CrudRow): PendudukRingkas {
  return (row.penduduk ?? {}) as PendudukRingkas;
}

function usia(tanggalLahir: string | null | undefined) {
  if (!tanggalLahir) return "-";
  const lahir = new Date(tanggalLahir);
  if (Number.isNaN(lahir.getTime())) return "-";
  const now = new Date();
  let tahun = now.getFullYear() - lahir.getFullYear();
  const bulan = now.getMonth() - lahir.getMonth();
  if (bulan < 0 || (bulan === 0 && now.getDate() < lahir.getDate())) tahun -= 1;
  return `${tahun} th`;
}

function yaTidak(value: unknown) {
  return value ? <Badge variant="danger">Ya</Badge> : <span className="text-muted-foreground">Tidak</span>;
}

function defaultPendudukId() {
  if (typeof window === "undefined") return "";
  return new URLSearchParams(window.location.search).get("pendudukId") ?? "";
}

function waktuPantau(value: unknown) {
  if (!value) return "-";
  const date = new Date(String(value));
  if (Number.isNaN(date.getTime())) return "-";
  return date.toLocaleString("id-ID", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

const FIELDS: CrudField[] = [
  {
    name: "pendudukId",
    label: "NIK / Nama",
    type: "select",
    optionsKey: "penduduk",
    required: true,
    full: true,
  },
  { name: "tanggalTiba", label: "Tanggal Tiba", type: "date" },
  { name: "dataHPlus", label: "Data H+", type: "number" },
  { name: "waktuPantau", label: "Tanggal / Jam Pantau", type: "date" },
  { name: "suhu", label: "Suhu Tubuh", type: "number", help: "Derajat Celsius" },
  { name: "batuk", label: "Batuk", type: "checkbox" },
  { name: "flu", label: "Flu", type: "checkbox" },
  { name: "sesak", label: "Sesak", type: "checkbox" },
  { name: "keluhan", label: "Keluhan Lain", type: "textarea", full: true },
  {
    name: "status",
    label: "Status",
    type: "select",
    options: [
      { value: "Dalam Pemantauan", label: "Dalam Pemantauan" },
      { value: "Selesai", label: "Selesai" },
    ],
    defaultValue: "Dalam Pemantauan",
  },
];

const COLUMNS: CrudColumn[] = [
  { name: "dataHPlus", label: "Data H+" },
  { name: "tanggalTiba", label: "Tanggal Tiba" },
  { name: "waktuPantau", label: "Waktu Pantau", render: (row) => waktuPantau(row.waktuPantau) },
  { name: "nik", label: "NIK", render: (row) => warga(row).nik ?? "-" },
  { name: "nama", label: "Nama", render: (row) => warga(row).nama ?? "-" },
  { name: "usia", label: "Usia", render: (row) => usia(warga(row).tanggalLahir) },
  { name: "jk", label: "JK", render: (row) => warga(row).jenisKelamin ?? "-" },
  {
    name: "suhu",
    label: "Suhu",
    render: (row) => (row.suhu !== null && row.suhu !== undefined ? `${row.suhu} °C` : "-"),
  },
  { name: "batuk", label: "Batuk", render: (row) => yaTidak(row.batuk) },
  { name: "flu", label: "Flu", render: (row) => yaTidak(row.flu) },
  { name: "sesak", label: "Sesak", render: (row) => yaTidak(row.sesak) },
  { name: "keluhan", label: "Keluhan", hideOnMobile: true },
  {
    name: "status",
    label: "Status",
    render: (row) => (
      <Badge variant={row.status === "Selesai" ? "success" : "secondary"}>
        {String(row.status ?? "-")}
      </Badge>
    ),
  },
];

function sekarang() {
  const now = new Date();
  const pad = (value: number) => String(value).padStart(2, "0");
  return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(
    now.getHours(),
  )}:${pad(now.getMinutes())}`;
}

export default function PemantauanKesehatanPage() {
  const { data: penduduk } = useSWR<Paginated<Penduduk>>("/penduduk?limit=200", fetcher);
  const { data: desa } = useSWR<Desa>("/desa", fetcher);
  const { data: semua } = useSWR<CrudRow[]>("/master/pantau-covid", fetcher);
  const daftar = penduduk?.data ?? [];
  const tanggalList = Array.from(
    new Set(
      (semua ?? [])
        .map((row) => String(row.tanggalTiba ?? "").slice(0, 10))
        .filter(Boolean),
    ),
  ).sort((a, b) => b.localeCompare(a));
  const [pendudukId, setPendudukId] = useState(defaultPendudukId);
  const [tanggalTiba, setTanggalTiba] = useState("");
  const [form, setForm] = useState({
    pendudukId: defaultPendudukId(),
    waktuPantau: sekarang(),
    tanggalTiba: "",
    dataHPlus: "",
    suhu: "",
    batuk: false,
    flu: false,
    sesak: false,
    keluhan: "",
  });
  const [saving, setSaving] = useState(false);

  async function simpanPantau(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!form.pendudukId) {
      toast.error("Pilih NIK/Nama terlebih dahulu");
      return;
    }
    setSaving(true);
    try {
      await apiSend("/master/pantau-covid", "POST", {
        pendudukId: Number(form.pendudukId),
        ...(form.waktuPantau ? { waktuPantau: form.waktuPantau } : {}),
        ...(form.tanggalTiba ? { tanggalTiba: form.tanggalTiba } : {}),
        ...(form.dataHPlus ? { dataHPlus: Number(form.dataHPlus) } : {}),
        ...(form.suhu ? { suhu: Number(form.suhu) } : {}),
        batuk: form.batuk,
        flu: form.flu,
        sesak: form.sesak,
        ...(form.keluhan ? { keluhan: form.keluhan } : {}),
        status: "Dalam Pemantauan",
      });
      toast.success("Pemantauan disimpan");
      setForm({
        pendudukId: "",
        waktuPantau: sekarang(),
        tanggalTiba: "",
        dataHPlus: "",
        suhu: "",
        batuk: false,
        flu: false,
        sesak: false,
        keluhan: "",
      });
      await mutate("/master/pantau-covid");
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan pemantauan");
    } finally {
      setSaving(false);
    }
  }

  function cetak(rows: CrudRow[]) {
    const isi = `
      ${kopDesa(desa, "Pemantauan Isolasi Mandiri Saat Pandemi Covid-19")}
      <table>
        <thead><tr><th>No</th><th>Data H+</th><th>Tanggal Tiba</th><th>Waktu Pantau</th><th>NIK</th><th>Nama</th><th>Usia</th><th>JK</th><th>Suhu</th><th>Batuk</th><th>Flu</th><th>Sesak</th><th>Keluhan</th><th>Status</th></tr></thead>
        <tbody>
          ${rows
            .map((row, index) => {
              const w = warga(row);
              return `<tr><td class="num">${index + 1}</td><td class="num">${escapeHtml(row.dataHPlus ?? "-")}</td><td>${escapeHtml(String(row.tanggalTiba ?? "").slice(0, 10) || "-")}</td><td>${escapeHtml(waktuPantau(row.waktuPantau))}</td><td>${escapeHtml(w.nik ?? "-")}</td><td>${escapeHtml(w.nama ?? "-")}</td><td>${usia(w.tanggalLahir)}</td><td>${escapeHtml(w.jenisKelamin ?? "-")}</td><td class="num">${row.suhu !== null && row.suhu !== undefined ? `${row.suhu} °C` : "-"}</td><td>${row.batuk ? "Ya" : "Tidak"}</td><td>${row.flu ? "Ya" : "Tidak"}</td><td>${row.sesak ? "Ya" : "Tidak"}</td><td>${escapeHtml(row.keluhan ?? "-")}</td><td>${escapeHtml(row.status ?? "-")}</td></tr>`;
            })
            .join("")}
        </tbody>
      </table>
      <div class="ttd">
        <div>
          <div>${escapeHtml((desa?.kecamatan ?? "Cipari").toUpperCase())}, ${new Date().toLocaleDateString("id-ID", { day: "2-digit", month: "long", year: "numeric" })}</div>
          <div>Kepala Desa ${escapeHtml((desa?.nama ?? "Mulyadadi").replace(/^Desa\s+/i, ""))}</div>
          <div class="ruang"></div>
          <div><strong>${escapeHtml(desa?.kepalaDesa ?? "-")}</strong></div>
        </div>
      </div>
    `;
    return { judul: "Pemantauan Isolasi Mandiri", isi };
  }

  return (
    <div className="space-y-5">
      <Card>
        <CardHeader>
          <CardTitle>Form Pemantauan</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={simpanPantau} className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div className="space-y-1.5 sm:col-span-2 lg:col-span-1">
              <Label htmlFor="pantau-warga">NIK/Nama</Label>
              <Select
                id="pantau-warga"
                value={form.pendudukId}
                onChange={(event) => setForm({ ...form, pendudukId: event.target.value })}
                required
              >
                <option value="">-- Silakan Masukan NIK/Nama --</option>
                {daftar.map((item) => (
                  <option key={item.id} value={String(item.id)}>
                    {item.nama} — {item.nik}
                  </option>
                ))}
              </Select>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="pantau-waktu">Tanggal/Jam</Label>
              <Input
                id="pantau-waktu"
                type="datetime-local"
                value={form.waktuPantau}
                onChange={(event) => setForm({ ...form, waktuPantau: event.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="pantau-tiba">Tanggal Tiba</Label>
              <Input
                id="pantau-tiba"
                type="date"
                value={form.tanggalTiba}
                onChange={(event) => setForm({ ...form, tanggalTiba: event.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="pantau-hplus">Data H+</Label>
              <Input
                id="pantau-hplus"
                type="number"
                min={0}
                value={form.dataHPlus}
                onChange={(event) => setForm({ ...form, dataHPlus: event.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="pantau-suhu">Suhu Tubuh</Label>
              <Input
                id="pantau-suhu"
                type="number"
                step="0.1"
                placeholder="36.75"
                value={form.suhu}
                onChange={(event) => setForm({ ...form, suhu: event.target.value })}
              />
            </div>
            <div className="space-y-1.5">
              <Label>Centang jika mengalami kondisi berikut</Label>
              <div className="flex h-10 items-center gap-4 rounded-lg border border-input bg-card px-3 text-sm">
                {(
                  [
                    ["batuk", "Batuk"],
                    ["flu", "Flu"],
                    ["sesak", "Sesak nafas"],
                  ] as const
                ).map(([key, label]) => (
                  <label key={key} className="flex items-center gap-1.5">
                    <input
                      type="checkbox"
                      checked={form[key]}
                      onChange={(event) => setForm({ ...form, [key]: event.target.checked })}
                      className="h-4 w-4 accent-[hsl(var(--primary))]"
                    />
                    {label}
                  </label>
                ))}
              </div>
            </div>
            <div className="space-y-1.5 sm:col-span-2 lg:col-span-1">
              <Label htmlFor="pantau-keluhan">Keluhan Lain</Label>
              <Textarea
                id="pantau-keluhan"
                rows={2}
                value={form.keluhan}
                onChange={(event) => setForm({ ...form, keluhan: event.target.value })}
              />
            </div>
            <div className="flex items-end">
              <Button type="submit" disabled={saving}>
                {saving ? "Menyimpan…" : "Simpan Pemantauan"}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>

      <SimpleCrud
        title="Pemantauan Isolasi Mandiri Saat Pandemi Covid-19"
        description="Catatan pemantauan harian suhu tubuh dan gejala pemudik selama isolasi mandiri."
        entity="pantau-covid"
        fields={FIELDS}
        columns={COLUMNS}
        searchFields={["keluhan", "status"]}
        searchPlaceholder="Cari keluhan atau status…"
        createLabel="Tambah Pemantauan"
        showNo
        selectable
        actionOnLeft
        canWrite
        options={{
          penduduk: daftar.map((item) => ({
            value: String(item.id),
            label: `${item.nama} — ${item.nik}`,
          })),
        }}
        filter={(row) => {
          if (pendudukId && String(row.pendudukId) !== pendudukId) return false;
          if (tanggalTiba && String(row.tanggalTiba ?? "").slice(0, 10) !== tanggalTiba) return false;
          return true;
        }}
        toolbar={
          <>
            <Select
              value={pendudukId}
              onChange={(event) => setPendudukId(event.target.value)}
              aria-label="Pilih NIK/Nama"
              className="w-full sm:w-56"
            >
              <option value="">-- Pilih NIK/Nama --</option>
              {daftar.map((item) => (
                <option key={item.id} value={String(item.id)}>
                  {item.nama} — {item.nik}
                </option>
              ))}
            </Select>
            <Select
              value={tanggalTiba}
              onChange={(event) => setTanggalTiba(event.target.value)}
              aria-label="Pilih Tanggal"
              className="w-full sm:w-44"
            >
              <option value="">-- Pilih Tanggal --</option>
              {tanggalList.map((item) => (
                <option key={item} value={item}>
                  {item}
                </option>
              ))}
            </Select>
          </>
        }
        ekspor={{
          fileName: "pemantauan-isolasi-mandiri",
          header: [
            "Data H+",
            "Tanggal Tiba",
            "Waktu Pantau",
            "NIK",
            "Nama",
            "Usia",
            "JK",
            "Suhu",
            "Batuk",
            "Flu",
            "Sesak",
            "Keluhan",
            "Status",
          ],
          values: (row) => [
            String(row.dataHPlus ?? ""),
            String(row.tanggalTiba ?? "").slice(0, 10),
            String(row.waktuPantau ?? "").slice(0, 10),
            warga(row).nik ?? "",
            warga(row).nama ?? "",
            usia(warga(row).tanggalLahir),
            warga(row).jenisKelamin ?? "",
            String(row.suhu ?? ""),
            row.batuk ? "Ya" : "Tidak",
            row.flu ? "Ya" : "Tidak",
            row.sesak ? "Ya" : "Tidak",
            String(row.keluhan ?? ""),
            String(row.status ?? ""),
          ],
        }}
        cetak={cetak}
      />
    </div>
  );
}