"use client";

import { useMemo, useRef, useState } from "react";
import useSWR from "swr";
import {
  Download,
  FilePenLine,
  Plus,
  Printer,
  Search,
  Syringe,
  Trash2,
  Upload,
  UserRound,
  Users,
} from "lucide-react";
import { toast } from "sonner";
import type { Paginated, Penduduk, Vaksinasi, VaksinasiResponse } from "@/lib/types";
import { ApiError, apiSend, fetcher } from "@/lib/api";
import { unduhCsv } from "@/lib/sekretariat";
import { useSession } from "@/lib/use-session";
import { PageHeader, StatCard } from "@/components/page-header";
import { KopLaporan } from "@/components/admin/kop-laporan";
import { BarList } from "@/components/charts/bar-list";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { formatNumber } from "@/lib/utils";
import { JENIS_VAKSIN_OPTIONS } from "@/lib/kesehatan";

type FormState = {
  pendudukId: string;
  jenisVaksin: string;
  dosis: string;
  tanggal: string;
  posyandu: string;
  petugas: string;
  keterangan: string;
  tundaVaksin: boolean;
  suratDokter: string;
};

function todayInput() {
  const now = new Date();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  return `${now.getFullYear()}-${month}-${day}`;
}

const emptyForm: FormState = {
  pendudukId: "",
  jenisVaksin: JENIS_VAKSIN_OPTIONS[0],
  dosis: "1",
  tanggal: todayInput(),
  posyandu: "",
  petugas: "",
  keterangan: "",
  tundaVaksin: false,
  suratDokter: "",
};

function umurVaksin(penduduk: Vaksinasi["penduduk"]) {
  if (!penduduk.tanggalLahir) return "-";
  const lahir = new Date(penduduk.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 dusunVaksin(item: Vaksinasi) {
  return item.penduduk.rt?.parent?.parent?.nama ?? "-";
}

type ImporRow = {
  nik: string;
  jenisVaksin: string;
  dosis: number;
  tanggal: string;
  posyandu: string;
  petugas: string;
  keterangan: string;
};

const CONTOH_IMPOR_HEADER = [
  "NIK",
  "Jenis Vaksin",
  "Dosis",
  "Tanggal",
  "Posyandu",
  "Petugas",
  "Keterangan",
];

function parseImporCsv(text: string): ImporRow[] {
  const lines = text.replace(/\r/g, "").split("\n").filter((line) => line.trim());
  if (!lines.length) return [];
  const split = (line: string) => {
    const out: string[] = [];
    let current = "";
    let quote = false;
    for (let index = 0; index < line.length; index += 1) {
      const char = line[index];
      if (char === '"') {
        if (quote && line[index + 1] === '"') {
          current += '"';
          index += 1;
        } else {
          quote = !quote;
        }
      } else if (char === "," && !quote) {
        out.push(current);
        current = "";
      } else {
        current += char;
      }
    }
    out.push(current);
    return out.map((value) => value.trim());
  };
  const header = split(lines[0]).map((value) => value.toLowerCase());
  const cell = (cells: string[], name: string) => {
    const index = header.indexOf(name);
    return index >= 0 ? (cells[index] ?? "") : "";
  };
  return lines
    .slice(1)
    .map((line) => split(line))
    .map((cells) => ({
      nik: cell(cells, "nik"),
      jenisVaksin: cell(cells, "jenis vaksin"),
      dosis: Number(cell(cells, "dosis")) || 1,
      tanggal: cell(cells, "tanggal"),
      posyandu: cell(cells, "posyandu"),
      petugas: cell(cells, "petugas"),
      keterangan: cell(cells, "keterangan"),
    }))
    .filter((row) => row.nik && row.jenisVaksin && row.tanggal);
}

export default function VaksinasiPage() {
  const { user } = useSession();
  const canMutate = user?.role === "ADMIN" || user?.role === "OPERATOR";

  const { data, isLoading, mutate } = useSWR<VaksinasiResponse>("/vaksin", fetcher);
  const { data: penduduk } = useSWR<Paginated<Penduduk>>(
    "/penduduk?limit=200",
    fetcher,
  );
  const daftar = data?.data ?? [];

  const [search, setSearch] = useState("");
  const [jenisFilter, setJenisFilter] = useState("");
  const [dosisFilter, setDosisFilter] = useState("");
  const [dusunFilter, setDusunFilter] = useState("");
  const [formOpen, setFormOpen] = useState(false);
  const [editing, setEditing] = useState<Vaksinasi | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [saving, setSaving] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState<Vaksinasi | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [imporOpen, setImporOpen] = useState(false);
  const [imporRows, setImporRows] = useState<ImporRow[]>([]);
  const [imporFileName, setImporFileName] = useState("");
  const [importing, setImporting] = useState(false);
  const [bersihOpen, setBersihOpen] = useState(false);
  const [clearing, setClearing] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);

  const filtered = useMemo(() => {
    const keyword = search.trim().toLowerCase();
    return daftar.filter((item) => {
      if (jenisFilter && item.jenisVaksin !== jenisFilter) return false;
      if (dosisFilter && String(item.dosis) !== dosisFilter) return false;
      if (dusunFilter && dusunVaksin(item) !== dusunFilter) return false;
      if (!keyword) return true;
      return [
        item.penduduk.nama,
        item.penduduk.nik,
        item.penduduk.alamat,
        item.penduduk.keluarga?.noKk,
        item.posyandu,
        item.petugas,
      ]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(keyword));
    });
  }, [daftar, search, jenisFilter, dosisFilter, dusunFilter]);

  const dusunList = Array.from(
    new Set(daftar.map((item) => dusunVaksin(item)).filter((item) => item !== "-")),
  ).sort();

  function openCreate() {
    setEditing(null);
    setForm(emptyForm);
    setFormOpen(true);
  }

  function openEdit(item: Vaksinasi) {
    setEditing(item);
    setForm({
      pendudukId: String(item.pendudukId),
      jenisVaksin: item.jenisVaksin,
      dosis: String(item.dosis),
      tanggal: item.tanggal.slice(0, 10),
      posyandu: item.posyandu ?? "",
      petugas: item.petugas ?? "",
      keterangan: item.keterangan ?? "",
      tundaVaksin: Boolean(item.tundaVaksin),
      suratDokter: item.suratDokter ?? "",
    });
    setFormOpen(true);
  }

  async function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!editing && !form.pendudukId) {
      toast.error("Pilih warga terlebih dahulu");
      return;
    }
    setSaving(true);
    try {
      const payload: Record<string, unknown> = {
        jenisVaksin: form.jenisVaksin,
        dosis: Number(form.dosis) || 1,
        tanggal: form.tanggal,
        ...(form.posyandu ? { posyandu: form.posyandu } : {}),
        ...(form.petugas ? { petugas: form.petugas } : {}),
        ...(form.keterangan ? { keterangan: form.keterangan } : {}),
        ...(form.suratDokter ? { suratDokter: form.suratDokter } : {}),
        tundaVaksin: form.tundaVaksin,
      };
      if (editing) {
        await apiSend(`/vaksin/${editing.id}`, "PATCH", payload);
        toast.success("Vaksinasi diperbarui");
      } else {
        await apiSend("/vaksin", "POST", {
          ...payload,
          pendudukId: Number(form.pendudukId),
        });
        toast.success("Vaksinasi ditambahkan");
      }
      setFormOpen(false);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menyimpan data");
    } finally {
      setSaving(false);
    }
  }

  async function remove() {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await apiSend(`/vaksin/${deleteTarget.id}`, "DELETE");
      toast.success("Vaksinasi dihapus");
      setDeleteTarget(null);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal menghapus data");
    } finally {
      setDeleting(false);
    }
  }

  async function bacaBerkas(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    if (!file) return;
    const text = await file.text();
    const rows = parseImporCsv(text);
    setImporFileName(file.name);
    setImporRows(rows);
    if (rows.length) {
      toast.success(`${rows.length} baris siap diimpor`);
    } else {
      toast.error("Tidak ada baris valid. Periksa judul kolom berkas.");
    }
    if (fileRef.current) fileRef.current.value = "";
  }

  async function impor() {
    if (!imporRows.length) {
      toast.error("Unggah berkas terlebih dahulu");
      return;
    }
    setImporting(true);
    try {
      const hasil = await apiSend<{ ditambah: number; dilewati: number }>(
        "/vaksin/impor",
        "POST",
        { items: imporRows },
      );
      toast.success(
        `${formatNumber(hasil.ditambah)} data diimpor${
          hasil.dilewati ? `, ${formatNumber(hasil.dilewati)} dilewati` : ""
        }`,
      );
      setImporOpen(false);
      setImporRows([]);
      setImporFileName("");
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal mengimpor data");
    } finally {
      setImporting(false);
    }
  }

  async function bersihkan() {
    setClearing(true);
    try {
      const hasil = await apiSend<{ dihapus: number }>("/vaksin", "DELETE");
      toast.success(`${formatNumber(hasil.dihapus)} data vaksinasi dibersihkan`);
      setBersihOpen(false);
      await mutate();
    } catch (error) {
      toast.error(error instanceof ApiError ? error.message : "Gagal membersihkan data");
    } finally {
      setClearing(false);
    }
  }

  function unduhContoh() {
    unduhCsv("contoh-format-impor-vaksin.csv", CONTOH_IMPOR_HEADER, [
      [
        "3301010101010001",
        "COVID-19",
        "1",
        "2026-11-07",
        "Posyandu Melati I",
        "Petugas A",
        "Dosis pertama",
      ],
    ]);
  }

  return (
    <div className="animate-fade-in space-y-6">
      <div className="no-print">
        <PageHeader
          title="Vaksinasi"
          description="Pencatatan imunisasi dan vaksinasi warga dari posyandu dan puskesmas."
          action={
            <div className="flex flex-wrap gap-2">
              <Button variant="outline" onClick={() => setImporOpen(true)}>
                <Upload className="h-4 w-4" />
                Impor
              </Button>
              <Button variant="outline" onClick={() => setBersihOpen(true)}>
                <Trash2 className="h-4 w-4" />
                Bersihkan
              </Button>
              <Button variant="outline" onClick={unduhContoh}>
                <Download className="h-4 w-4" />
                Contoh Format
              </Button>
              <Button variant="outline" onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Cetak
              </Button>
              {canMutate && (
                <Button onClick={openCreate}>
                  <Plus className="h-4 w-4" />
                  Tambah Vaksinasi
                </Button>
              )}
            </div>
          }
        />
      </div>

      <KopLaporan title="Laporan Vaksinasi" />

      {isLoading || !data ? (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 3 }).map((_, index) => (
            <div key={index} className="h-28 animate-pulse rounded-xl bg-muted" />
          ))}
        </div>
      ) : (
        <>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            <StatCard
              title="Total vaksinasi"
              value={formatNumber(data.ringkasan.total)}
              hint="Seluruh dosis tercatat"
              icon={Syringe}
            />
            <StatCard
              title="Warga sasaran"
              value={formatNumber(data.ringkasan.sasaran)}
              hint="Penerima vaksin unik"
              icon={Users}
              tone="sky"
            />
            <StatCard
              title="Jenis vaksin"
              value={formatNumber(data.ringkasan.jenis)}
              hint="Varian vaksin terpakai"
              icon={UserRound}
              tone="violet"
            />
          </div>

          <Card className="no-print">
            <CardHeader>
              <CardTitle>Vaksinasi per Jenis Vaksin</CardTitle>
            </CardHeader>
            <CardContent>
              <BarList data={data.byJenis} />
            </CardContent>
          </Card>

          <Card>
            <CardContent className="space-y-4 p-4">
              <div className="no-print flex flex-col gap-3 sm:flex-row">
                <div className="relative flex-1">
                  <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                  <Input
                    value={search}
                    onChange={(event) => setSearch(event.target.value)}
                    placeholder="Cari nama, NIK, posyandu, atau petugas"
                    className="pl-9"
                  />
                </div>
                <Select
                  value={jenisFilter}
                  onChange={(event) => setJenisFilter(event.target.value)}
                  className="sm:w-52"
                >
                  <option value="">-- Pilih Jenis Vaksin --</option>
                  {JENIS_VAKSIN_OPTIONS.map((jenis) => (
                    <option key={jenis} value={jenis}>
                      {jenis}
                    </option>
                  ))}
                </Select>
                <Select
                  value={dosisFilter}
                  onChange={(event) => setDosisFilter(event.target.value)}
                  className="sm:w-44"
                >
                  <option value="">-- Status Vaksin --</option>
                  <option value="1">Vaksin Dosis 1</option>
                  <option value="2">Vaksin Dosis 2</option>
                </Select>
                <Select
                  value={dusunFilter}
                  onChange={(event) => setDusunFilter(event.target.value)}
                  className="sm:w-40"
                >
                  <option value="">-- Pilih Dusun --</option>
                  {dusunList.map((dusun) => (
                    <option key={dusun} value={dusun}>
                      {dusun}
                    </option>
                  ))}
                </Select>
              </div>

              {filtered.length ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-12">No</TableHead>
                      {canMutate && <TableHead className="w-24">Aksi</TableHead>}
                      <TableHead>Nik</TableHead>
                      <TableHead>Nama</TableHead>
                      <TableHead>No KK</TableHead>
                      <TableHead>Umur</TableHead>
                      <TableHead>Dusun</TableHead>
                      <TableHead>Alamat</TableHead>
                      <TableHead>Keterangan</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filtered.map((item, index) => (
                      <TableRow key={item.id}>
                        <TableCell className="text-muted-foreground">{index + 1}</TableCell>
                        {canMutate && (
                          <TableCell>
                            <div className="flex justify-start gap-1">
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => openEdit(item)}
                                aria-label="Ubah vaksinasi"
                              >
                                <FilePenLine className="h-4 w-4" />
                              </Button>
                              <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => setDeleteTarget(item)}
                                aria-label="Hapus vaksinasi"
                              >
                                <Trash2 className="h-4 w-4 text-destructive" />
                              </Button>
                            </div>
                          </TableCell>
                        )}
                        <TableCell className="font-mono text-[11px] text-muted-foreground">
                          {item.penduduk.nik}
                        </TableCell>
                        <TableCell className="font-medium">
                          {item.penduduk.nama}
                          <div className="text-[11px] font-normal text-muted-foreground">
                            {item.jenisVaksin} — Dosis {item.dosis}
                            {item.tundaVaksin ? " — Ditunda" : ""}
                          </div>
                        </TableCell>
                        <TableCell className="font-mono text-[11px] text-muted-foreground">
                          {item.penduduk.keluarga?.noKk ?? "-"}
                        </TableCell>
                        <TableCell className="whitespace-nowrap text-muted-foreground">
                          {umurVaksin(item.penduduk)}
                        </TableCell>
                        <TableCell className="text-muted-foreground">
                          {dusunVaksin(item)}
                        </TableCell>
                        <TableCell className="max-w-[240px] text-muted-foreground">
                          {item.penduduk.alamat ?? "-"}
                        </TableCell>
                        <TableCell className="max-w-[220px] truncate text-muted-foreground">
                          {item.keterangan ?? "-"}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <p className="py-10 text-center text-sm text-muted-foreground">
                  Belum ada data vaksinasi yang sesuai.
                </p>
              )}
            </CardContent>
          </Card>
        </>
      )}

      <Dialog open={formOpen} onOpenChange={setFormOpen}>
        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>
              {editing ? "Ubah Vaksinasi" : "Tambah Vaksinasi"}
            </DialogTitle>
            <DialogDescription>
              Catat pemberian vaksin beserta dosis dan tempat pelaksanaan.
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={save} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="penduduk">Warga</Label>
                <Select
                  id="penduduk"
                  value={form.pendudukId}
                  onChange={(event) =>
                    setForm({ ...form, pendudukId: event.target.value })
                  }
                  required
                  disabled={!!editing}
                >
                  <option value="">Pilih warga</option>
                  {(penduduk?.data ?? []).map((warga) => (
                    <option key={warga.id} value={warga.id}>
                      {warga.nama} — {warga.nik}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="jenisVaksin">Jenis vaksin</Label>
                <Select
                  id="jenisVaksin"
                  value={form.jenisVaksin}
                  onChange={(event) =>
                    setForm({ ...form, jenisVaksin: event.target.value })
                  }
                >
                  {JENIS_VAKSIN_OPTIONS.map((jenis) => (
                    <option key={jenis} value={jenis}>
                      {jenis}
                    </option>
                  ))}
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label>Tunda Vaksin</Label>
                <label className="flex h-10 items-center gap-2 rounded-lg border border-input bg-card px-3 text-sm">
                  <input
                    type="checkbox"
                    checked={form.tundaVaksin}
                    onChange={(event) =>
                      setForm({ ...form, tundaVaksin: event.target.checked })
                    }
                    className="h-4 w-4 accent-[hsl(var(--primary))]"
                  />
                  Tunda vaksin
                </label>
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="dosis">Dosis</Label>
                <Input
                  id="dosis"
                  type="number"
                  min={1}
                  max={10}
                  value={form.dosis}
                  onChange={(event) => setForm({ ...form, dosis: event.target.value })}
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="tanggal">Tanggal vaksinasi</Label>
                <Input
                  id="tanggal"
                  type="date"
                  value={form.tanggal}
                  onChange={(event) => setForm({ ...form, tanggal: event.target.value })}
                  required
                />
              </div>
              <div className="space-y-1.5">
                <Label htmlFor="posyandu">Posyandu / tempat</Label>
                <Input
                  id="posyandu"
                  value={form.posyandu}
                  onChange={(event) => setForm({ ...form, posyandu: event.target.value })}
                  placeholder="Posyandu Melati I"
                />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="petugas">Petugas</Label>
                <Input
                  id="petugas"
                  value={form.petugas}
                  onChange={(event) => setForm({ ...form, petugas: event.target.value })}
                  placeholder="Nama petugas"
                />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="keterangan">Keterangan</Label>
                <Textarea
                  id="keterangan"
                  value={form.keterangan}
                  onChange={(event) =>
                    setForm({ ...form, keterangan: event.target.value })
                  }
                  rows={2}
                />
              </div>
              <div className="space-y-1.5 sm:col-span-2">
                <Label htmlFor="suratDokter">Surat Dokter</Label>
                <Input
                  id="suratDokter"
                  value={form.suratDokter}
                  onChange={(event) =>
                    setForm({ ...form, suratDokter: event.target.value })
                  }
                  placeholder="Tautan atau keterangan surat dokter"
                />
              </div>
            </div>
            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setFormOpen(false)}
              >
                Batal
              </Button>
              <Button type="submit" disabled={saving}>
                {saving ? "Menyimpan..." : "Simpan"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Hapus vaksinasi?</DialogTitle>
            <DialogDescription>
              Catatan {deleteTarget?.jenisVaksin} dosis {deleteTarget?.dosis} untuk{" "}
              {deleteTarget?.penduduk.nama} akan dihapus permanen.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteTarget(null)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={remove} disabled={deleting}>
              {deleting ? "Menghapus..." : "Hapus"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={imporOpen} onOpenChange={setImporOpen}>
        <DialogContent className="max-w-xl">
          <DialogHeader>
            <DialogTitle>Impor Data Penerima Vaksin</DialogTitle>
            <DialogDescription>
              Pastikan format data yang akan diimpor sudah sesuai dengan aturan impor data.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 text-sm">
            <div className="space-y-1 rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground">
              <p className="font-medium text-foreground">Petunjuk:</p>
              <p>1. Simpan (Save) file spreadsheet sebagai file .csv.</p>
              <p>2. Pastikan kolom sesuai contoh format impor.</p>
              <p>3. Data dengan NIK sama akan ditambahkan sebagai dosis baru.</p>
            </div>
            <div className="space-y-1.5">
              <Label htmlFor="berkas-vaksin">File .csv untuk diimpor</Label>
              <input
                ref={fileRef}
                id="berkas-vaksin"
                type="file"
                accept=".csv,text/csv"
                onChange={bacaBerkas}
                className="block w-full rounded-lg border border-input bg-card px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-primary-foreground"
              />
              {imporFileName && (
                <p className="text-xs text-muted-foreground">
                  {imporFileName} — {imporRows.length} baris siap diimpor
                </p>
              )}
            </div>
            <button
              type="button"
              onClick={unduhContoh}
              className="text-sm font-medium text-primary hover:underline"
            >
              Contoh Format Impor Data Penerima Vaksin
            </button>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setImporOpen(false)}>
              Batal
            </Button>
            <Button onClick={impor} disabled={importing || !imporRows.length}>
              {importing ? "Mengimpor..." : "Impor"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={bersihOpen} onOpenChange={setBersihOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Bersihkan data vaksinasi?</DialogTitle>
            <DialogDescription>
              Seluruh {formatNumber(daftar.length)} catatan penerima vaksin akan dihapus permanen.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setBersihOpen(false)}>
              Batal
            </Button>
            <Button variant="destructive" onClick={bersihkan} disabled={clearing}>
              {clearing ? "Membersihkan..." : "Bersihkan"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}