// ============================================================
// MachineryLayout — sidebar verde escura fixa (250px) + header branco
// Espelha components/templates/machinery-layout do produto.
// ============================================================
const MAIN_ITEMS = [
  { id: 'dashboard', icon: 'bar-chart-outline', label: 'Dashboard' },
  { id: 'historico', icon: 'calendar', label: 'Histórico' },
  { id: 'maquinarios', icon: 'briefcase-outline', label: 'Maquinários' },
]
const SETTINGS_ITEMS = [
  { id: 'maquinarios', icon: 'briefcase-outline', label: 'Maquinários' },
  { id: 'modelos', icon: 'list-outline', label: 'Modelos de maquinário' },
  { id: 'manutencao', icon: 'settings-outline', label: 'Manutenção' },
  { id: 'materiais', icon: 'file-tray-full-outline', label: 'Materiais' },
]

function MachineryLayout({ route, onNav, isAdmin, title, actions, infoBanner, children, hideLogo, tabsNav, sideGroups }) {
  const { Ic, Modal } = window
  const [logoutOpen, setLogoutOpen] = React.useState(false)
  const logo = (window.__resources && window.__resources.logo) || '../../assets/logo-horizontal.svg'
  const mark = (window.__resources && window.__resources.machinery) || '../../assets/logo-machinery.svg'

  const MenuItem = ({ icon, label, active, onClick, footer, disabled }) => {
    const [h, setH] = React.useState(false)
    return (
      <button onClick={disabled ? undefined : onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', padding: '11px 18px', minHeight: 44,
          border: 0, cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: 'inherit', fontSize: 15, fontWeight: active ? 600 : 500,
          color: disabled ? 'rgba(255,255,255,0.4)' : '#fff', background: active ? 'rgba(255,255,255,0.1)' : (h && !disabled ? 'rgba(255,255,255,0.06)' : 'transparent'), transition: 'background .15s' }}>
        {active && <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: 'var(--color-alert)' }} />}
        <Ic name={icon} size={18} color={disabled ? 'rgba(255,255,255,0.4)' : '#fff'} />
        <span style={{ flex: 1 }}>{label}</span>
        {footer && <Ic name="chevron-forward" size={15} color="rgba(255,255,255,0.55)" />}
      </button>
    )
  }

  return (
    <div style={{ display: 'flex', height: '100%', background: 'var(--color-background)' }}>
      {sideGroups && <FGSideMenu groups={sideGroups} storageKey="maq_menu_mini" />}
      {!tabsNav && !sideGroups && <aside style={{ width: 250, minWidth: 250, background: '#374635', height: '100%', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
          {!hideLogo && <div style={{ padding: '22px 18px 0' }}>
            <a href="../configuracoes/index.html" title="Voltar aos produtos" style={{ display: 'inline-flex' }}><img src={logo} alt="Grupo Guanabara" style={{ width: 160, filter: 'brightness(0) invert(1)' }} /></a>
          </div>}
          <nav style={{ padding: hideLogo ? '16px 0 0' : '30px 0 0' }}>
            {MAIN_ITEMS.map(i => <MenuItem key={i.id} icon={i.icon} label={i.label} active={route === i.id} onClick={() => onNav(i.id)} />)}
          </nav>
        </div>
        {!hideLogo && <div style={{ borderTop: '1px solid #d7e5d630', padding: '8px 0 16px', flexShrink: 0 }}>
          <MenuItem icon="exit-outline" label="Sair" footer onClick={() => setLogoutOpen(true)} />
        </div>}
      </aside>}

      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, height: '100%', overflow: 'hidden' }}>
        <header style={{ background: 'var(--color-neutral-light-200)', borderTop: hideLogo ? '1px solid var(--color-neutral-200)' : 'none', borderBottom: '1px solid var(--color-neutral-light-300)', boxShadow: 'var(--shadow-header-default)', padding: '0 32px', minHeight: 72,
          boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexShrink: 0, zIndex: 20 }}>
          {tabsNav
            ? <nav style={{ display: 'flex', alignSelf: 'stretch', gap: 32, flexShrink: 0 }}>
                {MAIN_ITEMS.map((i) => {
                  const on = route === i.id
                  return <button key={i.id} onClick={() => onNav(i.id)} style={{ display: 'flex', alignItems: 'center', padding: '0 2px', border: 0, borderBottom: '3px solid ' + (on ? 'var(--color-primary)' : 'transparent'), background: 'transparent', cursor: 'pointer', fontFamily: 'inherit', fontSize: 16, fontWeight: 700, whiteSpace: 'nowrap', flexShrink: 0, color: on ? 'var(--color-primary-900)' : 'var(--color-grayish-light)' }}>{i.label}</button>
                })}
              </nav>
            : <h1 style={{ margin: 0, fontSize: 'var(--font-size-4xl)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-primary)' }}>{title}</h1>}
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>{infoBanner}{actions}</div>
        </header>
        <div style={{ flex: 1, overflowY: 'auto', position: 'relative', padding: '32px' }}>{children}</div>
      </main>

      {logoutOpen && (
        <Modal header="Encerrar sessão" text="Tem certeza que deseja sair do sistema?" onClose={() => setLogoutOpen(false)}
          secondaryLabel="Cancelar" secondaryAction={() => setLogoutOpen(false)}
          primaryLabel="Sair" primaryType="destructive" primaryAction={() => setLogoutOpen(false)} width={460} />
      )}
    </div>
  )
}
window.MachineryLayout = MachineryLayout