/* Persistent left rail — primary nav for the app shell */

function Sidebar({ screen, go, onLogout, embed }) {
  const isOrders = screen === 'orders' || screen === 'detail';
  const allowed = embed ? ['dashboard', 'settings'] : null;
  const items = [
    { id: 'dashboard', icon: 'dashboard', label: 'Inicio', active: screen === 'dashboard' },
    { id: 'board',     icon: 'board',     label: 'Tablero', active: screen === 'board' },
    { id: 'orders',    icon: 'flow',      label: 'Órdenes', active: isOrders },
    { id: 'settings',  icon: 'settings',  label: 'Configuración', active: screen === 'settings' },
  ];
  return (
    <aside className="rail">
      <div className="rail-brand" title="Phlou">
        <span className="dot"></span>
        <span className="wm-logo-wrap"><img className="wm-logo" src="../phlou/logo-navy.svg" alt="Phlou" /></span>
      </div>
      <nav className="rail-nav">
        {items.map((it) => {
          const locked = allowed && !allowed.includes(it.id);
          return (
            <button key={it.id} className={(it.active ? 'on' : '') + (locked ? ' locked' : '')} title={it.label}
              disabled={locked} onClick={() => { if (!locked) go(it.id); }}>
              <Icon name={it.icon} />
            </button>
          );
        })}
      </nav>
      <div className="rail-foot">
        <button className="ico" title="Alertas"><Icon name="bell" /></button>
        <div className="rail-av" title={window.USER.name + ' · ' + window.USER.role}>{window.USER.initials}</div>
        <button className="ico" title="Cerrar sesión" onClick={onLogout}><Icon name="logout" /></button>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar });