"use client";

import { useState } from "react";
import { useParams } from "next/navigation";
import {
  SimpleCrud,
  type CrudColumn,
  type CrudField,
  type CrudRow,
} from "@/components/admin/simple-crud";
import { Select } from "@/components/ui/select";

const CDESA_FIELDS: CrudField[] = [
  { name: "nomor", label: "Nomor C-Desa", required: true },
  { name: "namaDiCdesa", label: "Nama di C-Desa" },
  { name: "pemilik", label: "Nama Pemilik", required: true },
  { name: "nik", label: "NIK" },
  { name: "luas", label: "Luas (m²)", type: "number" },
  { name: "alamat", label: "Alamat", full: true },
  { name: "keterangan", label: "Keterangan", type: "textarea" },
];

const CDESA_COLUMNS: CrudColumn[] = [
  { name: "nomor", label: "No. C-Desa" },
  { name: "namaDiCdesa", label: "Nama di C-Desa" },
  { name: "pemilik", label: "Nama Pemilik" },
  { name: "nik", label: "NIK", hideOnMobile: true },
  {
    name: "_count",
    label: "Jumlah Persil",
    render: (row: CrudRow) => {
      const count = row._count as { persil?: number } | undefined;
      return count?.persil ?? 0;
    },
  },
];

const PERSIL_FIELDS: CrudField[] = [
  { name: "nomor", label: "Nomor Persil", required: true },
  { name: "noUrutBidang", label: "No. Urut Bidang" },
  {
    name: "tipe",
    label: "Tipe",
    type: "select",
    options: [
      { value: "", label: "— Pilih Tipe —" },
      { value: "Tanah Kering", label: "Tanah Kering" },
      { value: "Tanah Basah", label: "Tanah Basah" },
      { value: "Tanah Kering & Basah", label: "Tanah Kering & Basah" },
    ],
  },
  { name: "kelasTanah", label: "Kelas Tanah" },
  { name: "cdesaId", label: "ID C-Desa", type: "number", help: "Opsional, hubungkan dengan C-Desa." },
  { name: "lokasi", label: "Lokasi" },
  { name: "luas", label: "Luas (m²)", type: "number" },
  { name: "penggunaan", label: "Penggunaan" },
  { name: "keterangan", label: "Keterangan", type: "textarea" },
];

const PERSIL_COLUMNS: CrudColumn[] = [
  {
    name: "nomor",
    label: "No. Persil : No. Urut Bidang",
    render: (row: CrudRow) =>
      row.noUrutBidang ? `${String(row.nomor)} : ${String(row.noUrutBidang)}` : String(row.nomor ?? ""),
  },
  { name: "tipe", label: "Tipe" },
  { name: "kelasTanah", label: "Kelas Tanah" },
  { name: "luas", label: "Luas (m²)" },
  { name: "lokasi", label: "Lokasi", hideOnMobile: true },
  { name: "cdesaId", label: "C-Desa Awal" },
];

const TIPE_OPTIONS = ["Tanah Kering", "Tanah Basah", "Tanah Kering & Basah"];

export default function PertanahanPage() {
  const params = useParams<{ slug: string }>();
  const [tipe, setTipe] = useState("");
  const [kelas, setKelas] = useState("");

  if (params.slug === "cdesa") {
    return (
      <SimpleCrud
        title="C-Desa"
        description="Buku C-Desa (letter C) sebagai catatan kepemilikan tanah desa."
        entity="cdesa"
        fields={CDESA_FIELDS}
        columns={CDESA_COLUMNS}
        searchPlaceholder="Cari nomor atau pemilik…"
        createLabel="Tambah C-Desa"
        showNo
        actionOnLeft
      />
    );
  }
  return (
    <SimpleCrud
      title="Daftar Persil"
      description="Daftar persil tanah beserta lokasi dan penggunaannya."
      entity="persil"
      fields={PERSIL_FIELDS}
      columns={PERSIL_COLUMNS}
      searchPlaceholder="Cari nomor atau lokasi…"
      createLabel="Tambah Persil"
      showNo
      actionOnLeft
      filter={(row) =>
        (!tipe || row.tipe === tipe) &&
        (!kelas || String(row.kelasTanah ?? "").toLowerCase().includes(kelas.toLowerCase()))
      }
      toolbar={
        <>
          <Select
            value={tipe}
            onChange={(event) => setTipe(event.target.value)}
            aria-label="Pilih Tipe"
            className="w-44"
          >
            <option value="">Pilih Tipe</option>
            {TIPE_OPTIONS.map((item) => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </Select>
          <Select
            value={kelas}
            onChange={(event) => setKelas(event.target.value)}
            aria-label="Pilih Kelas Tanah"
            className="w-40"
          >
            <option value="">Pilih Kelas Tanah</option>
            <option value="I">Kelas I</option>
            <option value="II">Kelas II</option>
            <option value="III">Kelas III</option>
            <option value="IV">Kelas IV</option>
            <option value="V">Kelas V</option>
          </Select>
        </>
      }
    />
  );
}