"use client";

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

const FIELDS: CrudField[] = [
  { name: "nama", label: "Nama Kegiatan", required: true, full: true },
  { name: "sumberDana", label: "Sumber Dana" },
  { name: "anggaran", label: "Pagu Anggaran", type: "number" },
  { name: "persentase", label: "Persentase", type: "number" },
  { name: "volume", label: "Volume" },
  { name: "tahun", label: "Tahun", type: "number" },
  { name: "pelaksana", label: "Pelaksana" },
  { name: "lokasi", label: "Lokasi" },
  { name: "gambar", label: "URL Gambar", full: true },
  { name: "mulai", label: "Mulai", type: "date" },
  { name: "selesai", label: "Selesai", type: "date" },
  {
    name: "status",
    label: "Status",
    type: "select",
    options: [
      { value: "Direncanakan", label: "Direncanakan" },
      { value: "Berjalan", label: "Berjalan" },
      { value: "Selesai", label: "Selesai" },
      { value: "Batal", label: "Batal" },
    ],
    defaultValue: "Direncanakan",
  },
  { name: "keterangan", label: "Keterangan", type: "textarea" },
];

const COLUMNS: CrudColumn[] = [
  { name: "nama", label: "Nama Kegiatan" },
  { name: "sumberDana", label: "Sumber Dana" },
  { name: "anggaran", label: "Pagu Anggaran" },
  {
    name: "persentase",
    label: "Persentase",
    render: (row) => (row.persentase !== null && row.persentase !== undefined ? `${row.persentase}%` : "-"),
  },
  { name: "volume", label: "Volume", hideOnMobile: true },
  { name: "tahun", label: "Tahun" },
  { name: "pelaksana", label: "Pelaksana", hideOnMobile: true },
  { name: "lokasi", label: "Lokasi" },
  {
    name: "gambar",
    label: "Gambar",
    render: (row) =>
      row.gambar ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={String(row.gambar)} alt="" className="h-10 w-14 rounded object-cover" />
      ) : (
        "-"
      ),
  },
  { name: "status", label: "Status" },
];

export default function PembangunanPage() {
  return (
    <SimpleCrud
      title="Pembangunan"
      description="Rencana dan realisasi kegiatan pembangunan desa."
      entity="pembangunan"
      fields={FIELDS}
      columns={COLUMNS}
      searchPlaceholder="Cari kegiatan atau lokasi…"
      createLabel="Tambah Kegiatan"
    />
  );
}