"use client";

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

const PESAN_FIELDS: CrudField[] = [
  { name: "pengirim", label: "Nama", required: true },
  { name: "telepon", label: "Nomor HP" },
  { name: "subjek", label: "Subjek", full: true },
  { name: "pesan", label: "Isi Pesan", type: "textarea", required: true },
  { name: "dibaca", label: "Sudah Dibaca", type: "checkbox" },
];

const PESAN_COLUMNS: CrudColumn[] = [
  { name: "pengirim", label: "Nama" },
  { name: "telepon", label: "Nomor HP" },
  { name: "pesan", label: "Isi Pesan" },
  {
    name: "waktu",
    label: "Diterima",
    render: (row) => (row.waktu ? String(row.waktu).slice(0, 16).replace("T", " ") : "-"),
  },
  {
    name: "dibaca",
    label: "Dibaca",
    render: (row) => (row.dibaca ? "Ya" : "Belum"),
  },
];

const KONTAK_FIELDS: CrudField[] = [
  { name: "nama", label: "Nama", required: true },
  { name: "telepon", label: "Telepon", required: true },
  { name: "email", label: "Email", type: "email" },
  { name: "telegram", label: "Telegram" },
  {
    name: "kirimMelalui",
    label: "Kirim Melalui",
    type: "select",
    options: [
      { value: "SMS", label: "SMS" },
      { value: "WhatsApp", label: "WhatsApp" },
      { value: "Telegram", label: "Telegram" },
    ],
  },
  { name: "alamat", label: "Alamat", full: true },
  { name: "grup", label: "Grup", placeholder: "RT, RW, PKK…" },
];

const KONTAK_COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Nama" },
  { name: "telepon", label: "Telepon" },
  { name: "email", label: "Email" },
  { name: "telegram", label: "Telegram" },
  { name: "kirimMelalui", label: "Kirim Melalui" },
  { name: "alamat", label: "Alamat", hideOnMobile: true },
  { name: "grup", label: "Grup", hideOnMobile: true },
];

const PESAN_SETTINGS: SettingField[] = [
  {
    kunci: "hubungwarga.sms_aktif",
    label: "Aktifkan SMS",
    type: "checkbox",
    defaultValue: "0",
  },
  {
    kunci: "hubungwarga.balas_otomatis",
    label: "Balas Otomatis",
    type: "checkbox",
    defaultValue: "0",
  },
  {
    kunci: "hubungwarga.pesan_balasan",
    label: "Isi Balasan Otomatis",
    type: "textarea",
    full: true,
  },
];

export default function HubungWargaPage() {
  const params = useParams<{ slug: string }>();
  if (params.slug === "pesan") {
    return (
      <div className="space-y-5">
        <SimpleCrud
          title="Pesan Warga"
          description="Pesan masuk dari warga untuk ditindaklanjuti."
          entity="pesan-warga"
          fields={PESAN_FIELDS}
          columns={PESAN_COLUMNS}
          searchPlaceholder="Cari nama atau nomor HP…"
          createLabel="Tambah Pesan"
        />
        <SettingsForm
          grup="hubungwarga"
          title="Pengaturan SMS"
          fields={PESAN_SETTINGS}
          hideHeader
          cardTitle="Pengaturan SMS"
        />
      </div>
    );
  }
  return (
    <SimpleCrud
      title="Kontak Warga"
      description="Buku kontak warga yang dipakai untuk komunikasi dan broadcast."
      entity="kontak-warga"
      fields={KONTAK_FIELDS}
      columns={KONTAK_COLUMNS}
      searchPlaceholder="Cari nama, telepon, email, atau telegram…"
      createLabel="Tambah Kontak"
    />
  );
}