/* Sidebar.jsx — navegación lateral de operaciones Airexsus
   Surface: dashboard
   Roles: brand mark + secciones primarias + cuenta */
const { useState } = React;

function Sidebar({ active = 'dashboard', onSelect }) {
  const sections = [
    { id: 'dashboard', label: 'Resumen', icon: 'home' },
    { id: 'equipment', label: 'Equipos',  icon: 'unit' },
    { id: 'orders',    label: 'Órdenes de servicio', icon: 'wrench', badge: 4 },
    { id: 'maintenance', label: 'Mantenimiento preventivo', icon: 'calendar' },
    { id: 'reports',   label: 'Reportes', icon: 'chart' },
    { id: 'clients',   label: 'Clientes', icon: 'users' },
  ];
  const iconPath = {
    home:     <path d="M3 11l9-8 9 8v10a2 2 0 01-2 2h-4v-7H9v7H5a2 2 0 01-2-2V11z"/>,
    unit:     <g><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M12 9v6M9 12h6"/></g>,
    wrench:   <path d="M14.7 6.3l3 3M3 21l3.5-1 11-11-2.5-2.5-11 11L3 21z"/>,
    calendar: <g><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></g>,
    chart:    <g><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-9"/><path d="M22 20H2"/></g>,
    users:    <g><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="10" r="2.5"/><path d="M2 20c1-3 4-5 7-5s6 2 7 5"/><path d="M15 20c.5-2 2-3.5 4-3.5s3 1 4 2.5"/></g>,
  };

  return (
    <aside className="ax-sidebar">
      <header className="ax-sidebar__brand">
        <img src="../../assets/logo-mark.svg" alt="" className="ax-sidebar__mark" />
        <div>
          <div className="ax-sidebar__wordmark">airexsus</div>
          <div className="ax-sidebar__sub">Operaciones · Houston TX</div>
        </div>
      </header>

      <nav className="ax-sidebar__nav" aria-label="Secciones">
        {sections.map(s => (
          <button
            key={s.id}
            type="button"
            className={`ax-nav-item ${active === s.id ? 'is-active' : ''}`}
            onClick={() => onSelect && onSelect(s.id)}
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{iconPath[s.icon]}</svg>
            <span className="ax-nav-item__label">{s.label}</span>
            {s.badge && <span className="ax-nav-item__badge">{s.badge}</span>}
          </button>
        ))}
      </nav>

      <footer className="ax-sidebar__footer">
        <div className="ax-account">
          <div className="ax-avatar">CT</div>
          <div className="ax-account__meta">
            <div className="ax-account__name">Carlos Támes</div>
            <div className="ax-account__role">Despachador · Turno A</div>
          </div>
        </div>
      </footer>
    </aside>
  );
}

window.Sidebar = Sidebar;