"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { useAuth } from "@/contexts/AuthContext";
import { useRouter, usePathname } from "next/navigation";
import { api } from "@/lib/api";
import { Client } from "@/types/medical";
import styles from "./Header.module.css";

export default function Header() {
    const { user, isAuthenticated, logout, token } = useAuth();
    const router = useRouter();
    const pathname = usePathname();
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [client, setClient] = useState<Client | null>(null);
    const [isInterventionsOpen, setIsInterventionsOpen] = useState(false);
    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);

    // Bloquer le scroll quand le menu est ouvert
    useEffect(() => {
        if (isMenuOpen) {
            document.body.classList.add("menu-open");
        } else {
            document.body.classList.remove("menu-open");
        }

        // Cleanup
        return () => {
            document.body.classList.remove("menu-open");
        };
    }, [isMenuOpen]);

    // Fermer le menu quand on change de page
    useEffect(() => {
        setIsMenuOpen(false);
    }, [pathname]);

    // Charger les données du client
    useEffect(() => {
        const fetchClient = async () => {
            if (!token || !isAuthenticated) return;

            try {
                const clients = await api.getClients(token);
                if (clients && clients.length > 0) {
                    const clientData = await api.getClient(token, clients[0].id);
                    setClient(clientData);
                }
            } catch (error) {
                console.error('Erreur lors du chargement du client:', error);
            }
        };

        fetchClient();
    }, [token, isAuthenticated]);

    const handleLogout = () => {
        logout();
        setIsMenuOpen(false);
        router.push("/");
    };

    const closeMenu = () => {
        setIsMenuOpen(false);
        setIsInterventionsOpen(false);
        setIsSubmenuOpen(false);
    };

    const toggleMenu = (e: React.MouseEvent) => {
        e.stopPropagation();
        setIsMenuOpen(!isMenuOpen);
    };

    // Fermer le menu déroulant en cliquant à l'extérieur
    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (!target.closest(`.${styles.dropdown}`)) {
                setIsInterventionsOpen(false);
            }
        };

        document.addEventListener('click', handleClickOutside);
        return () => document.removeEventListener('click', handleClickOutside);
    }, []);

    return (
        <header className={styles.header}>
            <div className={styles.container}>
                <Link href="/" className={styles.logo} onClick={closeMenu}>
                    <Image
                        src="/FAVICON.svg"
                        alt="Maryline Apps"
                        width={40}
                        height={40}
                        className={styles.logoImage}
                        priority
                    />
                    <span className={styles.logoText}>Maryline Apps</span>
                </Link>

                {/* Hamburger Button */}
                <button
                    className={`${styles.hamburger} ${isMenuOpen ? styles.active : ""}`}
                    onClick={toggleMenu}
                    aria-label="Menu"
                    aria-expanded={isMenuOpen}
                    type="button"
                >
                    <span></span>
                    <span></span>
                    <span></span>
                </button>

                {/* Navigation Desktop + Mobile */}
                <nav className={`${styles.nav} ${isMenuOpen ? styles.open : ""}`}>
                    {isAuthenticated && user ? (
                        <>
                            <div className={styles.userInfo} onClick={closeMenu}>
                                <span className={styles.userIcon}>👤</span>
                                <span className={styles.userEmail}>{user.firstName} {user.name}</span>
                            </div>
                            
                            {/* Menu déroulant */}
                            <div className={styles.dropdown}>
                                <button 
                                    className={styles.dropdownButton}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setIsInterventionsOpen(!isInterventionsOpen);
                                    }}
                                    type="button"
                                >
                                    <span className={styles.userIcon}>🩺</span>
                                    <span className={styles.userEmail}>
                                        {client ? `${client.firstName} ${client.name}` : 'Gérer les infos'}
                                    </span>
                                    <span className={`${styles.arrow} ${isInterventionsOpen ? styles.arrowUp : ''}`}>▼</span>
                                </button>
                                
                                <div className={`${styles.dropdownMenu} ${isInterventionsOpen ? styles.open : ''}`}>
                                    <Link href="/medical-info" className={styles.dropdownItem} onClick={closeMenu}>
                                        <span className={styles.userIcon}>🩺</span>
                                        <span>Informations médicales</span>
                                    </Link>
                                    
                                    <div className={styles.dropdownSubmenu}>
                                        <div 
                                            className={styles.dropdownItem}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setIsSubmenuOpen(!isSubmenuOpen);
                                            }}
                                        >
                                            <span className={styles.userIcon}>👥</span>
                                            <span>Interventions</span>
                                            <span className={`${styles.submenuArrow} ${isSubmenuOpen ? styles.submenuArrowDown : ''}`}>▶</span>
                                        </div>
                                        <div className={`${styles.dropdownSubmenuItems} ${isSubmenuOpen ? styles.submenuOpen : ''}`}>
                                            <Link href="/interventions/intervenant" className={styles.dropdownSubitem} onClick={closeMenu}>
                                                Intervenant
                                            </Link>
                                            <Link href="/interventions/medical" className={styles.dropdownSubitem} onClick={closeMenu}>
                                                Médical
                                            </Link>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {!user.activeSubscription && (
                                <Link href="/subscription" className={styles.navLink} onClick={closeMenu}>Abonnement</Link>
                            )}
                            <Link
                                href="/dashboard"
                                className={styles.navLink}
                                onClick={closeMenu}
                            >
                                📊 Tableau de bord
                            </Link>
                            {user.roles.includes("ROLE_ADMIN") && (
                                <Link
                                    href="/admin"
                                    className={styles.adminBtn}
                                    onClick={closeMenu}
                                >
                                    🔧 Administration
                                </Link>
                            )}
                            <button
                                onClick={handleLogout}
                                className={styles.logoutBtn}
                                type="button"
                            >
                                🚪 Déconnexion
                            </button>
                        </>
                    ) : (
                        <>
                            <Link
                                href="/login"
                                className={styles.navLink}
                                onClick={closeMenu}
                            >
                                🔑 Connexion
                            </Link>
                            <Link
                                href="/register"
                                className={styles.registerBtn}
                                onClick={closeMenu}
                            >
                                ✨ Créer un compte
                            </Link>
                        </>
                    )}
                </nav>
            </div>

            {/* Overlay pour fermer le menu en cliquant à l'extérieur */}
            {isMenuOpen && <div className={styles.overlay} onClick={closeMenu}></div>}
        </header>
    );
}