"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: "lokasi", label: "Lokasi", required: true, full: true },
  { name: "jenis", label: "Jenis", placeholder: "Wilayah, Infrastruktur…" },
  { name: "kategori", label: "Kategori", placeholder: "Penduduk, Rumah, Fasilitas…" },
  { name: "aktif", label: "Aktif", type: "checkbox" },
];

const COLUMNS: CrudColumn[] = [
  { name: "lokasi", label: "Lokasi" },
  { name: "aktif", label: "Aktif" },
  { name: "jenis", label: "Jenis" },
  { name: "kategori", label: "Kategori" },
];

const PENGATURAN: SettingField[] = [
  { kunci: "peta.lat", label: "Latitude Pusat", defaultValue: "-7.6212" },
  { kunci: "peta.lng", label: "Longitude Pusat", defaultValue: "108.8125" },
  { kunci: "peta.zoom", label: "Zoom Awal", type: "number", defaultValue: "14" },
  {
    kunci: "peta.jenis",
    label: "Jenis Peta",
    type: "select",
    defaultValue: "osm",
    options: [
      { value: "osm", label: "OpenStreetMap" },
      { value: "hot", label: "OpenStreetMap H.O.T." },
      { value: "mapbox", label: "Mapbox" },
    ],
  },
  { kunci: "peta.mapbox_key", label: "Mapbox Key", full: true },
  {
    kunci: "peta.tile",
    label: "Tile URL",
    full: true,
    defaultValue: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  },
  { kunci: "peta.min_zoom", label: "Min Zoom Peta", type: "number", defaultValue: "10" },
  { kunci: "peta.max_zoom", label: "Max Zoom Peta", type: "number", defaultValue: "18" },
  { kunci: "peta.aktif", label: "Peta Aktif", type: "checkbox", defaultValue: "1" },
  {
    kunci: "peta.tampil_beranda",
    label: "Tampilkan di Beranda",
    type: "checkbox",
    defaultValue: "0",
  },
  {
    kunci: "peta.tampilkan_cdesa",
    label: "Tampilkan C-desa di Peta Website",
    type: "checkbox",
    defaultValue: "0",
  },
  {
    kunci: "peta.tampil_luas",
    label: "Tampil Luas Peta",
    type: "checkbox",
    defaultValue: "1",
  },
  {
    kunci: "peta.tampilkan_tombol",
    label: "Tampilkan Tombol Peta",
    type: "checkbox",
    defaultValue: "1",
  },
  {
    kunci: "peta.default_wilayah",
    label: "Default Tampil Peta Wilayah",
    type: "checkbox",
    defaultValue: "1",
  },
  {
    kunci: "peta.default_infrastruktur",
    label: "Default Tampil Peta Infrastruktur",
    type: "checkbox",
    defaultValue: "0",
  },
];

export default function PengaturanPetaPage() {
  return (
    <div className="space-y-5">
      <SimpleCrud
        title="Peta Lokasi"
        description="Daftar simpanan peta lokasi yang ditampilkan pada halaman pemetaan."
        entity="plan-lokasi"
        fields={FIELDS}
        columns={COLUMNS}
        searchPlaceholder="Cari lokasi, jenis, atau kategori…"
        createLabel="Tambah"
        showNo
        actionOnLeft
        ekspor={{
          fileName: "peta-lokasi",
          header: ["No", "Lokasi", "Aktif", "Jenis", "Kategori"],
          values: (row) => [
            "",
            String(row.lokasi ?? ""),
            row.aktif ? "Ya" : "Tidak",
            String(row.jenis ?? ""),
            String(row.kategori ?? ""),
          ],
        }}
      />
      <SettingsForm
        grup="peta"
        title="Pengaturan Tampilan Peta"
        description="Pusat peta, lapisan, zoom, dan tombol pada halaman pemetaan website."
        fields={PENGATURAN}
      />
    </div>
  );
}