// Shared shell — sidebar, topbar, main chrome. Used by every operator surface.

const { useState, useEffect, useMemo, useRef } = React;

function Sidebar({ active, onNavigate, collapsed, onToggleCollapse }) {
  const nav = window.MEP_DATA.nav;
  const tenant = window.MEP_DATA.tenant;
  return <aside style={{
    width: collapsed ? 64 : 232,
    flexShrink: 0,
    background: 'var(--bg-secondary)',
    borderRight: '1px solid var(--border-subtle)',
    display: 'flex', flexDirection: 'column',
    transition: 'width 180ms ease',
    overflow: 'hidden',
  }}>
    {/* Brand */}
    <div style={{ padding: '14px 16px', display:'flex', alignItems:'center', gap:10, borderBottom:'1px solid var(--border-subtle)' }}>
      <div style={{
        width:28, height:28, borderRadius:'var(--r-md)',
        background:'var(--accent-gold-soft)', border:'1px solid var(--accent-gold-ring)',
        display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
      }}>
        <div style={{width:8, height:8, borderRadius:2, background:'var(--accent-gold)'}}/>
      </div>
      {!collapsed && <div style={{flex:1, minWidth:0}}>
        <div style={{ fontSize:13, fontWeight:700, color:'var(--text-primary)', letterSpacing:'-0.01em' }}>{tenant.name}</div>
        <div style={{ fontSize:10, color:'var(--text-tertiary)', letterSpacing:'0.06em', textTransform:'uppercase', marginTop:1 }}>{tenant.city}</div>
      </div>}
    </div>

    {/* Scrollable nav */}
    <div className="scroll" style={{ flex:1, overflowY:'auto', padding:'8px 0 16px' }}>
      {nav.map(section => (
        <div key={section.section} style={{ marginTop:12 }}>
          {!collapsed && <div style={{
            padding:'6px 18px', fontSize:10, fontWeight:700,
            letterSpacing:'0.12em', color:'var(--text-tertiary)', textTransform:'uppercase',
          }}>{section.section}</div>}
          {section.items.filter(i => !i.sub).map(item => {
            const IconGlyph = Icon[item.icon] || Icon.grid;
            const isActive = active === item.id;
            return <button key={item.id} onClick={() => onNavigate(item.id)} style={{
              display:'flex', alignItems:'center', gap:10, width:'100%',
              padding: collapsed ? '10px 0' : '8px 14px 8px 18px',
              justifyContent: collapsed ? 'center' : 'flex-start',
              background: isActive ? 'var(--bg-selected)' : 'transparent',
              color: isActive ? 'var(--accent-gold)' : 'var(--text-secondary)',
              borderLeft: `2px solid ${isActive ? 'var(--accent-gold)' : 'transparent'}`,
              fontSize:13, fontWeight: isActive ? 600 : 500,
              transition:'background 120ms ease, color 120ms ease',
              marginLeft: collapsed ? 0 : 0,
            }}
            onMouseEnter={e => { if (!isActive) { e.currentTarget.style.background='var(--row-hover)'; e.currentTarget.style.color='var(--text-primary)'; }}}
            onMouseLeave={e => { if (!isActive) { e.currentTarget.style.background='transparent'; e.currentTarget.style.color='var(--text-secondary)'; }}}>
              <IconGlyph size={15}/>
              {!collapsed && <>
                <span style={{flex:1, textAlign:'left', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{item.label}</span>
                {item.count != null && <Badge variant={item.id==='approvals' ? 'gold' : item.id==='notifications' ? 'warning' : 'neutral'} size="sm">{item.count}</Badge>}
                {item.badge && <Badge variant="gold" size="sm">{item.badge}</Badge>}
                {item.device && <span style={{fontSize:9, color:'var(--text-tertiary)', letterSpacing:'0.06em', textTransform:'uppercase'}}>{item.device}</span>}
              </>}
            </button>;
          })}
        </div>
      ))}
    </div>

    {/* Footer: user + collapse */}
    <div style={{ padding:12, borderTop:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:10 }}>
      <Avatar name={tenant.user.name} size={30}/>
      {!collapsed && <div style={{flex:1, minWidth:0}}>
        <div style={{ fontSize:12, fontWeight:600, color:'var(--text-primary)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{tenant.user.name}</div>
        <div style={{ fontSize:10, color:'var(--text-tertiary)' }}>{tenant.role.toLowerCase()}</div>
      </div>}
      <button onClick={onToggleCollapse} style={{
        width:24, height:24, display:'flex', alignItems:'center', justifyContent:'center',
        color:'var(--text-tertiary)', borderRadius:'var(--r-sm)',
      }} aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}>
        <Icon.chevronR size={12} color="currentColor"/>
      </button>
    </div>
  </aside>;
}

function AppTopbar({ title, subtitle, actions, breadcrumbs, onOpenCmd }) {
  return <header style={{
    height:56, flexShrink:0,
    display:'flex', alignItems:'center', padding:'0 20px', gap:16,
    background:'var(--bg-secondary)',
    borderBottom:'1px solid var(--border-subtle)',
  }}>
    <div style={{flex:1, minWidth:0}}>
      {breadcrumbs && <div style={{ fontSize:11, color:'var(--text-tertiary)', marginBottom:2, display:'flex', gap:6, alignItems:'center' }}>
        {breadcrumbs.map((b, i) => (
          <React.Fragment key={i}>
            {i > 0 && <Icon.chevronR size={9} color="var(--text-tertiary)"/>}
            <span style={{ color: i === breadcrumbs.length-1 ? 'var(--text-secondary)' : 'var(--text-tertiary)'}}>{b}</span>
          </React.Fragment>
        ))}
      </div>}
      <div style={{ fontSize:16, fontWeight:700, letterSpacing:'-0.01em', color:'var(--text-primary)' }}>
        {title}
        {subtitle && <span style={{ fontSize:13, fontWeight:500, color:'var(--text-tertiary)', marginLeft:10 }}>{subtitle}</span>}
      </div>
    </div>
    <button onClick={onOpenCmd} style={{
      display:'inline-flex', alignItems:'center', gap:8, padding:'6px 10px',
      background:'var(--bg-elevated)', border:'1px solid var(--border-default)',
      borderRadius:'var(--r-md)', color:'var(--text-tertiary)', fontSize:12,
    }}>
      <Icon.search size={13}/>
      <span>Search or ask…</span>
      <span style={{ padding:'1px 5px', background:'var(--bg-primary)', border:'1px solid var(--border-default)', borderRadius:3, fontSize:10, color:'var(--text-tertiary)', marginLeft:16 }}>⌘K</span>
    </button>
    {actions}
    <button style={{ width:32, height:32, borderRadius:'var(--r-md)', background:'transparent', color:'var(--text-tertiary)', display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Icon.bell size={15}/>
    </button>
  </header>;
}

function Shell({ active, onNavigate, title, subtitle, breadcrumbs, actions, children, noPad }) {
  const [collapsed, setCollapsed] = useState(false);
  return <div style={{ display:'flex', height:'100vh', background:'var(--bg-primary)', overflow:'hidden' }}>
    <Sidebar active={active} onNavigate={onNavigate} collapsed={collapsed} onToggleCollapse={() => setCollapsed(c => !c)}/>
    <div style={{flex:1, display:'flex', flexDirection:'column', minWidth:0}}>
      <AppTopbar title={title} subtitle={subtitle} breadcrumbs={breadcrumbs} actions={actions}/>
      <main className="scroll" style={{ flex:1, overflowY:'auto', padding: noPad ? 0 : 28, background:'var(--bg-primary)' }}>
        {children}
      </main>
    </div>
  </div>;
}

Object.assign(window, { Sidebar, AppTopbar, Shell });