"use client";

import { useEffect, useState } from "react";
import type {
    Salarie,
    Contrat,
    Etablissement,
    TypeContrat,
    Poste,
    Arh,
    SecteurTravail,
    CanConvInser,
    CanMetiers,
    CanRuptBudg,
    CanTypContr,
    MotifsSortie,
    ClassifSalairesBase,
    Classification,
    Avenant
} from "@/types/type";
import { formatDate, formatDateForInput } from "@/utils/formatter";
import AvenantPanel from "@/components/employes/AvenantPanel";
import { MessageSquareMore } from "lucide-react";


type ContratsProps = {
    salarie: Salarie | null;
    onContratsChange?: () => void;
};

type ContractAccess = {
    allSectors: boolean;
    allEstablishments: boolean;
    allCategories: boolean;
    allContractTypes: boolean;
    sectors: Array<{ id: number; name: string }>;
    establishments: Array<{ id: number; name: string }>;
    categories: string[];
    contractTypes: Array<{ id: number; name: string }>;
};

function normalizeAccessValue(value?: string | null) {
    return (value ?? "")
        .trim()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "")
        .replace(/\s+/g, " ")
        .toLocaleUpperCase("fr");
}

function isAllowedValue(
    value: string | null | undefined,
    allowAll: boolean,
    allowedValues: string[],
) {
    if (allowAll) return true;

    const normalizedValue = normalizeAccessValue(value);
    return allowedValues.some(
        (allowedValue) => normalizeAccessValue(allowedValue) === normalizedValue,
    );
}

function Field({
    label,
    value,
    type = "text",
    min,
    max,
    readOnly = false,
    onChange,
}: {
    label: string;
    value?: string | number | null;
    type?: string;
    min?: string;
    max?: string;
    readOnly?: boolean;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}) {
    return (
        <div>
            <label className="block text-xs font-semibold text-blue-700">
                {label} :
            </label>

            <input
                type={type}
                min={min}
                max={max}
                readOnly={readOnly || !onChange}
                value={value ?? ""}
                onChange={onChange}
                className="h-6 w-full border border-slate-500 bg-white px-2 text-xs text-blue-700"
            />
        </div>
    );
}
function SelectField<T>({
    label,
    value,
    items,
    getKey,
    getValue,
    getLabel,
    placeholder,
    onChange,
}: {
    label: string;
    value?: string | null;
    items: T[];
    getKey: (item: T) => string | number;
    getValue: (item: T) => string;
    getLabel: (item: T) => string;
    placeholder: string;
    onChange: (value: string) => void;
}) {
    return (
        <div>
            {label && (
                <label className="block text-[11px] font-semibold text-blue-700">
                    {label} :
                </label>
            )}

            <select
                value={value ?? ""}
                onChange={(e) => onChange(e.target.value)}
                className="h-5 w-full border border-slate-500 bg-white px-1 text-xs text-blue-700"
            >
                <option value="">{placeholder}</option>

                {items.map((item) => (
                    <option key={getKey(item)} value={getValue(item)}>
                        {getLabel(item)}
                    </option>
                ))}
            </select>
        </div>
    );
}

function getNextWorkingDay(date?: string | Date | null): string {
    if (!date) return "";

    const next = new Date(date);
    if (Number.isNaN(next.getTime())) return "";

    next.setDate(next.getDate() + 1);

    while (next.getDay() === 0 || next.getDay() === 6) {
        next.setDate(next.getDate() + 1);
    }

    return next.toISOString().split("T")[0];
}

export default function Contrats({
    salarie,
    onContratsChange,
}: ContratsProps) {
    const [contrats, setContrats] = useState<Contrat[]>([]);
    const [selectedContrat, setSelectedContrat] = useState<Contrat | null>(null);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [etablissements, setEtablissements] = useState<Etablissement[]>([]);
    const [typeContrats, setTypeContrats] = useState<TypeContrat[]>([]);
    const [postes, setPostes] = useState<Poste[]>([]);
    const [classifications, setClassifications] = useState<Classification[]>([])
    const [arhs, setArhs] = useState<Arh[]>([]);
    const [secteursTravail, setSecteursTravail] = useState<SecteurTravail[]>([]);
    const [canTypcontr, setCanTypcontr] = useState<CanTypContr[]>([]);
    const [canConvinser, setCanConvinser] = useState<CanConvInser[]>([]);
    const [canRuptbudg, setCanRuptbudg] = useState<CanRuptBudg[]>([]);
    const [canMetiers, setCanMetiers] = useState<CanMetiers[]>([]);
    const [motifsSortie, setMotifsSortie] = useState<MotifsSortie[]>([]);
    const [classifSalairesBase, setClassifSalairesBase] = useState<ClassifSalairesBase[]>([]);
    const [isNewContrat, setIsNewContrat] = useState(false);
    const [avenants, setAvenants] = useState<Avenant[]>([]);
    const [selectedAvenant, setSelectedAvenant] = useState<Avenant | null>(null);
    const [isAvenantOpen, setIsAvenantOpen] = useState(false);
    const [originalDSP, setOriginalDSP] = useState<string | null>(null);
    const [isDeletingContrat, setIsDeletingContrat] = useState(false);
    const [contractAccess, setContractAccess] = useState<ContractAccess | null>(null);

    const finContrat = motifsSortie.find(
        (m) => m.libelles === "FIN DE CONTRAT"
    );

    const filteredTypContr = canTypcontr.filter(
        (item) => item.etablissement === "LESQUIN"
    );

    const filteredRuptBudg = canRuptbudg.filter(
        (item) => item.etablissement === "LESQUIN"
    );

    const filteredConvInser = canConvinser.filter(
        (item) => item.etablissement === "LESQUIN"
    );

    const filteredMetier = canMetiers.filter(
        (item) => item.etablissement === "LESQUIN" || item.etablissement === "ENVIE LESQUIN"
    );

    const allowedSectorNames = contractAccess?.sectors.map((item) => item.name) ?? [];
    const allowedEstablishmentNames =
        contractAccess?.establishments.map((item) => item.name) ?? [];
    const allowedCategoryNames = contractAccess?.categories ?? [];
    const allowedContractTypeNames =
        contractAccess?.contractTypes.map((item) => item.name) ?? [];

    const allowedEtablissements = contractAccess
        ? etablissements.filter((item) =>
            isAllowedValue(
                item.etb,
                contractAccess.allEstablishments,
                allowedEstablishmentNames,
            )
        )
        : [];

    const allowedTypeContrats = contractAccess
        ? typeContrats.filter((item) =>
            isAllowedValue(
                item.tcs,
                contractAccess.allContractTypes,
                allowedContractTypeNames,
            )
        )
        : [];

    const allowedSecteursTravail = contractAccess
        ? secteursTravail.filter((item) =>
            isAllowedValue(
                item.secteurs,
                contractAccess.allSectors,
                allowedSectorNames,
            )
        )
        : [];

    const activeClassifications = contractAccess
        ? classifications.filter(
            (item) =>
                item.actif === true &&
                isAllowedValue(
                    item.etablissement,
                    contractAccess.allEstablishments,
                    allowedEstablishmentNames,
                ) &&
                isAllowedValue(
                    item.classification,
                    contractAccess.allCategories,
                    allowedCategoryNames,
                )
        )
        : [];

    const allowedSalaryClassifications = contractAccess
        ? classifSalairesBase.filter(
            (item) =>
                isAllowedValue(
                    item.etablissement,
                    contractAccess.allEstablishments,
                    allowedEstablishmentNames,
                ) &&
                isAllowedValue(
                    item.statut_professionnel_dads,
                    contractAccess.allCategories,
                    allowedCategoryNames,
                )
        )
        : [];

    const secteurItems = [
        ...allowedSecteursTravail,
        ...(selectedContrat?.Secteur &&
            isAllowedValue(
                selectedContrat.Secteur,
                contractAccess?.allSectors ?? false,
                allowedSectorNames,
            ) &&
            !allowedSecteursTravail.some((item) => item.secteurs === selectedContrat.Secteur)
            ? [
                {
                    id: -1,
                    secteurs: selectedContrat.Secteur,
                },
            ]
            : []),
    ];

    console.log("selectedContrat complet =", selectedContrat);

    useEffect(() => {
        async function fetchContractAccess() {
            const token = localStorage.getItem("token");
            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/auth/me`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            if (!response.ok) {
                setContractAccess(null);
                return;
            }

            const data = await response.json();
            setContractAccess(data.user?.access ?? null);
        }

        fetchContractAccess();
    }, []);

    useEffect(() => {
        async function fetchAvenants() {
            const idContrat = selectedContrat?.id_contrat;

            const token = localStorage.getItem("token");

            if (!idContrat) {
                setAvenants([]);
                return;
            }

            const res = await fetch(
                `http://localhost:8000/api/contrats/${idContrat}/avenants`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await res.json();
            setAvenants(Array.isArray(data.items) ? data.items : []);
        }

        fetchAvenants();
    }, [selectedContrat?.id_contrat]);

    useEffect(() => {
        if (!salarie?.COS) return;

        async function fetchContrats() {
            const token = localStorage.getItem("token");

            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/employes/${salarie?.COS}/contrats`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await response.json();
            setContrats(data.items ?? []);
            setSelectedContrat(data.items?.[0] ?? null);
            setOriginalDSP(data.items?.[0]?.DSP ?? null);
            setSelectedIndex(0);
        }

        fetchContrats();
    }, [salarie?.COS]);

    useEffect(() => {
        async function fetchLookups() {
            const token = localStorage.getItem("token");

            const headers = {
                Authorization: `Bearer ${token}`,
            };


            const [
                arhsRes,
                secteursRes,
                canTypcontrRes,
                canConvinserRes,
                canRuptbudgRes,
                canMetiersRes,
                motifsSortieRes,
                classifSalairesBaseRes,
            ] = await Promise.all([
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/arh`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/secteurs-travail`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/can-typcontr`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/can-convinser`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/can-ruptbudg`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/can-metiers?limit=100`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/motifs-sortie`, { headers }),
                fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/classif-salairesbase?limit=100`, { headers }),
            ]);

            const [
                arhsData,
                secteursData,
                canTypcontrData,
                canConvinserData,
                canRuptbudgData,
                canMetiersData,
                motifsSortieData,
                classifSalairesBaseData
            ] = await Promise.all([
                arhsRes.json(),
                secteursRes.json(),
                canTypcontrRes.json(),
                canConvinserRes.json(),
                canRuptbudgRes.json(),
                canMetiersRes.json(),
                motifsSortieRes.json(),
                classifSalairesBaseRes.json(),

            ]);

            setArhs(arhsData.items ?? []);
            setSecteursTravail(secteursData.items ?? []);
            setCanTypcontr(canTypcontrData.items ?? []);
            setCanConvinser(canConvinserData.items ?? []);
            setCanRuptbudg(canRuptbudgData.items ?? []);
            setCanMetiers(canMetiersData.items ?? []);
            setMotifsSortie(motifsSortieData.items ?? []);
            setClassifSalairesBase(classifSalairesBaseData.items ?? [])
        }

        fetchLookups();
    }, []);

    useEffect(() => {
        async function fetchEtablissements() {
            const token = localStorage.getItem("token");

            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/etablissements`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await response.json();
            setEtablissements(data.items ?? []);
        }

        fetchEtablissements();
    }, []);

    useEffect(() => {
        async function fetchClassifications() {
            const token = localStorage.getItem("token");

            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/classifications?limit=100`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await response.json();
            console.log("data" + data.items)
            setClassifications(data.items ?? []);
        }

        fetchClassifications();
    }, []);


    useEffect(() => {
        async function fetchTypeContrats() {
            const token = localStorage.getItem("token");

            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/types-contrat?limit=100`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await response.json();
            setTypeContrats(data.items ?? []);
        }

        fetchTypeContrats();
    }, []);

    useEffect(() => {
        async function fetchPoste() {
            const token = localStorage.getItem("token");

            const response = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/postes?limit=100`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await response.json();
            setPostes(data.items ?? []);
        }

        fetchPoste();
    }, []);

    function getPeriodeEssaiDays(dateDebut: string, dateFin: string): number {
        const debut = new Date(dateDebut);
        const fin = new Date(dateFin);

        const diffMs = fin.getTime() - debut.getTime();
        const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)) + 1;

        // contrat > 6 mois + 1 jour => 1 mois
        const sixMonthsPlusOne = new Date(debut);
        sixMonthsPlusOne.setMonth(sixMonthsPlusOne.getMonth() + 6);
        sixMonthsPlusOne.setDate(sixMonthsPlusOne.getDate() + 1);

        if (fin >= sixMonthsPlusOne) {
            return 30; // à confirmer : Access affiche peut-être une vraie date +1 mois plutôt que 30 jours
        }

        const weeks = Math.ceil(diffDays / 7);

        return Math.min(weeks, 14);
    }

    function addDays(date: string, days: number): string {
        const result = new Date(date);
        result.setDate(result.getDate() + days);

        return result.toISOString().slice(0, 10);
    }

    function getMonthsBetween(startDate: string, endDate: string): number {
        const start = new Date(startDate);
        const end = new Date(endDate);

        let months =
            (end.getFullYear() - start.getFullYear()) * 12 +
            (end.getMonth() - start.getMonth());

        if (end.getDate() < start.getDate()) {
            months--;
        }

        return Math.max(0, months);
    }

    function updateContratDate<K extends keyof Contrat>(field: K, value: Contrat[K]) {
        setSelectedContrat((prev) => {
            if (!prev) return prev;

            const updated = {
                ...prev,
                [field]: value,
            };

            if (updated.DAE && updated.DSP) {
                updated.dureePeriodeEssai = getPeriodeEssaiDays(updated.DAE, updated.DSP);
            }

            return updated;
        });


    }

    return (
        <div className="grid h-full min-h-0 grid-cols-[360px_1fr] gap-3 text-xs text-black">

            {/* Liste contrats gauche */}
            <section className="grid min-h-0 grid-rows-[auto_1fr_auto] border border-slate-400 bg-white">
                <div className="grid grid-cols-[1fr_90px_90px_90px] border-b border-slate-400 bg-white px-1 py-1 font-semibold text-blue-700">
                    <span>Salarié</span>
                    <span>Emb.</span>
                    <span>Sortie Prév.</span>
                    <span>Sortie réelle</span>
                </div>

                <div className="min-h-0 overflow-y-auto">
                    {contrats.map((contrat, index) => (
                        <button
                            key={`${contrat.ID_Contrat ?? "contrat"}-${index}`}
                            type="button"
                            onClick={() => {
                                setSelectedContrat(contrat);
                                setSelectedIndex(index);
                                setIsNewContrat(false);
                                setOriginalDSP(contrat.DSI ?? contrat.DSP ?? null);
                            }}
                            className={`grid w-full grid-cols-[1fr_90px_90px_90px] border-b border-slate-300 px-1 py-0.5 text-left ${selectedIndex === index
                                ? "bg-black text-white"
                                : "bg-white text-black hover:bg-black hover:text-white"
                                }`}
                        >
                            <span className="truncate">{contrat.TCS ?? "-"}</span>
                            <span>{formatDate(contrat.DAE)}</span>
                            <span>{formatDate(contrat.DSP)}</span>
                            <span>{formatDate(contrat.DSR)}</span>
                        </button>
                    ))}

                </div>

                <div className="mt-2 flex gap-4 px-2">
                    <button
                        type="button"
                        className="rounded bg-sky-500 px-6 py-2 text-xs font-semibold text-white shadow"
                        onClick={() => {
                            const base = selectedContrat ?? contrats[0];

                            const newContrat: Contrat = {
                                id: 0,
                                ID_Contrat: null,
                                id_contrat: null,
                                Id_Salarie: salarie?.COS ?? null,
                                id_salarie: salarie?.COS ?? null,
                                TCS: "",
                                MotifContrat: "",
                                Secteur: "",
                                POS: "",
                                DAE: "",
                                DSI: "",
                                DSP: "",
                                DSR: "",
                                FPE: "",
                                DME: null,
                                DDA: "",
                                DFA: "",
                                DateImprimFS: null,
                                DateRemiseFE: null,
                                DateDdePref: null,
                                DateDdeVM: null,
                                D1C: null,
                                ETB: base?.ETB ?? "",
                                CAT: "",
                                NIV: "",
                                ECH: "",
                                COE: "",
                                SMBE: null,
                                MEN: null,
                                TXH: null,
                                DUE: "",
                                MSR: "",
                                NAG: "",
                                SMR: "",
                                CAN_ConvInser: null,
                                CAN_Metiers: null,
                                CAN_RuptBudg: null,
                                CAN_TypCont: null,
                                dureePeriodeEssai: null,
                            };

                            setSelectedContrat(newContrat);
                            setSelectedIndex(-1);
                            setOriginalDSP(null);
                            setIsNewContrat(true);
                        }}
                    >
                        Nouveau contrat
                    </button>

                    <button
                        type="button"
                        disabled={contrats.length === 0}
                        title={
                            contrats.length === 0
                                ? "Aucun contrat précédent à dupliquer"
                                : "Dupliquer le dernier contrat"
                        }
                        className="rounded bg-sky-500 px-6 py-2 text-xs font-semibold text-white shadow disabled:cursor-not-allowed disabled:bg-slate-300"
                        onClick={() => {
                            const lastContrat = contrats[0]; // à adapter si ta liste est triée inversement

                            if (!lastContrat) return;

                            const newContrat = {
                                ...lastContrat,

                                id: 0,
                                ID_Contrat: null,

                                DAE: getNextWorkingDay(lastContrat.DSP),
                                DSI: null,
                                DSP: null,
                                DSR: null,
                                FPE: null,

                                MSR: "",

                                dureePeriodeEssai: null,
                            };

                            setSelectedContrat(newContrat);
                            setIsNewContrat(true);
                            console.log("Contrat dupliqué :", newContrat);
                            console.log("id =", newContrat.id);
                            console.log("ID_Contrat =", newContrat.ID_Contrat);
                        }}
                    >
                        Dupliquer dernier contrat
                    </button>
                </div>
            </section>

            {/* Détail contrat droite */}
            <section className="grid grid-cols-2 content-start gap-2 border border-slate-400 bg-white p-3 text-xs">
                <div className="col-span-2 flex h-8 gap-2">
                    <button
                        type="button"
                        className="h-8 flex-1 rounded bg-green-600 text-xs font-semibold text-white"
                        onClick={async () => {
                            if (!selectedContrat) return;

                            const token = localStorage.getItem("token");

                            const { id, dureePeriodeEssai, ...payloadRaw } = selectedContrat;

                            const payload = Object.fromEntries(
                                Object.entries(payloadRaw).map(([key, value]) => [
                                    key,
                                    value === "" ? null : value,
                                ])
                            );
                            const contratId = selectedContrat.id;

                            const url = isNewContrat
                                ? `${process.env.NEXT_PUBLIC_API_URL}/api/contrats`
                                : `${process.env.NEXT_PUBLIC_API_URL}/api/contrats/${contratId}`;

                            const method = isNewContrat ? "POST" : "PUT";


                            console.log("isNewContrat =", isNewContrat);
                            console.log("selectedContrat.id =", selectedContrat.id);
                            console.log("selectedContrat.ID_Contrat =", selectedContrat.ID_Contrat);
                            console.log("URL =", url);

                            const res = await fetch(url, {
                                method,
                                headers: {
                                    "Content-Type": "application/json",
                                    Authorization: `Bearer ${token}`,
                                },
                                body: JSON.stringify(payload),
                            });

                            if (!res.ok) {
                                const errorData = await res.json().catch(() => null);
                                const message =
                                    errorData?.message ??
                                    "Impossible d'enregistrer ce contrat.";

                                console.error("Erreur sauvegarde contrat :", res.status, errorData);
                                window.alert(message);
                                return;
                            }

                            const result = await res.json();
                            console.log("Résultat sauvegarde =", result);

                            const savedContrat =
                                result.contrat ?? result.item ?? result.data ?? result;

                            setSelectedContrat(savedContrat);

                            setContrats((prev) =>
                                isNewContrat
                                    ? [savedContrat, ...prev]
                                    : prev.map((contrat) =>
                                        contrat.id === savedContrat.id ? savedContrat : contrat
                                    )
                            );

                            setIsNewContrat(false);
                            onContratsChange?.();


                            // Ici on pourra aussi recharger la liste des contrats
                        }}
                    >
                        {isNewContrat ? "Créer le contrat" : "Enregistrer les modifications"}
                    </button>

                    {selectedContrat && !isNewContrat && selectedContrat.id > 0 && (
                        <button
                            type="button"
                            disabled={isDeletingContrat}
                            className="h-8 rounded bg-red-600 px-5 text-xs font-semibold text-white hover:bg-red-700 disabled:cursor-wait disabled:bg-red-300"
                            onClick={async () => {
                                const confirmed = window.confirm(
                                    "Supprimer définitivement ce contrat ?\n\n" +
                                    "Cette action est réservée aux contrats créés par erreur."
                                );

                                if (!confirmed) return;

                                setIsDeletingContrat(true);

                                try {
                                    const token = localStorage.getItem("token");
                                    const response = await fetch(
                                        `${process.env.NEXT_PUBLIC_API_URL}/api/contrats/${selectedContrat.id}`,
                                        {
                                            method: "DELETE",
                                            headers: {
                                                Authorization: `Bearer ${token}`,
                                            },
                                        }
                                    );

                                    const data = await response.json().catch(() => null);

                                    if (!response.ok) {
                                        throw new Error(
                                            response.status === 409
                                                ? "Ce contrat possède des avenants ou d'autres données liées. Supprime d'abord ces éléments."
                                                : data?.message ?? "Impossible de supprimer ce contrat."
                                        );
                                    }

                                    const remainingContrats = contrats.filter(
                                        (contrat) => contrat.id !== selectedContrat.id
                                    );
                                    const nextContrat = remainingContrats[0] ?? null;

                                    setContrats(remainingContrats);
                                    setSelectedContrat(nextContrat);
                                    setSelectedIndex(nextContrat ? 0 : -1);
                                    setOriginalDSP(nextContrat?.DSI ?? nextContrat?.DSP ?? null);
                                    setIsNewContrat(false);
                                    onContratsChange?.();
                                } catch (error) {
                                    window.alert(
                                        error instanceof Error
                                            ? error.message
                                            : "Une erreur inattendue est survenue."
                                    );
                                } finally {
                                    setIsDeletingContrat(false);
                                }
                            }}
                        >
                            {isDeletingContrat ? "Suppression..." : "Supprimer le contrat"}
                        </button>
                    )}
                </div>

                {/* Colonne gauche */}
                <div className="space-y-1">
                    <SelectField
                        label="Établissement"
                        value={selectedContrat?.ETB}
                        items={allowedEtablissements}
                        getKey={(etablissement) => etablissement.id}
                        getValue={(etablissement) => etablissement.etb ?? ""}
                        getLabel={(etablissement) => etablissement.etb ?? ""}
                        placeholder="Sélectionner un établissement"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, ETB: value } : prev
                            )
                        }
                    />

                    <SelectField
                        label="Type de contrat"
                        value={selectedContrat?.TCS}
                        items={allowedTypeContrats}
                        getKey={(typeContrat) => typeContrat.id}
                        getValue={(typeContrat) => typeContrat.tcs ?? ""}
                        getLabel={(typeContrat) => typeContrat.tcs ?? ""}
                        placeholder="Sélectionner un type de contrat"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, TCS: value } : prev
                            )
                        }
                    />
                    <Field label="Motif du Contrat CDD" value={selectedContrat?.MotifContrat ?? ""} />
                    <SelectField
                        label="Secteur travaillé"
                        value={selectedContrat?.Secteur ?? ""}
                        items={secteurItems}
                        getKey={(item) => item.id}
                        getValue={(item) => item.secteurs ?? ""}
                        getLabel={(item) =>
                            item.id === -1
                                ? `${item.secteurs ?? ""} (ancienne valeur)`
                                : item.secteurs ?? ""
                        }
                        placeholder="Sélectionner un secteur"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, Secteur: value } : prev
                            )
                        }
                    />

                    <SelectField
                        label="Poste"
                        value={selectedContrat?.POS}
                        items={postes}
                        getKey={(poste) => poste.id}
                        getValue={(poste) => poste.pos ?? ""}
                        getLabel={(poste) => poste.pos ?? ""}
                        placeholder="Sélectionner un poste"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, POS: value } : prev
                            )
                        }
                    />

                    <Field
                        label="Date d'embauche"
                        type="date"
                        value={formatDateForInput(selectedContrat?.DAE)}
                        onChange={(e) =>
                            setSelectedContrat((prev) => {
                                if (!prev) return prev;

                                const updated = {
                                    ...prev,
                                    DAE: e.target.value,
                                };

                                return {
                                    ...updated,
                                    dureePeriodeEssai:
                                        updated.DAE && updated.DSP
                                            ? getPeriodeEssaiDays(updated.DAE, updated.DSP)
                                            : null,
                                };
                            })
                        }
                    />

                    <div className="text-center text-xs font-semibold text-black">
                        À aujourd'hui :{" "}
                        {selectedContrat?.DAE
                            ? getMonthsBetween(
                                selectedContrat.DAE,
                                new Date().toISOString().split("T")[0]
                            )
                            : 0}{" "}
                        mois
                    </div>

                    <Field
                        label="Date sortie initiale"
                        type="date"
                        value={formatDateForInput(selectedContrat?.DSI)}
                        min={formatDateForInput(selectedContrat?.DAE)}
                        onChange={(e) =>
                            setSelectedContrat((prev) =>
                                prev
                                    ? {
                                        ...prev,
                                        DSI: e.target.value,
                                        DSP: e.target.value, // alimentation automatique
                                    }
                                    : prev
                            )
                        }
                    />
                    <Field
                        label="Date sortie prév."
                        type="date"
                        value={formatDateForInput(selectedContrat?.DSP)}
                        min={formatDateForInput(selectedContrat?.DAE)}
                        onChange={(e) =>
                            setSelectedContrat((prev) => {
                                if (!prev) return prev;

                                const updated = {
                                    ...prev,
                                    DSP: e.target.value,
                                };

                                return {
                                    ...updated,
                                    dureePeriodeEssai:
                                        updated.DAE && updated.DSP
                                            ? getPeriodeEssaiDays(updated.DAE, updated.DSP)
                                            : null,
                                };
                            })
                        }
                    />

                    <div className="text-center text-xs font-semibold text-black">
                        Durée Prévue :{" "}
                        {selectedContrat?.DAE && selectedContrat?.DSP
                            ? getMonthsBetween(selectedContrat.DAE, selectedContrat.DSP)
                            : 0}{" "}
                        mois
                    </div>

                    <div className="grid grid-cols-[1fr_45px_80px] items-end gap-1">
                        <div>
                            <label className="block text-xs font-semibold text-blue-700">
                                Fin Période d'essai :
                            </label>
                            <input
                                readOnly
                                value={formatDate(selectedContrat?.FPE)}
                                className="h-6 w-full border border-slate-500 bg-white px-2 text-xs text-blue-700"
                            />
                        </div>

                        <input
                            min="0"
                            value={
                                selectedContrat?.dureePeriodeEssai ??
                                (selectedContrat?.DAE && selectedContrat?.DSP
                                    ? getPeriodeEssaiDays(selectedContrat.DAE, selectedContrat.DSP)
                                    : "")
                            }
                            onChange={(e) =>
                                setSelectedContrat((prev) =>
                                    prev
                                        ? {
                                            ...prev,
                                            dureePeriodeEssai:
                                                e.target.value === ""
                                                    ? null
                                                    : Number(e.target.value),
                                        }
                                        : prev
                                )
                            }
                            className="h-6 w-full border border-slate-500 bg-white px-2 text-xs text-blue-700"
                        />

                        <button
                            type="button"
                            className="h-6 text-xs"
                            onClick={() => {
                                if (!selectedContrat?.DAE || !selectedContrat?.DSP) return;

                                const days =
                                    selectedContrat?.dureePeriodeEssai ??
                                    getPeriodeEssaiDays(selectedContrat.DAE, selectedContrat.DSP);

                                const finPeriodeEssai = addDays(selectedContrat.DAE, days);

                                setSelectedContrat((prev) =>
                                    prev
                                        ? {
                                            ...prev,
                                            FPE: finPeriodeEssai,
                                        }
                                        : prev
                                );
                            }}
                        >
                            Appliquer
                        </button>
                    </div>
                </div>

                {/* Colonne droite */}
                <div className="space-y-1">
                    <div>
                        <label className="block text-xs font-semibold text-blue-700">
                            Qualification :
                        </label>

                        <div className="grid grid-cols-[1fr_45px_45px_45px] text-center text-[9px] font-semibold text-black">

                            <select
                                value={`${selectedContrat?.CAT ?? ""}-${selectedContrat?.NIV ?? ""}-${selectedContrat?.ECH ?? ""}-${selectedContrat?.COE ?? ""}`}
                                onChange={(e) => {
                                    const selected = classifications.find(
                                        (item) =>
                                            `${item.classification ?? ""}-${item.niveau ?? ""}-${item.echelon ?? ""}-${item.coefficient ?? ""}` ===
                                            e.target.value
                                    );

                                    if (!selected) return;

                                    setSelectedContrat((prev) =>
                                        prev
                                            ? {
                                                ...prev,
                                                CAT: selected.classification,
                                                NIV: selected.niveau,
                                                ECH: selected.echelon,
                                                COE: selected.coefficient?.toString() ?? "",
                                            }
                                            : prev
                                    );
                                }}
                                className="h-5 border border-slate-500 bg-white px-1 text-xs text-blue-700"
                            >
                                <option value="">Sélectionner</option>

                                {activeClassifications.map((item) => (
                                    <option
                                        key={item.id}
                                        value={`${item.classification ?? ""}-${item.niveau ?? ""}-${item.echelon ?? ""}-${item.coefficient ?? ""}`}
                                    >
                                        {`${item.classification ?? ""} - ${item.niveau ?? ""} - ${item.echelon ?? ""}`}
                                    </option>
                                ))}
                            </select>
                            <input readOnly value={selectedContrat?.NIV ?? ""} className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700" />
                            <input readOnly value={selectedContrat?.ECH ?? ""} className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700" />
                            <input readOnly value={selectedContrat?.COE ?? ""} className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700" />
                        </div>

                        <div className="grid grid-cols-[1fr_45px_45px_45px] text-[9px] font-semibold text-black">
                            <span>Catégorie</span>
                            <span>Niveau</span>
                            <span>Échelon</span>
                            <span>Coeff.</span>
                        </div>
                    </div>

                    <SelectField
                        label="Classification"
                        value=""
                        items={allowedSalaryClassifications}
                        getKey={(item) => item.id}
                        getValue={(item) => item.id.toString()}
                        getLabel={(item) =>
                            `${item.statut_professionnel_dads ?? ""} - ${item.niveau ?? ""} - ${item.echelon ?? ""
                            } - ${item.salairebase ?? ""} €`
                        }
                        placeholder="Sélectionner une classification"
                        onChange={(value) => {
                            const selectedClassif = allowedSalaryClassifications.find(
                                (item) => item.id === Number(value)
                            );

                            setSelectedContrat((prev) =>
                                prev
                                    ? {
                                        ...prev,
                                        SMBE: selectedClassif?.salairebase ?? null,
                                    }
                                    : prev
                            );
                        }}
                    />
                    <Field
                        label="Salaire Mensuel Brut"
                        value={selectedContrat?.SMBE ?? ""}
                        onChange={(e) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, SMBE: e.target.value } : prev
                            )
                        }
                    />

                    <Field
                        label="Mensualisation"
                        value={selectedContrat?.MEN ?? ""}
                        onChange={(e) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, MEN: e.target.value } : prev
                            )
                        }
                    />
                    <Field
                        label="Taux horaire"
                        value={
                            selectedContrat?.SMBE && selectedContrat?.MEN
                                ? (
                                    Number(selectedContrat.SMBE) /
                                    Number(selectedContrat.MEN)
                                ).toFixed(2)
                                : ""
                        }
                    />

                    <Field
                        label="N° de DPAE"
                        value={selectedContrat?.DUE ?? ""}
                        onChange={(e) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, DUE: e.target.value } : prev
                            )
                        }
                    />

                    <div>
                        <label className="block text-xs font-semibold text-blue-700">
                            Codes analytiques :
                        </label>

                        <div className="grid grid-cols-4 gap-1">
                            <SelectField
                                label=""
                                value={selectedContrat?.CAN_TypCont?.toString() ?? ""}
                                items={filteredTypContr}
                                getKey={(item) => item.id}
                                getValue={(item) => item.code_typcontr?.toString() ?? ""}
                                getLabel={(item) => `${item.code_typcontr} - ${item.lib_typcontr}`}
                                placeholder=""
                                onChange={(value) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, CAN_TypCont: value } : prev
                                    )
                                }
                            />

                            <SelectField
                                label=""
                                value={selectedContrat?.CAN_ConvInser?.toString() ?? ""}
                                items={filteredConvInser}
                                getKey={(item) => item.id}
                                getValue={(item) => item.code_convinser ?? ""}
                                getLabel={(item) => `${item.code_convinser} - ${item.lib_convinser}`}
                                placeholder=""
                                onChange={(value) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, CAN_ConvInser: Number(value) } : prev
                                    )
                                }
                            />
                            <SelectField
                                label=""
                                value={selectedContrat?.CAN_RuptBudg?.toString() ?? ""}
                                items={filteredRuptBudg}
                                getKey={(item) => item.id}
                                getValue={(item) => item.code_ruptbudg?.toString() ?? ""}
                                getLabel={(item) => `${item.code_ruptbudg} - ${item.lib_ruptbudg}`}
                                placeholder=""
                                onChange={(value) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, CAN_RuptBudg: Number(value) } : prev
                                    )
                                }
                            />

                            <SelectField
                                label=""
                                value={selectedContrat?.CAN_Metiers ?? ""}
                                items={filteredMetier}
                                getKey={(item) => item.id}
                                getValue={(item) => item.code_metiers ?? ""}
                                getLabel={(item) => item.code_metiers ?? ""}
                                placeholder=""
                                onChange={(value) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, CAN_Metiers: value } : prev
                                    )
                                }
                            />
                        </div>

                        <div className="grid grid-cols-4 gap-1 text-[9px] font-semibold text-black">
                            <span>Contrat</span>
                            <span>Conv d'ins</span>
                            <span>Rupt. Budg.</span>
                            <span>Métiers</span>
                        </div>
                    </div>

                    <div>
                        <label className="block text-xs font-semibold text-blue-700">
                            Agrément :
                        </label>

                        <div className="grid grid-cols-[1fr_105px_105px]">
                            <input
                                value={selectedContrat?.NAG ?? ""}
                                onChange={(e) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, NAG: e.target.value } : prev
                                    )
                                }
                                className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700"
                            />

                            <input
                                type="date"
                                value={formatDateForInput(selectedContrat?.DDA)}
                                onChange={(e) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, DDA: e.target.value } : prev
                                    )
                                }
                                className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700"
                            />

                            <input
                                type="date"
                                value={formatDateForInput(selectedContrat?.DFA)}
                                min={formatDateForInput(selectedContrat?.DDA)}
                                onChange={(e) =>
                                    setSelectedContrat((prev) =>
                                        prev ? { ...prev, DFA: e.target.value } : prev
                                    )
                                }
                                className="h-6 border border-slate-500 bg-white px-2 text-xs text-blue-700"
                            />
                        </div>

                        <div className="grid grid-cols-[1fr_105px_105px] text-[9px] font-semibold text-black">
                            <span>Numéro</span>
                            <span>Date début</span>
                            <span>Date fin</span>
                        </div>
                    </div>

                    <div className="grid grid-cols-[1fr_55px] items-end gap-1">
                        <Field
                            label="Date de sortie réelle"
                            type="date"
                            value={formatDateForInput(selectedContrat?.DSR)}
                            min={formatDateForInput(selectedContrat?.DAE)}
                            onChange={(e) =>
                                setSelectedContrat((prev) =>
                                    prev ? { ...prev, DSR: e.target.value } : prev
                                )
                            }
                        />

                        <button
                            type="button"
                            onClick={() => {
                                const finContrat = motifsSortie.find(
                                    (m) => m.libelles === "FIN DE CONTRAT"
                                );

                                setSelectedContrat((prev) =>
                                    prev
                                        ? {
                                            ...prev,
                                            DSR: prev.DSP,
                                            MSR: finContrat?.libelles ?? "",
                                        }
                                        : prev
                                );
                            }}
                            className="h-6 border border-slate-400 bg-slate-100 px-2 text-xs text-blue-700"
                        >
                            Sorti
                        </button>
                    </div>

                    <SelectField
                        label="Motif sortie réelle"
                        value={selectedContrat?.MSR}
                        items={motifsSortie}
                        getKey={(msr) => msr.id}
                        getValue={(msr) => msr.libelles ?? ""}
                        getLabel={(msr) => msr.libelles ?? ""}
                        placeholder="Sélectionner un motif de sortie"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, MSR: value } : prev
                            )
                        }
                    />

                    <SelectField
                        label="SMR"
                        value={selectedContrat?.SMR ?? ""}
                        items={["2 ans", "3 ans", "5 ans"]}
                        getKey={(item) => item}
                        getValue={(item) => item}
                        getLabel={(item) => item}
                        placeholder="Sélectionner une durée"
                        onChange={(value) =>
                            setSelectedContrat((prev) =>
                                prev ? { ...prev, SMR: value } : prev
                            )
                        }
                    />
                </div>
                <div className="col-span-2 -mt-1 grid grid-cols-[430px_1fr] gap-3">
                    <div>
                        {isAvenantOpen && (
                            <AvenantPanel
                                avenant={selectedAvenant}
                                contrat={selectedContrat}
                                onClose={() => {
                                    setSelectedAvenant(null);
                                    setIsAvenantOpen(false);
                                }}
                                onDelete={async () => {

                                    if (!selectedAvenant?.id) return;

                                    if (!confirm("Supprimer cet avenant ?")) return;

                                    const token = localStorage.getItem("token");

                                    const res = await fetch(
                                        `${process.env.NEXT_PUBLIC_API_URL}/api/avenants/${selectedAvenant.id}`,
                                        {
                                            method: "DELETE",
                                            headers: {
                                                Authorization: `Bearer ${token}`,
                                            },
                                        }
                                    );

                                    if (!res.ok) {
                                        console.error(await res.text());
                                        return;
                                    }

                                    const deletedAvenant = selectedAvenant;

                                    setAvenants((prev) => {
                                        const updatedAvenants = prev.filter((a) => a.id !== deletedAvenant.id);

                                        if (deletedAvenant.avenant_type === "Renouvellement de contrat") {
                                            const renouvellements = updatedAvenants.filter(
                                                (a) => a.avenant_type === "Renouvellement de contrat" && a.avenant_dateau
                                            );

                                            const nouvelleDSP: string | null =
                                                renouvellements.length > 0
                                                    ? renouvellements
                                                        .map((a) => a.avenant_dateau!)
                                                        .sort()
                                                        .at(-1) ?? null
                                                    : originalDSP ?? selectedContrat?.DSI ?? selectedContrat?.DSP ?? null;

                                            setSelectedContrat((prevContrat) =>
                                                prevContrat
                                                    ? {
                                                        ...prevContrat,
                                                        DSP: nouvelleDSP,
                                                    }
                                                    : prevContrat
                                            );
                                        }

                                        return updatedAvenants;
                                    });

                                    setSelectedAvenant(null);
                                    setIsAvenantOpen(false);
                                }}
                                onSave={async (form) => {
                                    if (!selectedContrat?.id_contrat) return;

                                    const token = localStorage.getItem("token");
                                    const avenantId = selectedAvenant?.id;
                                    const isEditing = avenantId != null;

                                    const url = isEditing
                                        ? `${process.env.NEXT_PUBLIC_API_URL}/api/avenants/${avenantId}`
                                        : `${process.env.NEXT_PUBLIC_API_URL}/api/avenants`;

                                    const method = isEditing ? "PUT" : "POST";


                                    const body = isEditing
                                        ? {
                                            avenant_type: form.avenant_type || null,
                                            avenant_datedu: form.avenant_datedu || null,
                                            avenant_dateau: form.avenant_dateau || null,
                                            commentaire: form.commentaire || null
                                        }
                                        : {
                                            id_contrat: selectedContrat.id_contrat,
                                            avenant_type: form.avenant_type || null,
                                            avenant_datedu: form.avenant_datedu || null,
                                            avenant_dateau: form.avenant_dateau || null,
                                            commentaire: form.commentaire || null
                                        };

                                    const res = await fetch(url, {
                                        method,
                                        headers: {
                                            "Content-Type": "application/json",
                                            Authorization: `Bearer ${token}`,
                                        },
                                        body: JSON.stringify(body),
                                    });

                                    if (!res.ok) {
                                        console.error("Erreur sauvegarde avenant :", res.status, await res.text());
                                        return;
                                    }

                                    const data = await res.json();
                                    const savedAvenant = data.item ?? data.avenant ?? data;

                                    setAvenants((prev) =>
                                        isEditing
                                            ? prev.map((a) =>
                                                a.id === savedAvenant.id ? savedAvenant : a
                                            )
                                            : [...prev, savedAvenant]
                                    );

                                    if (form.avenant_type === "Renouvellement de contrat") {
                                        setSelectedContrat((prev) =>
                                            prev ? { ...prev, DSP: form.avenant_dateau } : prev
                                        );
                                    }

                                    setSelectedAvenant(null);
                                    setIsAvenantOpen(false);
                                }}
                            />
                        )}
                    </div>

                    <section className="border border-slate-400 bg-white">
                        <div className="flex items-center justify-between border-b border-slate-400 bg-slate-100 px-2 py-1">
                            <h3 className="text-xs font-bold text-blue-700">
                                Avenants ({avenants.length})
                            </h3>

                            <button
                                type="button"
                                onClick={() => {
                                    setSelectedAvenant(null);
                                    setIsAvenantOpen(true);
                                }}
                                className="border border-blue-700 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-700 hover:text-white"
                            >
                                + Ajouter
                            </button>
                        </div>

                        <div className="grid grid-cols-[1fr_90px_90px_70px] border-b border-slate-300 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700">
                            <span>Type</span>
                            <span>Début</span>
                            <span>Fin</span>
                            <span></span>
                        </div>

                        <div className="max-h-28 overflow-y-auto">
                            {avenants.length === 0 ? (
                                <p className="px-2 py-2 text-xs text-slate-500">
                                    Aucun avenant pour ce contrat.
                                </p>
                            ) : (
                                avenants.map((avenant, index) => (
                                    <button
                                        key={`${avenant.id ?? avenant.id_contrat}-${index}`}
                                        type="button"
                                        onMouseDown={(e) => e.preventDefault()}
                                        onClick={() => {
                                            setSelectedAvenant(avenant);
                                            setIsAvenantOpen(true);
                                        }}
                                        className="grid w-full grid-cols-[1fr_90px_90px_70px] border-b border-slate-200 px-2 py-1 text-left text-xs hover:bg-slate-100"
                                    >
                                        <span className="flex items-center gap-1">
                                            <span>{avenant.avenant_type ?? "Avenant"}</span>

                                            {avenant.commentaire?.trim() && (
                                                <div className="group relative inline-flex items-center">
                                                    <MessageSquareMore
                                                        size={14}
                                                        className="cursor-help text-blue-600"
                                                    />

                                                    <div
                                                        className="
            pointer-events-none
            absolute
            left-0
            top-full
            z-50
            mt-1
            hidden
            w-64
            rounded
            border
            border-slate-300
            bg-white
            p-2
            text-xs
            text-slate-700
            shadow-lg
            whitespace-pre-wrap
            group-hover:block
        "
                                                    >
                                                        <div className="mb-1 font-semibold text-blue-700">
                                                            Commentaire
                                                        </div>

                                                        {avenant.commentaire}
                                                    </div>
                                                </div>
                                            )}
                                        </span>
                                        <span>{formatDate(avenant.avenant_datedu)}</span>
                                        <span>{formatDate(avenant.avenant_dateau)}</span>
                                        <span className="text-blue-700">Modifier</span>
                                    </button>
                                ))
                            )}
                        </div>
                    </section>
                </div>
            </section>
        </div>
    );
}