'use client';

import { useRefData } from "../../../../app/hooks/useRefData";
import { Input } from "../../FormsFieldsTypes";
import { getDateError, computeDuree } from "../../../../app/utils/validationUsagerForm";
import { useState } from "react";
import { AutoComplete } from "../../ui/AutoComplete";
import { DateUtils } from "../../../../app/utils/date";

export default function ContratsTab({ data, onChange }: any) {
    const contrats = data.contrats?.list || [];
    const service_insertion = useRefData('service_insertion');
    const organisme_ru = useRefData('organisme_ru');

    const [selectedContrat, setSelectedContrat] = useState<number>(0);

    const updateContrats = (list: any[]) => {
        onChange("contrats", {
            ...data.contrats,
            list
        });
    };

    const updateRow = (index: number, field: string, value: any) => {
        const updated = [...contrats];
        updated[index] = { ...updated[index], [field]: value };

        // compute durée
        if (field === "debut" || field === "fin") {
            const error = getDateError(updated[index].debut, updated[index].fin);
            updated[index].error = error || undefined;

            if (!error) {
                updated[index].duree = computeDuree(updated[index].debut, updated[index].fin);
            }
            else {
                updated[index].duree = 0;
            }
        }

        updateContrats(updated);
    };

    const addRow = () => {
        updateContrats([
            {
                debut: "",
                fin: "",
                duree: 0,
                numero: "",
                service_insertion: "",
                gestionnaire: "",
                conseiller_rsa: "",
                organisme_ru: "",
                referent_unique: ""
            },
            ...contrats,
        ]);
    };

    const removeRow = (index: number) => {
        const updated = [...contrats];
        updated.splice(index, 1);
        updateContrats(updated);
    };

    // 📊 stats
    const nombre = contrats.length;

    const dureeMoyenne = nombre > 0 ? Math.round(contrats.reduce((acc: number, c: any) => acc + (c.duree || 0), 0) / nombre) : 0;

    const dernierFin = contrats.length > 0 ? contrats.map((c: any) => c.fin).filter(Boolean).sort().reverse()[0] : null;

    return (
        <div className="flex flex-col gap-1">

            <div className="bg-white p-2 rounded-xl shadow-sm">
                <div className="grid md:grid-cols-4 gap-2 items-end">

                    <Input
                        label="N° CAF"
                        value={data.contrats?.caf}
                        onChange={(name: string, value: any) => onChange("contrats", {
                            ...data.contrats,
                            caf: value
                        })}
                        name={"caf"} />

                    <div className="bg-[#f5faf8] rounded-lg p-2">
                        <div className="text-xs text-[#6b7f77]">
                            Nombre de contrats
                        </div>
                        <div className="font-semibold text-[#1f5f4a]">
                            {nombre}
                        </div>
                    </div>

                    <div className="bg-[#f5faf8] rounded-lg p-2">
                        <div className="text-xs text-[#6b7f77]">
                            Durée moyenne
                        </div>
                        <div className="font-semibold text-[#1f5f4a]">
                            {dureeMoyenne} mois
                        </div>
                    </div>

                    <div className="bg-[#f5faf8] rounded-lg p-2">
                        <div className="text-xs text-[#6b7f77]">
                            Fin dernier contrat
                        </div>

                        <div className="font-semibold text-[#1f5f4a]">
                            {DateUtils.short(dernierFin) || "-"}
                        </div>
                    </div>

                </div>
            </div>

            <button
                onClick={addRow}
                className="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"
            >
                + Nouveau contrat
            </button>
            <div className="grid md:grid-cols-14 gap-1">
                <div className="md:col-span-6">

                    <div className="bg-white rounded-xl shadow-sm border border-[#dce8e2] flex flex-col">

                        <div className="p-2 flex justify-between items-center">
                            <h2 className="font-semibold text-[#1f5f4a]">
                                Liste des contrats
                            </h2>

                            <div className="overflow-y-auto">

                                {contrats.length === 0 && (
                                    <div className="p-4 text-sm text-gray-400">
                                        Aucun contrat
                                    </div>
                                )}

                                {contrats.map((c: any, i: number) => (
                                    <div
                                        key={i}
                                        onClick={() => setSelectedContrat(i)}
                                        className={`
                cursor-pointer
                p-3
                transition

                ${selectedContrat === i
                                                ? "bg-green-50 border-l-4 border-l-[#2f7d5f]"
                                                : "hover:bg-gray-50"
                                            }
              `}
                                    >

                                        <div className="flex justify-between">

                                            <div>

                                                <div className="font-medium text-[#1f5f4a]">
                                                    {c.numero || `Contrat #${i + 1}`}
                                                </div>

                                                <div className="text-xs text-gray-500">
                                                    {DateUtils.short(c.debut)} → {DateUtils.short(c.fin)}
                                                </div>

                                            </div>

                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation();
                                                    removeRow(i);
                                                }}
                                                className="
                    text-red-600
                    text-xs
                    hover:bg-red-50
                    px-1 py-1
                    rounded-2xl
                    mx-5
                  "
                                            >
                                                Supprimer
                                            </button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>

                <div className="md:col-span-8">

                    {contrats[selectedContrat] && (
                        <div className="bg-white p-4 rounded-xl shadow-sm">

                            <h2 className="font-semibold text-[#1f5f4a] mb-4">
                                Détails du contrat
                            </h2>
                            <div className="grid md:grid-cols-3 gap-3">
                                <Input type="date" label="Début" value={contrats[selectedContrat].debut}
                                    className={contrats[selectedContrat].error ? "border-red-500" : ""}
                                    onChange={(n: string, v: any) => updateRow(selectedContrat, "debut", v)} name={"debut"} />

                                <div className="flex flex-col">
                                    <Input type="date" label="Fin" value={contrats[selectedContrat].fin}
                                        className={contrats[selectedContrat].error ? "border-red-500" : ""}
                                        onChange={(n: string, v: any) => updateRow(selectedContrat, "fin", v)} name={"fin"} />

                                    {contrats[selectedContrat].error && (
                                        <p className="text-red-500 text-xs mt-1">
                                            {contrats[selectedContrat].error}
                                        </p>
                                    )}
                                </div>

                                <Input label="Durée (mois)" value={contrats[selectedContrat].duree} name={"duree"} />

                                <Input label="N° contrat" value={contrats[selectedContrat].numero}
                                    onChange={(n: string, v: any) => updateRow(selectedContrat, "numero", v)} name={"numero"} />

                                <AutoComplete
                                    label="Service insertion"
                                    options={
                                        service_insertion.data
                                    }
                                    value={contrats[selectedContrat].service_insertion}
                                    placeholder="Rechercher un service d'insertion"

                                    onSelect={(option: any) => {

                                        updateRow(selectedContrat,
                                            "service_insertion",
                                            option.value
                                        );
                                    }}
                                />

                                <Input label="Gestionnaire" value={contrats[selectedContrat].gestionnaire}
                                    onChange={(n: string, v: any) => updateRow(selectedContrat, "gestionnaire", v)}
                                    name={"gestionnaire"} />

                                <Input label="Conseiller RSA" value={contrats[selectedContrat].conseiller_rsa}
                                    onChange={(n: string, v: any) => updateRow(selectedContrat, "conseiller_rsa", v)}
                                    name={"conseiller_rsa"} />

                                <AutoComplete
                                    label="Organisme RU"
                                    options={
                                        organisme_ru.data
                                    }
                                    value={contrats[selectedContrat].organisme_ru}
                                    placeholder="Rechercher un organisme RU"

                                    onSelect={(option: any) => {

                                        updateRow(selectedContrat,
                                            "organisme_ru",
                                            option.value
                                        );
                                    }}
                                />

                                <Input label="Référent unique" value={contrats[selectedContrat].referent_unique}
                                    onChange={(n: string, v: any) => updateRow(selectedContrat, "referent_unique", v)}
                                    name={"referent_unique"} />

                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}