'use client';

import { getActionsConvention, createActionConvention, updateActionConvention, deleteActionConvention, getFinanceursAction } from "../../../api/acc_convention";
import { useEffect, useState } from "react";

export default function ActionList({ selectedConvention, selectedAction, setSelectedAction }: any) {
  const [actionsConvention, setActionsConvention] = useState([]);
  const [isEditingActionConvention, setIsEditingActionConvention] = useState(false);

  const [actionForm, setActionForm] = useState({
    id: null,
    description_action: ""
  });

  const fetchActionsConvention = async () => {
    try {
      const conventionsData = await getActionsConvention(selectedConvention.id);
      setActionsConvention(conventionsData);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!selectedConvention) return;
    fetchActionsConvention();
  }, [selectedConvention]);

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

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

  const handleDeleteAction = async (id: string) => {
    try {
      await deleteActionConvention(id);

      if (selectedAction?.id === id) {
        setSelectedAction(null);

        setActionForm({
          id: null,
          description_action: ""
        });

        setIsEditingActionConvention(false);
      }

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

  const handleSaveAction = async () => {
    const payload = {
      description_action: actionForm.description_action,
      id_reference_convention: selectedConvention.id
    };

    try {
      if (actionForm?.id) {
        await updateActionConvention(actionForm.id, payload);
      } else {
        await createActionConvention(payload);
      }
      await fetchActionsConvention();
      setIsEditingActionConvention(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]">Actions</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={() => {
            setIsEditingActionConvention(true);

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

      </div>

      {isEditingActionConvention && (
        <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="Description action"
            name="description_action"
            value={actionForm.description_action}
            onChange={handleChange}
          />
          <button
            onClick={handleSaveAction}
            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>
      )}

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

      <div className="space-y-2">
        {actionsConvention.map((a: any) => (
          <div
            key={a.id}
            onClick={async () => {
              setSelectedAction(a);
              setActionForm({
                id: a.id,
                description_action: a.description_action,
              });
              setIsEditingActionConvention(true);
              await getFinanceursAction(a.id);
            }}
            className={`p-2 rounded-lg cursor-pointer ${selectedAction?.id === a.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">
                {a.description_action}
              </span>

              <button
                onClick={(e) => {
                  e.stopPropagation();
                  handleDeleteAction(a.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>
  );
}