/* eslint-disable */
/* =========================================================
   TEO IoT Dashboard — Shell (Sidebar + TopBar).
   Responsive: sidebar collapses to an off-canvas drawer on
   ≤ 768px; TopBar shows a hamburger button on mobile.
   ========================================================= */

const NAV = [
  ['overview',    'Overview',         'layout-dashboard'],
  ['twin',        'Digital twin',     'box'],
  ['devices',     'Devices',          'cpu'],
  ['telemetry',   'Telemetry',        'activity'],
  ['alerts',      'Alerts',           'alert-triangle'],
  ['automations', 'Automations',      'workflow'],
  ['reports',     'Reports',          'bar-chart-3'],
  ['settings',    'Settings',         'settings-2'],
];

const Sidebar = ({ current, onNav, site, sites, onSite, alertCount, mobileOpen, onClose }) => (
  <>
    {mobileOpen && <div className="teo-mobile-backdrop" onClick={onClose} />}
    <aside className="teo-sidebar" data-open={mobileOpen ? 'true' : 'false'} style={{
      width:240, background:'#0A0F1F', color:'#FFF',
      borderRight:'1px solid rgba(255,255,255,.12)',
      display:'flex', flexDirection:'column', height:'100vh',
      position:'sticky', top:0
    }}>
      {/* Logo */}
      <div style={{ padding:'24px 20px', borderBottom:'1px solid rgba(255,255,255,.12)', display:'flex', alignItems:'center', gap:12 }}>
        <TeoWordmark height={24} color="#FFFFFF" />
        <span style={{ fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color:'rgba(255,255,255,.5)', borderLeft:'1px solid rgba(255,255,255,.2)', paddingLeft:12 }}>IoT · Twin</span>
      </div>

      {/* Site selector */}
      <div style={{ padding:'16px 12px', borderBottom:'1px solid rgba(255,255,255,.12)' }}>
        <div style={{ fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,.5)', padding:'0 8px 8px' }}>Site</div>
        <select value={site.id} onChange={e => { onSite(sites.find(s => s.id === e.target.value)); onClose && onClose(); }}
          style={{
            width:'100%', background:'rgba(255,255,255,.06)', color:'#FFF',
            border:'1px solid rgba(255,255,255,.15)', borderRadius:0,
            padding:'10px 12px', font:"400 13px 'IBM Plex Sans'", appearance:'none'
          }}>
          {sites.map(s => <option key={s.id} value={s.id} style={{ color:'#000' }}>{s.name}</option>)}
        </select>
        <div style={{ fontSize:11, color:'rgba(255,255,255,.5)', marginTop:6, padding:'0 4px', fontFamily:'IBM Plex Mono, monospace' }}>{site.id} · {site.region}</div>
      </div>

      {/* Nav */}
      <nav style={{ padding:'12px 8px', flex:1, display:'flex', flexDirection:'column', gap:2, overflowY:'auto' }}>
        {NAV.map(([key,label,icon]) => {
          const active = current === key || (key==='devices' && current==='device');
          return (
            <button key={key} onClick={() => { onNav(key); onClose && onClose(); }} style={{
              display:'flex', alignItems:'center', gap:12, padding:'10px 12px',
              background: active ? 'rgba(122,156,255,.14)' : 'transparent',
              borderLeft: active ? '2px solid #7A9CFF' : '2px solid transparent',
              color:'#FFF', border:'none', borderRadius:0, cursor:'pointer',
              font:"400 14px 'IBM Plex Sans'", textAlign:'left', width:'100%',
              position:'relative'
            }}>
              <i data-lucide={icon} style={{ width:16, height:16 }} />
              {label}
              {key==='alerts' && alertCount > 0 && (
                <span style={{
                  marginLeft:'auto', minWidth:20, height:18, padding:'0 6px',
                  background:'#C44A4A', color:'#FFF', fontSize:11,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily:'IBM Plex Mono, monospace'
                }}>{alertCount}</span>
              )}
            </button>
          );
        })}
      </nav>

      {/* Status footer */}
      <div style={{ padding:'16px 20px', borderTop:'1px solid rgba(255,255,255,.12)', fontSize:12, color:'rgba(255,255,255,.7)' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:'#7A9CFF', boxShadow:'0 0 0 3px rgba(122,156,255,.2)' }} />
          Mesh online · 842 msg/s
        </div>
        <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:10, color:'rgba(255,255,255,.4)' }}>
          v0.2.0 · build 7e1a4c
        </div>
      </div>
    </aside>
  </>
);

const TopBar = ({ title, subtitle, right, search=true, onOpenMenu }) => (
  <header className="teo-topbar" style={{
    padding:'18px 32px', borderBottom:'1px solid #EDEDED', background:'#FFF',
    display:'flex', alignItems:'center', justifyContent:'space-between', gap:24
  }}>
    <div style={{ display:'flex', alignItems:'center', gap:14, minWidth:0 }}>
      {/* Hamburger — mobile only */}
      <button onClick={onOpenMenu} className="teo-hamburger" style={{
        alignItems:'center', justifyContent:'center',
        width:36, height:36, background:'transparent',
        border:'1px solid #EDEDED', borderRadius:0, cursor:'pointer'
      }} aria-label="Open menu">
        <i data-lucide="menu" style={{ width:18, height:18, color:'#0A0F1F' }} />
      </button>
      <div style={{ minWidth:0 }}>
        {subtitle && <div className="teo-topbar-subtitle" style={{ fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#3A6FF8', fontWeight:500, marginBottom:4, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{subtitle}</div>}
        <h1 style={{ fontSize:26, fontWeight:400, letterSpacing:'-0.04em', color:'#0A0F1F', margin:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{title}</h1>
      </div>
    </div>
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      {search && (
        <div className="teo-topbar-search" style={{ position:'relative' }}>
          <i data-lucide="search" style={{ position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', width:14, height:14, color:'#5A5E6E' }} />
          <input placeholder="Search devices, alerts, twins…"
            style={{
              background:'transparent', border:'1px solid #878787', borderRadius:0,
              padding:'9px 14px 9px 34px', font:"400 13px 'IBM Plex Sans'", width:280
            }} />
        </div>
      )}
      {right}
      <div style={{
        width:32, height:32, borderRadius:'50%', background:'#11172B', color:'#FFF',
        display:'flex', alignItems:'center', justifyContent:'center', fontSize:12,
        marginLeft:4
      }}>MC</div>
    </div>
  </header>
);

Object.assign(window, { Sidebar, TopBar });