'use client';

import { createConvention, deleteConvention, updateConvention } from "../../../api/acc_convention";
import { DateUtils } from "../../../app/utils/date";
import { getDateError } from "../../../app/utils/validationUsagerForm";
import { useState } from "react";

export default function ConventionList({
  conventions,
  selectedConvention,
  setSelectedConvention,
  selectedIndicateur,
  fetchConventionsIndicateur,
  fetchIndicateurs
}: any) {

  const [conventionForm, setConventionForm] = useState({
    id: null,
    reference_convention: "",
    date_debut: "",
    date_fin: ""
  });

  const [isEditingConvention, setIsEditingConvention] = useState(false);

  const [errors, setErrors] = useState<any>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    const updatedForm = {
      ...conventionForm,
      [name]: value,
    };

    const error = getDateError(
      updatedForm.date_debut,
      updatedForm.date_fin
    );

    setConventionForm(updatedForm);

    setErrors((prev: any) => ({
      ...prev,
      dates: error,
    }));

  };

  const handleDeleteConvention = async (id: string) => {
    try {
      await deleteConvention(id);

      if (selectedConvention?.id === id) {
        setSelectedConvention(null);

        setConventionForm({
          id: null,
          reference_convention: "",
          date_debut: "",
          date_fin: ""
        });

        setIsEditingConvention(false);
      }

      await fetchConventionsIndicateur();
      await fetchIndicateurs();
    } catch (error) {
      console.error(error);
    }
  };

  const handleSaveConvention = async () => {
    const payload = {
      reference_convention: conventionForm.reference_convention,
      date_debut: conventionForm.date_debut,
      date_fin: conventionForm.date_fin,
      id_indicateur: selectedIndicateur.id
    };

    try {
      if (conventionForm.id) {
        await updateConvention(conventionForm.id, payload);
      } else {
        await createConvention(payload);
      }
      await fetchConventionsIndicateur();
      await fetchIndicateurs();
      setIsEditingConvention(false);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="bg-white border border-[#dce8e2] rounded-xl p-3 overflow-y-auto">
      <div className="flex justify-between mb-1">
        <h3 className="font-semibold text-[#1f5f4a]">Conventions</h3>
        <button
          className="inline-flex items-center gap-2
      px-1 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer
      "
          onClick={() => {
            setIsEditingConvention(true);

            setConventionForm({
              id: null,
              reference_convention: "",
              date_debut: "",
              date_fin: ""
            });
          }}
        >
          + Ajouter
        </button>
      </div>
      {isEditingConvention && (
        <div className="space-y-1 mb-3">
          <input
            className="w-full text-xs font-medium p-2 h-6 rounded-lg border
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"

            placeholder="Référence"
            name="reference_convention"
            value={conventionForm.reference_convention}
            onChange={handleChange}
          />
          <div className="grid grid-cols-2 gap-2">
            <input
              type="date"
              className={`text-xs font-medium p-2 h-6 rounded-lg border
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20 ${errors.dates ? "border-red-500" : ""
                }`}
              placeholder="Date début"
              name="date_debut"
              value={conventionForm.date_debut}
              onChange={handleChange}
            />
            <input
              type="date"
              className={`text-xs font-medium p-2 h-6 rounded-lg border
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20 ${errors.dates ? "border-red-500" : ""
                }`}
              placeholder="Date fin"
              name="date_fin"
              value={conventionForm.date_fin}
              onChange={handleChange}
            />
            {errors.dates && (
              <p className="text-red-500 text-sm mt-1">
                {errors.dates}
              </p>
            )}
          </div>
          <button
            className="inline-flex items-center gap-2
      px-1 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer
      "
            onClick={handleSaveConvention}
            disabled={errors.dates}
          >
            Enregistrer
          </button>
        </div>
      )}

      {conventions.length < 1 && (
        <div className="border rounded-xl p-4 flex items-center justify-center text-gray-400">
          Aucune convention renseignée
        </div>
      )}

      <div className="space-y-1">
        {conventions.map((c: any) => (
          <div
            key={c.id}
            onClick={() => {
              setSelectedConvention(c);
              setConventionForm({
                reference_convention: c.reference_convention,
                date_debut: c.date_debut,
                date_fin: c.date_fin,
                id: c.id
              });
            }}
            className={`p-2 rounded-lg cursor-pointer ${selectedConvention?.id === c.id
              ? "bg-green-100 border border-green-600"
              : "bg-gray-50"}`}
          >
            <div className="grid grid-cols-2 font-medium">{c.reference_convention}
              <div className="text-sm text-gray-500">
                {DateUtils.short(c.date_debut)} → {DateUtils.short(c.date_fin)}
              </div>

            </div>

            <button
              className="inline-flex items-center gap-2
      px-1 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer
      "
              onClick={(e) => {
                e.stopPropagation();

                setConventionForm({
                  id: c.id,
                  reference_convention: c.reference_convention,
                  date_debut: c.date_debut,
                  date_fin: c.date_fin
                });

                setIsEditingConvention(true);
              }}
            >
              Modifier
            </button>
            <button
              onClick={(e) => {
                e.stopPropagation();
                handleDeleteConvention(c.id);
              }}
              className="px-1 py-1
    text-xs font-semibold
    rounded-lg
    text-red-600
    bg-white
    border border-red-200
    hover:bg-red-50
    hover:border-red-300
    hover:shadow-sm
    active:scale-[0.98]
    transition
    cursor-pointer
    "            >
              🗑️
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}