'use client';

import { useEffect, useState } from "react";
import { getFinanceurs, getFinanceursAction, updateFinanceursAction } from "../../../api/acc_convention";

export default function ActionDetails({ selectedAction }: any) {
    const [financeurs, setFinanceurs] = useState<any[]>([]);
    const [selectedFinanceurs, setSelectedFinanceurs] = useState<number[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            const financeursData = await getFinanceurs();
            setFinanceurs(financeursData);
            if (!selectedAction) {
                setSelectedFinanceurs([]);
                return;
            }

            const financeursAction = await getFinanceursAction(selectedAction.id);
            setSelectedFinanceurs(
                financeursAction.map(
                    (f: any) => f.id
                )
            );
        };
        fetchData();
    }, [selectedAction]);

    const toggleFinanceur = (id: number) => {
        setSelectedFinanceurs((prev) => {
            if (prev.includes(id)) {
                return prev.filter(f => f !== id);
            }
            return [...prev, id];
        });
    };

    const handleSave = async () => {
        if (!selectedAction) return;

        await updateFinanceursAction(
            selectedAction.id,
            selectedFinanceurs
        );
    };

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

    return (
        <div className="bg-white border border-[#dce8e2] rounded-xl p-3">
            <div className="flex justify-between items-center mb-1">
                <h3 className="font-semibold text-[#1f5f4a]">
                    Financeurs associés
                </h3>

                <button
                    onClick={handleSave}
                    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>

            <div className="space-y-2">

                {financeurs.map((financeur) => (

                    <label
                        key={financeur.id}
                        className="
            flex items-center
            gap-2
            p-1
            rounded-lg
            hover:bg-gray-50
            cursor-pointer"
                    >
                        <input
                            type="checkbox"
                            checked={
                                selectedFinanceurs.includes(
                                    financeur.id
                                )
                            }
                            onChange={() =>
                                toggleFinanceur(
                                    financeur.id
                                )
                            }
                        />
                        <span>
                            {financeur.nom_financeur}
                        </span>
                    </label>
                ))}
            </div>
        </div>
    );
}