const NAV_ITEMS = [
  { section: 'General' },
  { key: 'dashboard', label: 'Dashboard', icon: IconDashboard, roles: null },
  { section: 'Operación' },
  { key: 'ingreso-masivo', label: 'Ingreso masivo', icon: IconScan, roles: null },
  { key: 'salida-masiva', label: 'Salida masiva', icon: IconArrowRight, roles: null },
  { key: 'devolucion', label: 'Devolución', icon: IconHistory, roles: null },
  { key: 'instalacion-luces', label: 'Instalar luces en tienda', icon: IconBulb, roles: null },
  { key: 'baterias', label: 'Baterías', icon: IconBattery, roles: null },
  { key: 'luces', label: 'Luces de emergencia', icon: IconBulb, roles: null },
  { key: 'movimientos', label: 'Historial', icon: IconHistory, roles: null },
  { section: 'Producción y devoluciones' },
  { key: 'asignacion-luces', label: 'Asignación de luces', icon: IconBulb, roles: ['Administrador', 'Supervisor'] },
  { key: 'lotes-pendientes', label: 'Salidas pendientes de cierre', icon: IconReport, roles: ['Administrador', 'Supervisor'] },
  { key: 'reportes', label: 'Devoluciones pendientes', icon: IconReport, roles: null },
  { section: 'Administración' },
  { key: 'empleados', label: 'Empleados', icon: IconUsers, roles: ['Administrador'] },
  { key: 'tiendas', label: 'Tiendas', icon: IconStore, roles: ['Administrador'] },
  { key: 'proveedores', label: 'Proveedores', icon: IconStore, roles: ['Administrador'] },
  { key: 'unidades-vehiculares', label: 'Unidades vehiculares', icon: IconArrowRight, roles: ['Administrador'] },
  { key: 'transportistas', label: 'Transportistas', icon: IconStore, roles: ['Administrador'] },
  { key: 'areas', label: 'Áreas', icon: IconMap, roles: ['Administrador'] },
  { key: 'usuarios', label: 'Usuarios', icon: IconSettings, roles: ['Administrador'] },
];

const PAGE_TITLES = {
  dashboard: 'Dashboard',
  'ingreso-masivo': 'Ingreso masivo',
  'salida-masiva': 'Salida masiva',
  devolucion: 'Devolución',
  'instalacion-luces': 'Instalar luces en tienda',
  baterias: 'Baterías',
  luces: 'Luces de emergencia',
  movimientos: 'Historial de movimientos',
  'asignacion-luces': 'Asignación de luces',
  'lotes-pendientes': 'Salidas pendientes de cierre',
  reportes: 'Devoluciones pendientes',
  empleados: 'Empleados',
  tiendas: 'Tiendas',
  proveedores: 'Proveedores',
  'unidades-vehiculares': 'Unidades vehiculares',
  transportistas: 'Transportistas (encomiendas)',
  areas: 'Áreas',
  usuarios: 'Usuarios del sistema',
};

function Layout({ page, onNavigate, children }) {
  const { usuario, logout } = useAuth();
  const [sidebarOpen, setSidebarOpen] = React.useState(false);
  const [theme, setTheme] = React.useState(() => localStorage.getItem('bt_theme') || 'light');

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('bt_theme', theme);
  }, [theme]);

  const iniciales = (usuario?.nombre || '?').split(' ').map((s) => s[0]).slice(0, 2).join('').toUpperCase();

  return (
    <div className="app-shell">
      {sidebarOpen && (
        <div
          className="sidebar-overlay"
          onClick={() => setSidebarOpen(false)}
        />
      )}
      <aside className={`sidebar ${sidebarOpen ? 'open' : ''}`}>
        <div className="sidebar__brand">
          <span className="badge-dot" />
          Control de Baterías
        </div>
        <nav className="sidebar__nav" style={{ overflowY: 'auto', flex: 1, minHeight: 0 }}>
          {NAV_ITEMS.map((item, i) => {
            if (item.section) return <div className="sidebar__section" key={'s' + i}>{item.section}</div>;
            if (item.roles && !item.roles.includes(usuario?.rol)) return null;
            const ItemIcon = item.icon;
            return (
              <button
                key={item.key}
                className={`sidebar__link ${page === item.key ? 'active' : ''}`}
                onClick={() => { onNavigate(item.key); setSidebarOpen(false); }}
              >
                <ItemIcon className="icon" />
                <span className="sidebar__text">
                  {item.label}
                </span>
              </button>
            );
          })}
        </nav>
        <div className="sidebar__footer">
          <div className="sidebar__user">
            <div className="sidebar__avatar">{iniciales}</div>
            <div className="sidebar__user-info">
              <div className="sidebar__user-name">{usuario?.nombre}</div>
              <div className="sidebar__user-role">{usuario?.rol}</div>
            </div>
          </div>
          <button className="btn btn-ghost btn-block btn-sm" style={{ marginTop: 12 }} onClick={logout}>
            <IconLogout size={15} /> Cerrar sesión
          </button>
        </div>
      </aside>

      <div className="main-col">
        <header className="topbar">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button className="icon-btn" style={{ display: 'none' }} id="menuToggle" onClick={() => setSidebarOpen((s) => !s)}>
              <IconMenu size={16} />
            </button>
            <button className="icon-btn mobile-only" onClick={() => setSidebarOpen((s) => !s)}>
              <IconMenu size={16} />
            </button>
            <div className="topbar__title">{PAGE_TITLES[page] || ''}</div>
          </div>
          <div className="topbar__actions">
            <button className="icon-btn" onClick={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))} title="Cambiar tema">
              {theme === 'light' ? <IconMoon size={16} /> : <IconSun size={16} />}
            </button>
          </div>
        </header>
        <main className="content">{children}</main>
      </div>
    </div>
  );
}