"use client";

import { useState } from "react";
import { Settings2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";

/**
 * Delapan kunci yang sama dengan modal "Pengaturan Kehadiran" (#pengaturan)
 * di OpenSID lama.
 */
const FIELDS: SettingField[] = [
  {
    kunci: "tampilkan_kehadiran",
    label: "Tampilkan kehadiran",
    type: "select",
    defaultValue: "1",
    options: [
      { value: "1", label: "Ya" },
      { value: "0", label: "Tidak" },
    ],
    help: "Tampilkan rekap kehadiran perangkat pada halaman layanan warga.",
  },
  {
    kunci: "ip_adress_kehadiran",
    label: "IP address kehadiran",
    placeholder: "Contoh: 172.20.20.21",
    help: "Batasi pencatatan kehadiran hanya dari alamat ini. Kosongkan bila tidak dibatasi.",
    full: true,
  },
  {
    kunci: "latar_kehadiran",
    label: "Latar kehadiran",
    type: "image",
    help: "Gambar latar pada kartu kehadiran perangkat.",
  },
  {
    kunci: "id_pengunjung_kehadiran",
    label: "ID pengunjung kehadiran",
    placeholder: "Contoh: 1",
    help: "Penduduk yang dipakai sebagai contoh nama pada preview kehadiran.",
  },
  {
    kunci: "rentang_waktu_masuk",
    label: "Rentang waktu masuk",
    type: "number",
    defaultValue: "10",
    help: "Toleransi terlambat dihitung dari jam masuk (menit).",
  },
  {
    kunci: "rentang_waktu_keluar",
    label: "Rentang waktu keluar",
    type: "number",
    defaultValue: "10",
    help: "Toleransi pulang dihitung dari jam keluar (menit).",
  },
  {
    kunci: "tampilkan_status_kehadiran_pada_hari_libur",
    label: "Tampilkan status kehadiran pada hari libur",
    type: "select",
    defaultValue: "1",
    options: [
      { value: "1", label: "Ya" },
      { value: "0", label: "Tidak" },
    ],
  },
  {
    kunci: "ikuti_hari_libur_terdaftar",
    label: "Ikuti hari libur terdaftar",
    type: "select",
    defaultValue: "0",
    options: [
      { value: "1", label: "Ya" },
      { value: "0", label: "Tidak" },
    ],
    help: "Tidak mencatat kehadiran pada tanggal yang ada di menu Hari Libur.",
  },
];

export function PengaturanKehadiran({ label = "Pengaturan" }: { label?: string }) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <Settings2 className="h-4 w-4" />
        {label}
      </Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Pengaturan Kehadiran</DialogTitle>
            <DialogDescription>
              Pengaturan ini dipakai bersama oleh seluruh menu Kehadiran.
            </DialogDescription>
          </DialogHeader>
          <SettingsForm
            grup="kehadiran"
            title="Pengaturan Kehadiran"
            fields={FIELDS}
            hideHeader
            cardTitle="Pengaturan Kehadiran"
          />
        </DialogContent>
      </Dialog>
    </>
  );
}