/* Menu lateral (abre pela logo/hamburger no header) — troca de domínio
   (Estoque de Pisos ↔ Estoque Geral da Loja) + Editar mapa/Configurações
   (gestor only). Saiu do header principal porque não tinha mais espaço
   sobrando na visão Mapa num tablet real de 1280px (ver docs/STATUS.md
   2026-08-21) — menu lateral resolve isso de vez, com espaço de sobra pro
   que for crescendo. Mesmo padrão visual de `.scrim`/`.pilha-sheet`
   (estoque.css), só espelhado pra esquerda (`.scrim.left`/`.side-menu`). */

function SideMenu({ dominio, podeCadastros, mostrarSaidaRapida, saidaRapidaDisabled, onTrocarDominio, onSaidaRapida, onEditarMapa, onConfiguracoes, onClose }) {
  return (
    <div className="scrim left" onClick={onClose}>
      <div className="side-menu" data-screen-label="Menu" onClick={(e) => e.stopPropagation()}>
        <div className="side-menu-head">
          <img src="estoque/logo-icon.png" alt="" />
          <span className="titulo">Panofo</span>
          <button className="btn-fechar-sheet" style={{ marginLeft: 'auto' }} onClick={onClose}>
            <EIcon name="x" size={18} />
          </button>
        </div>
        <div className="side-menu-body">
          <div>
            <div className="sm-sec-lbl">Estoque</div>
            <div className="sm-dominios">
              <button className={'sm-dominio' + (dominio === 'pisos' ? ' on' : '')} onClick={() => onTrocarDominio('pisos')}>
                <span className="sm-ic"><EIcon name="brick" size={22} /></span>
                <span className="sm-txt">
                  <span className="sm-t">Estoque de Pisos</span>
                  <span className="sm-d">Galpões — pallets de piso/cimento</span>
                </span>
              </button>
              <button className={'sm-dominio' + (dominio === 'loja' ? ' on' : '')} onClick={() => onTrocarDominio('loja')}>
                <span className="sm-ic"><EIcon name="layers" size={22} /></span>
                <span className="sm-txt">
                  <span className="sm-t">Estoque Geral da Loja</span>
                  <span className="sm-d">Ferragens, hidráulica, elétrica…</span>
                </span>
              </button>
            </div>
          </div>

          {mostrarSaidaRapida && (
            <div>
              <div className="sm-sec-lbl">Ações</div>
              <button className="sm-item laranja" disabled={saidaRapidaDisabled} onClick={onSaidaRapida}>
                <EIcon name="truck" size={19} /> Saída rápida
              </button>
            </div>
          )}

          {podeCadastros && (
            <div>
              <div className="sm-sec-lbl">Gestor</div>
              <button className="sm-item" onClick={onEditarMapa}>
                <EIcon name="edit" size={19} /> Editar mapa
              </button>
              <button className="sm-item" onClick={onConfiguracoes}>
                <EIcon name="settings" size={19} /> Configurações
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.SideMenu = SideMenu;