"use client";

import { useState } from "react";
import { ReferentielTable } from "./ReferentielTable";
import { ReferentielModal } from "./ReferentielModal";
import { useAdminReferentiel } from "../../../../app/hooks/useAdminReferentiel";
import { useToast } from "../../../../context/ToastContext";
import Link from "next/link";

interface Props {
  title: string;
  endpoint: string;
  columns: any[];
  emptyForm: Record<string, string>;
}

export default function ReferentielCRUD({
  title,
  endpoint,
  columns,
  emptyForm
}: Props) {
  const { data, create, update, remove } = useAdminReferentiel(endpoint);

  const [selected, setSelected] = useState<any>();
  const [open, setOpen] = useState(false);
  const { showToast } = useToast();

  return (
    <div className="bg-white rounded-2xl border border-[#dce8e2] shadow-sm p-3 mb-1">

      <Link
        href="/admin/referentiels"
        className="
          px-1 py-1 rounded-xl
          bg-white border border-[#dce8e2]
          text-[#2f5d4b]
        "
      >
        ← Retour liste référentiels
      </Link>

      <div className="flex items-center justify-between">

        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold text-[#1f5f4a]">
            {title}
          </h1>
        </div>

        <button
          onClick={() => {
            setSelected(undefined);
            setOpen(true);
          }}
          className="
        px-2 py-2
        rounded-xl
        bg-[#2f7d5f]
        text-white text-sm font-medium
        hover:bg-[#256b52]
        transition
        cursor-pointer
      "
        >
          Ajouter
        </button>
      </div>

      <ReferentielTable
        columns={columns}
        data={data}
        onEdit={(row) => {
          setSelected(row);
          setOpen(true);
        }}
        onDelete={(row) => {
          remove(row.id);
          showToast(
            'success',
            'Référentiel supprimé.'
          );
        }}
      />

      <ReferentielModal
        emptyForm={emptyForm}
        open={open}
        columns={columns}
        initialData={selected}
        onClose={() => setOpen(false)}
        onSave={async (form) => {

          if (selected?.id) {
            await update(selected.id, form);
            showToast(
              'success',
              'Référentiel mis à jour.'
            );
          } else {
            await create(form);
            showToast(
              'success',
              'Référentiel créé avec succès.'
            );
          }
          setOpen(false);
        }}
      />
    </div>
  );
}