'use client';

import { useEffect, useState } from "react";
import { createConditionConvention, deleteConditionConvention, getConditionsConvention, updateConditionConvention } from "../../../api/acc_convention";

export default function ConditionList({ selectedConvention }: any) {

  const [conditionsConvention, setConditionsConvention] = useState([]);
  const [selectedConditionConvention, setSelectedConditionConvention] = useState<any>(null);
  const [isEditingConditionConvention, setIsEditingConditionConvention] = useState(false);
  const [conditionForm, setConditionForm] = useState({
    id: null,
    critere_validation: ""
  });

  const fetchConditionsConvention = async () => {
    try {
      const conventionsData = await getConditionsConvention(selectedConvention.id);
      setConditionsConvention(conventionsData);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!selectedConvention) return;

    fetchConditionsConvention();
  }, [selectedConvention]);

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

    setConditionForm((prev: any) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleDeleteCondition = async (id: string) => {
    try {
      await deleteConditionConvention(id);

      if (selectedConditionConvention?.id === id) {
        setSelectedConditionConvention(null);

        setConditionForm({
          id: null,
          critere_validation: ""
        });

        setIsEditingConditionConvention(false);
      }

      await fetchConditionsConvention();
    } catch (error) {
      console.error(error);
    }
  };

  const handleSaveCondition = async () => {
    const payload = {
      critere_validation: conditionForm.critere_validation,
      id_reference_convention: selectedConvention.id
    };

    try {
      if (conditionForm?.id) {
        await updateConditionConvention(conditionForm.id, payload);
      } else {
        await createConditionConvention(payload);
      }
      await fetchConditionsConvention();
      setIsEditingConditionConvention(false);
    } catch (error) {
      console.error(error);
    }
  };

  if (!selectedConvention) {
    return (
      <div className="border rounded-xl p-4 flex items-center justify-center text-gray-400">
        Sélectionnez une convention
      </div>
    );
  }

  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]">
          Conditions de validation
        </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={() => {
            setIsEditingConditionConvention(true);

            setConditionForm({
              id: null,
              critere_validation: ""
            });
          }}
        >
          + Ajouter
        </button>

      </div>

      {isEditingConditionConvention && (
        <div className="space-y-1 mb-3">
          <input
            className="text-xs font-medium p-2 h-6 rounded-lg border
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
            placeholder="Critère de validation"
            name="critere_validation"
            onChange={handleChange}
            value={conditionForm.critere_validation}
          />

          <button
            onClick={handleSaveCondition}
            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">
            Enregistrer
          </button>

        </div>
      )}

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

      <div className="space-y-2">
        {conditionsConvention.map((cc: any) => (
          <div
            key={cc.id}
            onClick={() => {
              setSelectedConditionConvention(cc);
              setConditionForm({
                id: cc.id,
                critere_validation: cc.critere_validation,
              });
              setIsEditingConditionConvention(true);
            }}
            className={`p-2 rounded-lg cursor-pointer ${selectedConditionConvention?.id === cc.id
              ? "bg-green-100 border border-green-600"
              : "bg-gray-50"}`}

          >

            <div className="flex items-center justify-between gap-2">
              <span className="font-medium text-sm">
                {cc.critere_validation}
              </span>

              <button
                onClick={(e) => {
                  e.stopPropagation();
                  handleDeleteCondition(cc.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>
    </div>
  );
}