"use client";

import { useMemo } from "react";
import useSWR from "swr";
import { SimpleCrud, type CrudColumn, type CrudField } from "@/components/admin/simple-crud";
import { Badge } from "@/components/ui/badge";
import { fetcher } from "@/lib/api";
import type { Paginated, PerangkatDesa } from "@/lib/types";
import {
  JENIS_IZIN_OPTIONS,
  STATUS_IZIN_OPTIONS,
  badgeStatusIzin,
  labelJenisIzin,
  labelStatusIzin,
} from "@/lib/kehadiran";

export default function IzinPage() {
  const { data: perangkat } = useSWR<Paginated<PerangkatDesa> | PerangkatDesa[]>(
    "/perangkat?limit=200",
    fetcher,
  );
  const daftar = useMemo(
    () => (Array.isArray(perangkat) ? perangkat : perangkat?.data ?? []),
    [perangkat],
  );

  const fields = useMemo<CrudField[]>(
    () => [
      {
        name: "nama",
        label: "Nama Perangkat",
        type: "select",
        required: true,
        options: daftar.map((item) => ({ value: item.nama, label: item.nama })),
      },
      {
        name: "jenis",
        label: "Jenis Izin",
        type: "select",
        options: JENIS_IZIN_OPTIONS,
        defaultValue: "IZIN",
      },
      { name: "tanggalMulai", label: "Tanggal Mulai", type: "date", required: true },
      { name: "tanggalSelesai", label: "Tanggal Selesai", type: "date", required: true },
      { name: "alasan", label: "Keterangan", type: "textarea", required: true },
      {
        name: "status",
        label: "Status",
        type: "select",
        options: STATUS_IZIN_OPTIONS,
        defaultValue: "MENUNGGU",
        createOnly: true,
      },
      { name: "catatan", label: "Catatan", type: "textarea" },
    ],
    [daftar],
  );

  const columns = useMemo<CrudColumn[]>(
    () => [
      { name: "jenis", label: "Jenis Izin", render: (row) => labelJenisIzin(row.jenis) },
      { name: "tanggalMulai", label: "Tanggal Mulai" },
      { name: "tanggalSelesai", label: "Tanggal Selesai" },
      { name: "alasan", label: "Keterangan" },
      {
        name: "status",
        label: "Status",
        render: (row) => (
          <Badge variant={badgeStatusIzin(row.status)}>{labelStatusIzin(row.status)}</Badge>
        ),
      },
      { name: "createdAt", label: "Tanggal Pengajuan" },
    ],
    [],
  );

  function transform(values: Record<string, unknown>) {
    const dipilih = daftar.find((item) => item.nama === values.nama);
    return {
      ...values,
      jabatan: dipilih?.jabatan ?? "",
      pendudukId: dipilih?.pendudukId ?? undefined,
    };
  }

  return (
    <SimpleCrud
      title="Pengajuan Izin"
      description="Pengajuan izin, cuti, sakit, dan dinas luar perangkat desa."
      entity="izin-pamong"
      fields={fields}
      columns={columns}
      searchPlaceholder="Cari nama atau keterangan…"
      createLabel="Tambah"
      showNo
      selectable
      actionOnLeft
      transform={transform}
    />
  );
}