"use client";

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

export default function PersetujuanIzinPage() {
  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",
      },
      { name: "catatan", label: "Catatan Persetujuan", type: "textarea" },
    ],
    [daftar],
  );

  const columns = useMemo<CrudColumn[]>(
    () => [
      { name: "nama", label: "Nama Perangkat" },
      { name: "jabatan", label: "Jabatan" },
      { name: "jenis", label: "Jenis Izin", render: (row) => labelJenisIzin(row.jenis) },
      { name: "alasan", label: "Keterangan" },
      { name: "tanggalMulai", label: "Tanggal Mulai" },
      { name: "tanggalSelesai", label: "Tanggal Selesai" },
      { name: "durasi", label: "Durasi", render: (row) => durasiIzin(row.tanggalMulai, row.tanggalSelesai) },
      {
        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="Persetujuan Izin"
      description="Setujui atau tolak pengajuan izin perangkat desa."
      entity="izin-pamong"
      fields={fields}
      columns={columns}
      searchPlaceholder="Cari nama perangkat…"
      showNo
      actionOnLeft
      transform={transform}
      rowActions={(row: CrudRow, helpers) =>
        row.status === "MENUNGGU" ? (
          <>
            <button
              type="button"
              title="Setujui"
              onClick={async () => {
                await apiSend(`/master/izin-pamong/${row.id}`, "PATCH", { status: "DISETUJUI" });
                toast.success("Izin disetujui");
                helpers.refresh();
              }}
              className="rounded-md p-1.5 text-emerald-600 hover:bg-emerald-50"
            >
              <Check className="h-4 w-4" />
            </button>
            <button
              type="button"
              title="Tolak"
              onClick={async () => {
                await apiSend(`/master/izin-pamong/${row.id}`, "PATCH", { status: "DITOLAK" });
                toast.success("Izin ditolak");
                helpers.refresh();
              }}
              className="rounded-md p-1.5 text-red-600 hover:bg-red-50"
            >
              <X className="h-4 w-4" />
            </button>
          </>
        ) : null
      }
    />
  );
}