"use client"; // Indispensable car on utilise de l'interactivité (useState)

import { useState, useRef, useEffect } from "react";
import Link from "next/link"; // Pour la navigation vers le profil

export default function Header() {
    // --- LOGIQUE DU MENU DÉROULANT ---
    const [isOpen, setIsOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // Fonction pour basculer l'état ouvert/fermé
    const toggleMenu = () => setIsOpen(!isOpen);

    // Effet pour fermer le menu si on clique ailleurs sur la page
    useEffect(() => {
        function handleClickOutside(event: MouseEvent) {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsOpen(false);
            }
        }
        // On écoute les clics partout dans le document
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            // On nettoie l'écouteur quand le composant est détruit
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    return (
        <header className="flex items-center justify-between whitespace-nowrap border-b border-solid border-[#dbe0e6] dark:border-[#2d3748] bg-white dark:bg-[#1a202c] px-6 lg:px-40 py-3 sticky top-0 z-50">

            {/* ... (Partie Gauche : Logo & Navigation reste inchangée) ... */}
            <div className="flex items-center gap-8">
                <div className="flex items-center gap-3 text-primary">
                    <div className="size-8 bg-primary rounded-lg flex items-center justify-center text-white">
                        <span className="material-symbols-outlined">rocket_launch</span>
                    </div>
                    <h2 className="text-[#111418] dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">
                        SCPro360
                    </h2>
                </div>
                {/* Navigation Desktop */}
                <div className="hidden md:flex items-center gap-6">
                    {/* Tes liens existants... */}
                    <a className="text-primary text-sm font-semibold leading-normal border-b-2 border-primary pb-1" href="/userDashboard">Tableau de bord</a>
                    <a className="text-[#617589] dark:text-gray-400 text-sm font-medium leading-normal hover:text-primary transition-colors" href="/userDashboard/jobs">Offres</a>
                    <a className="text-[#617589] dark:text-gray-400 text-sm font-medium leading-normal hover:text-primary transition-colors" href="#">Messages</a>
                    <a className="text-[#617589] dark:text-gray-400 text-sm font-medium leading-normal hover:text-primary transition-colors" href="#">Paramètres</a>
                    {/* ... */}
                </div>
            </div>

            <div className="flex items-center gap-4">
                {/* ... (Partie Indicateurs Offline/Sync reste inchangée) ... */}
                <div className="flex gap-2 items-center">
                    {/* ... tes indicateurs ... */}
                    <div className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 rounded-full text-xs font-bold border border-emerald-200 dark:border-emerald-800">
                        <span className="material-symbols-outlined text-[14px] font-bold">cloud_done</span>
                        <span className="truncate hidden sm:block">En ligne</span>
                    </div>

                    <div className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded-full text-xs font-bold border border-amber-200 dark:border-amber-800">
                        <span className="material-symbols-outlined text-[14px] font-bold">sync</span>
                        {/* <span className="truncate hidden sm:block">Prêt à sync</span> */}
                    </div>
                </div>

                <div className="w-px h-6 bg-[#dbe0e6] dark:bg-[#2d3748] mx-2"></div>

                {/* --- PARTIE UTILISATEUR (MENU DÉROULANT) --- */}
                <div className="relative" ref={dropdownRef}>

                    {/* Bouton déclencheur */}
                    <button
                        onClick={toggleMenu}
                        className="flex items-center gap-3 hover:bg-gray-100 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors focus:outline-none"
                    >
                        <div
                            className="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary/20"
                            style={{ backgroundImage: 'url("https://lh3.googleusercontent.com/aida-public/AB6AXuCVhJk15uwFNJvg8DJfabWVeisnkJ7XAsZ62lxfKd3SLCzzT14wM4xdzaGzpNXyqTBwQ0HO6ik5YEbD3ka4sAjGRUTNaMGKI7GBWKyzLjxDB7DCk_GvxG9T59YsGoPEZ-RBDisVfmWZy5HIUcXYPaBG3Wy-ViJXhmnTfmvjQxUvafeC5FYV-UHS7kMI_SPHTkwjf4VQHVNNIX2DuVkANrm2iOMSWE4XvfZqspK9sok7327N8XuwjackvXFkCGKBzJ-llMsKOJYc")' }}
                        ></div>
                        <div className="hidden sm:block text-left">
                            <p className="text-sm font-bold text-[#111418] dark:text-white">Alex Rivera</p>
                            <p className="text-[10px] text-[#617589] dark:text-gray-400">ID: 4829-XP</p>
                        </div>
                        {/* Petite flèche qui tourne */}
                        <span className={`material-symbols-outlined text-gray-400 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}>
                            keyboard_arrow_down
                        </span>
                    </button>

                    {/* Le Menu Déroulant (Dropdown) */}
                    {isOpen && (
                        <div className="absolute right-0 top-full mt-2 w-56 bg-white dark:bg-[#1a202c] rounded-xl shadow-xl border border-[#dbe0e6] dark:border-[#2d3748] overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200">

                            {/* En-tête du menu (Mobile only visual aid) */}
                            <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 sm:hidden">
                                <p className="text-sm font-bold text-[#111418] dark:text-white">Alex Rivera</p>
                                <p className="text-xs text-[#617589] dark:text-gray-400">alex@example.com</p>
                            </div>

                            {/* Option 1 : Voir Profil */}
                            <Link
                                href="/userDashboard/profile"
                                className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-[#111418] dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                onClick={() => setIsOpen(false)} // Ferme le menu au clic
                            >
                                <span className="material-symbols-outlined text-[20px] text-[#617589]">person</span>
                                Voir mon profil
                            </Link>

                            {/* Option 2 : Paramètres (Optionnel) */}
                            <Link
                                href="/userDashboard/settings"
                                className="flex items-center gap-3 px-4 py-3 text-sm font-medium text-[#111418] dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                                onClick={() => setIsOpen(false)}
                            >
                                <span className="material-symbols-outlined text-[20px] text-[#617589]">settings</span>
                                Paramètres
                            </Link>

                            <div className="h-px bg-gray-100 dark:bg-gray-800 my-1"></div>

                            {/* Option 3 : Déconnexion */}
                            <button
                                className="w-full flex items-center gap-3 px-4 py-3 text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left"
                                onClick={() => {
                                    console.log("Déconnexion...");
                                    // Ici tu mettras ta logique de logout (ex: signOut() de NextAuth)
                                    setIsOpen(false);
                                }}
                            >
                                <span className="material-symbols-outlined text-[20px]">logout</span>
                                Se déconnecter
                            </button>
                        </div>
                    )}
                </div>

            </div>
        </header>
    );
}