/* Barre de navigation latérale fixe */

import { NavLink } from 'react-router-dom';
import {
  LayoutGrid,
  Layers,
  Clock,
  Settings,
  Users,
  List,
  Book,
  Shield,
  FileText,
} from 'lucide-react';
import styles from './Sidebar.module.css';

/* Un lien de navigation avec icône */
function NavItem({ to, icon: Icon, label }) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        `${styles.navItem} ${isActive ? styles.active : ''}`
      }
      aria-current={undefined}
    >
      <Icon size={16} aria-hidden="true" />
      <span>{label}</span>
    </NavLink>
  );
}

export default function Sidebar({ isOpen, onClose }) {
  return (
    <>
      {/* Overlay mobile pour fermer la sidebar */}
      {isOpen && (
        <div
          className={styles.overlay}
          onClick={onClose}
          role="presentation"
          aria-hidden="true"
        />
      )}

      <aside
        id="sidebar"
        className={`${styles.sidebar} ${isOpen ? styles.open : ''}`}
        aria-label="Navigation principale"
      >
        <nav className={styles.nav} aria-label="Menu de navigation">
          {/* Navigation principale */}
          <div className={styles.section} role="group" aria-label="Monitoring">
            <NavItem to="/dashboard" icon={LayoutGrid} label="Dashboard" />
            <NavItem to="/consolidee" icon={Layers} label="Vue consolidée" />
            <NavItem to="/contrat" icon={List} label="Contrat" />
            <NavItem to="/fournisseur" icon={Users} label="Fournisseur" />
            <NavItem to="/historique" icon={Clock} label="Historique" />
          </div>

          <div className={styles.separator} role="separator" />

          {/* Section administration */}
          <div className={styles.sectionLabel} aria-hidden="true">ADMIN</div>
          <div className={styles.section} role="group" aria-label="Administration">
            <NavItem to="/admin" icon={Settings} label="Nomenclature" />
            <NavItem to="/utilisateurs" icon={Users} label="Utilisateurs" />

          </div>
        </nav>

        {/* Liens de pied de sidebar */}
        <nav className={styles.footer} aria-label="Liens utiles">
          <NavLink to="/documentation" className={styles.footerLink}>
            <Book size={13} aria-hidden="true" />
            Documentation
          </NavLink>
          <NavLink to="/mentions-legales" className={styles.footerLink}>
            <Shield size={13} aria-hidden="true" />
            Mentions légales
          </NavLink>
          <NavLink to="/cgu" className={styles.footerLink}>
            <FileText size={13} aria-hidden="true" />
            CGU
          </NavLink>
        </nav>
      </aside>
    </>
  );
}