import { useEffect, useRef } from 'react';
import { Link, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import styles from './Layout.module.css';

const navClass = ({ isActive }) => (isActive ? styles.navActive : undefined);

export default function Layout({ children }) {
  const { isAdmin, logout } = useAuth();
  const navigate = useNavigate();
  const headerRef = useRef(null);

  useEffect(() => {
    const header = headerRef.current;
    if (!header) return undefined;
    const root = document.documentElement;
    const update = () => root.style.setProperty('--header-height', `${header.offsetHeight}px`);
    update();
    const observer = new ResizeObserver(update);
    observer.observe(header);
    return () => observer.disconnect();
  }, []);

  const handleLogout = () => {
    logout();
    navigate('/login', { replace: true });
  };

  return (
    <div className={styles.app}>
      <header ref={headerRef} className={styles.header}>
        <Link to="/" className={styles.logo}>SIGNATURE</Link>
        <nav>
          {isAdmin ? (
            <>
              <NavLink to="/" end className={navClass}>Accueil</NavLink>
              <NavLink to="/configurateur" className={navClass}>Configurateur</NavLink>
              <NavLink to="/materiaux" className={navClass}>Matériaux</NavLink>
              <NavLink to="/admin" className={navClass}>Admin</NavLink>
              <NavLink to="/parametres" className={navClass}>Paramètres</NavLink>
              <button type="button" className={styles.logoutBtn} onClick={handleLogout}>Déconnexion</button>
            </>
          ) : (
            <Link to="/login">Connexion</Link>
          )}
        </nav>
      </header>
      <main className={styles.main}>
        {children}
      </main>
      <footer className={styles.footer}>
        <span className={styles.footerBrand}>© {new Date().getFullYear()} SIGNATURE</span>
        <nav className={styles.footerNav}>
          <Link to="/mentions-legales">Mentions légales</Link>
          <Link to="/confidentialite">Politique de confidentialité</Link>
          <Link to="/conditions-generales">Conditions générales</Link>
          <Link to="/reglements">Règlements</Link>
        </nav>
      </footer>
    </div>
  );
}