'use client';

import { useEffect, useState } from "react";
import ConventionList from "./ConventionList";
import ObjectifList from "./ObjectifList";
import ConditionList from "./ConditionList";
import { createIndicateur, deleteIndicateur, getConventionsIndicateur, updateIndicateur } from "../../../api/acc_convention";
import ActionList from "./ActionList";
import ActionDetails from "./ActionDetails";

export default function IndicateurDetails({ selectedIndicateur, setSelectedIndicateur, isCreatingIndicateur,
  setIsCreatingIndicateur, fetchIndicateurs, indicateurForm, setIndicateurForm
}: any) {

  const [selectedConvention, setSelectedConvention] = useState<any>(null);
  const [conventionsIndicateur, setConventionsIndicateur] = useState([]);
  const [selectedAction, setSelectedAction] = useState<any>(null);

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

    setIndicateurForm({
      id: null,
      libelle: ""
    });

    setSelectedConvention(null);
    setConventionsIndicateur([]);
  }, [isCreatingIndicateur]);

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

    setIsCreatingIndicateur(false);

    setIndicateurForm({
      id: selectedIndicateur.id,
      libelle: selectedIndicateur.libelle
    });
  }, [selectedIndicateur]);

  const fetchConventionsIndicateur = async () => {
    try {
      const conventionsData =
        await getConventionsIndicateur(
          selectedIndicateur.id
        );

      setConventionsIndicateur(conventionsData);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    if (!selectedIndicateur?.id) return;

    fetchConventionsIndicateur();
  }, [selectedIndicateur]);

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

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

  const handleDeleteIndicateur = async (id: string) => {
    try {
      await deleteIndicateur(id);

      if (selectedIndicateur?.id === id) {
        setSelectedIndicateur(null);

        setIndicateurForm({
          id: null,
          libelle: ""
        });

        setIsCreatingIndicateur(false);
      }

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

  const handleSaveIndicateur = async () => {
    const payload = {
      libelle: indicateurForm.libelle
    };

    try {
      if (indicateurForm.id) {
        await updateIndicateur(indicateurForm.id, payload);
      } else {
        const newIndicateur = await createIndicateur(payload);
        setSelectedIndicateur(newIndicateur);
        setIsCreatingIndicateur(false);

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

  if (!selectedIndicateur && !isCreatingIndicateur) {
    return <div className="border rounded-xl p-4 flex items-center justify-center text-gray-400">
      Sélectionnez un indicateur d'accompagnement ou ajoutez-en un nouveau
    </div>
  }

  return (
    <div className="bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden">
      {/* STEP 1 : CRUD Indicateur */}
      <div className="mb-2 border-b border-[#dce8e2] pb-2">
        <div className="flex justify-between items-center mb-2">
          <h2 className="text-sm font-semibold text-[#1f5f4a]">
            Informations indicateur d'accompagnement
          </h2>
        </div>
        <div className="flex gap-1">
          <input
            className="text-xs font-medium p-2 h-6 rounded-lg border
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
            value={indicateurForm.libelle}
            placeholder="Libellé de l'indicateur" name={"libelle"}
            onChange={handleChange}
          />
          <button
            onClick={handleSaveIndicateur}
            className="inline-flex items-center gap-1
      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>
          {selectedIndicateur && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                handleDeleteIndicateur(selectedIndicateur.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>

      {/* STEP 2 : CRUD Convention */}
      {selectedIndicateur && (
        <div className="grid grid-cols-2 gap-2 overflow-hidden">
          <ConventionList
            conventions={conventionsIndicateur}
            selectedConvention={selectedConvention}
            setSelectedConvention={setSelectedConvention}
            selectedIndicateur={selectedIndicateur}
            fetchConventionsIndicateur={fetchConventionsIndicateur}
            fetchIndicateurs={fetchIndicateurs}
          />

          {/* STEP 3 : Actions + Objectifs + Conditions */}
          <div className="grid grid-rows-3 gap-2 overflow-hidden">
            <div className="grid grid-cols-2 gap-2 overflow-hidden">
              <ActionList selectedConvention={selectedConvention} selectedAction={selectedAction}
                setSelectedAction={setSelectedAction} />
              <ActionDetails
                selectedAction={selectedAction}
              />
            </div>
            <ObjectifList selectedConvention={selectedConvention} />
            <ConditionList selectedConvention={selectedConvention} />
          </div>
        </div>
      )}
    </div>
  );
}