import { useEffect, useState } from "react";
import { Absence, Salarie } from "@/types/type";
import { formatDate } from "@/utils/formatter";
import AbsencePanel from "./AbsencesPanel";
import { MessageSquareMore } from "lucide-react";

type AbsencesTabProps = {
    salarie: Salarie | null;
};

export function calculNbJours(
    dateDebut?: string | null,
    dateFin?: string | null
): number | null {
    if (!dateDebut || !dateFin) return null;

    const debut = new Date(dateDebut);
    const fin = new Date(dateFin);

    if (isNaN(debut.getTime()) || isNaN(fin.getTime())) {
        return null;
    }

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

    return diffJours + 1;
}

export default function AbsencesTab({ salarie }: AbsencesTabProps) {
    const [absences, setAbsences] = useState<Absence[]>([]);
    const [selectedAbsence, setSelectedAbsence] = useState<Absence | null>(null);
    const [isAbsenceOpen, setIsAbsenceOpen] = useState(false);

    useEffect(() => {
        async function fetchAbsences() {
            if (!salarie?.COS) {
                setAbsences([]);
                return;
            }

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

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

            if (!res.ok) {
                setAbsences([]);
                return;
            }

            const data = await res.json();
            setAbsences(data.items ?? []);
            console.log("absences", data.items)
        }
        
        
        
        fetchAbsences();
    }, [salarie?.COS]);

    async function refreshAbsences() {
            if (!salarie?.COS) return;

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

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

            const data = await res.json();
            setAbsences(data.items ?? []);
        }

    async function handleSaveAbsence(form: {
            typeabsence: string;
            datedu: string;
            dateau: string;
            revenu: boolean;
            commentaire: string;
        }) {
            if (!salarie?.COS) return;

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

            const body = {
                num_salarie: salarie.COS,
                typeabsence: form.typeabsence,
                datedu: form.datedu || null,
                dateau: form.dateau || null,
                revenu: form.revenu,
                commentaire: form.commentaire?.trim() || null,
            };

            const url = selectedAbsence
                ? `${process.env.NEXT_PUBLIC_API_URL}/api/absences/${selectedAbsence.id}`
                : `${process.env.NEXT_PUBLIC_API_URL}/api/absences`;

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

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

            console.log("SAVE ABSENCE STATUS =", res.status);
console.log("SAVE ABSENCE BODY =", body);
console.log("SAVE ABSENCE ERROR =", result);

            if (!res.ok) {
                alert("Erreur lors de l'enregistrement de l'absence.");
                return;
            }

            setIsAbsenceOpen(false);
            setSelectedAbsence(null);
            await refreshAbsences();
        }

    async function handleDeleteAbsence() {
            if (!selectedAbsence) return;

            const confirmDelete = confirm("Supprimer cette absence ?");
            if (!confirmDelete) return;

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

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

            if (!res.ok) {
                alert("Erreur lors de la suppression de l'absence.");
                return;
            }

            setIsAbsenceOpen(false);
            setSelectedAbsence(null);
            await refreshAbsences();
        }

    return (
        <section className="inline-flex w-full max-h-[700px] flex-col 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">
                    Absences ({absences.length})
                </h3>

                <button
                    type="button"
                    onClick={() => {
                        setSelectedAbsence(null);
                        setIsAbsenceOpen(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-[220px_1fr_90px_90px_70px_80px_70px]  border-b border-slate-300 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700">
                <span>Type</span>
                <span>Commentaire</span>
                <span>Début</span>
                <span>Fin</span>
                <span>Revenu</span>
                <span>Nb jours</span>
                <span></span>
            </div>

            <div
                className="
        min-h-[180px]
        max-h-[700px]
        overflow-y-auto
    "
            >
                {absences.length === 0 ? (
                    <p className="px-2 py-2 text-xs text-slate-500">
                        Aucune absence pour ce salarié.
                    </p>
                ) : (
                    absences.map((absence, index) => (
                        <button
                            key={`${absence.id ?? absence.idabsences}-${index}`}
                            type="button"
                            onMouseDown={(e) => e.preventDefault()}
                            onClick={() => {
                                setSelectedAbsence(absence);
                                setIsAbsenceOpen(true);
                            }}
                            className="grid w-full grid-cols-[220px_1fr_90px_90px_70px_80px_70px]  border-b border-slate-200 px-2 py-1 text-left text-xs hover:bg-slate-100 text-black"
                        >
                            <span>{absence.typeabsence ?? "Absence"}</span>
                            <span className="truncate">
                                {absence.commentaire ?? ""}
                            </span>

                            <span>{formatDate(absence.datedu)}</span>

                            <span>{formatDate(absence.dateau)}</span>



                            <span className="text-center">
                                {absence.revenu ? "☑" : "☐"}
                            </span>

                            <span className="text-center">
                                {calculNbJours(absence.datedu, absence.dateau) ?? ""}
                            </span>

                            <span className="text-blue-700">
                                Modifier
                            </span>
                        </button>
                    ))
                )}
            </div>

            {isAbsenceOpen && (
                <AbsencePanel
                    absence={selectedAbsence}
                    onClose={() => setIsAbsenceOpen(false)}
                    onDelete={handleDeleteAbsence}
                    onSave={handleSaveAbsence}
                />
            )}
        </section>
    );
}