"use client";

import { SimpleCrud, type CrudColumn, type CrudField } from "@/components/admin/simple-crud";
import { SettingsForm, type SettingField } from "@/components/admin/settings-form";

const FIELDS: CrudField[] = [
  { name: "nomorKk", label: "Nomor KK", required: true },
  { name: "kepalaKeluarga", label: "Kepala Keluarga", required: true },
  { name: "kepalaRumahTangga", label: "Kepala Rumah Tangga" },
  { name: "alamat", label: "Alamat", full: true },
  { name: "dusun", label: "Dusun" },
  { name: "rw", label: "RW" },
  { name: "rt", label: "RT" },
  { name: "jumlahAnggota", label: "Jumlah Anggota", type: "number", defaultValue: "0" },
  { name: "petugas", label: "Petugas" },
  { name: "responden", label: "Responden" },
  { name: "versiKuisioner", label: "Versi Kuisioner" },
  {
    name: "status",
    label: "Status",
    type: "select",
    options: [
      { value: "Belum Terverifikasi", label: "Belum Terverifikasi" },
      { value: "Terverifikasi", label: "Terverifikasi" },
      { value: "Ditolak", label: "Ditolak" },
    ],
    defaultValue: "Belum Terverifikasi",
  },
  { name: "keterangan", label: "Keterangan", type: "textarea" },
];

const COLUMNS: CrudColumn[] = [
  {
    name: "kepalaRumahTangga",
    label: "Kepala Rumah Tangga",
    render: (row) => String(row.kepalaRumahTangga || row.kepalaKeluarga || "-"),
  },
  { name: "kepalaKeluarga", label: "Kepala Keluarga" },
  { name: "jumlahAnggota", label: "Jumlah Anggota" },
  { name: "petugas", label: "Petugas" },
  { name: "responden", label: "Responden", hideOnMobile: true },
  { name: "versiKuisioner", label: "Versi Kuisioner", hideOnMobile: true },
  {
    name: "updatedAt",
    label: "Terakhir diubah",
    render: (row) => (row.updatedAt ? String(row.updatedAt).slice(0, 10) : "-"),
  },
  { name: "nomorKk", label: "Nomor KK", hideOnMobile: true },
  { name: "alamat", label: "Alamat", hideOnMobile: true },
];

const SETTINGS: SettingField[] = [
  {
    kunci: "dtks.sebutan_dtks",
    label: "Sebutan DTKS",
    defaultValue: "DTKS",
    placeholder: "DTKS",
  },
  {
    kunci: "dtks.sebutan_regsosek",
    label: "Sebutan Regsosek",
    defaultValue: "Regsosek",
    placeholder: "Regsosek",
  },
];

export default function DtksPage() {
  return (
    <div className="space-y-5">
      <SimpleCrud
        title="DTKS"
        description="Data Terpadu Kesejahteraan Sosial tingkat rumah tangga."
        entity="dtks"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari nomor KK atau kepala keluarga…"
        createLabel="Tambah Rumah Tangga"
        showNo
        actionOnLeft
      />
      <SettingsForm
        grup="dtks"
        title="Pengaturan Sebutan"
        fields={SETTINGS}
        hideHeader
        cardTitle="Sebutan DTKS / Regsosek"
      />
    </div>
  );
}