// === Sidebar / Topbar / Tabs (chrome) ===

const Sidebar = ({ activeBrand, setActiveBrand, onPortfolio, onExplorer, onWorkspace, viewKind }) => {
  const groups = {
    'Group': window.BRANDS.filter(b => b.id === 'admiral'),
    'Sub-brands': window.BRANDS.filter(b => ['bell','diamond','elephant','gladiator','veygo','morethan'].includes(b.id)),
    'Adjacencies': window.BRANDS.filter(b => ['admiral-business','admiral-money','admiral-pioneer','admiral-group'].includes(b.id)),
  };
  const [wsOpen, setWsOpen] = React.useState(false);

  return (
    <aside className="sidebar">
      <div className="brand-mark">
        <div className="logo">b</div>
        <div className="name">Bloxx</div>
        <div className="org">Admiral</div>
      </div>

      {/* Workspace switcher */}
      <div style={{position: 'relative'}}>
        <div
          onClick={() => setWsOpen(!wsOpen)}
          style={{display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 8, alignItems: 'center', padding: '6px 8px', border: '1px solid var(--line)', borderRadius: 6, cursor: 'pointer', background: 'var(--surface)', fontSize: 12}}
        >
          <span style={{width: 8, height: 8, borderRadius: 2, background: 'var(--navy)'}}/>
          <div className="stack-2">
            <span style={{fontWeight: 600}}>Admiral UK</span>
            <span className="muted mono" style={{fontSize: 9.5}}>editor · 11 brands</span>
          </div>
          <Icon name="chevron" size={11}/>
        </div>
        {wsOpen && (
          <div style={{position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 6, boxShadow: 'var(--shadow-2)', zIndex: 20, padding: 4}}>
            {[
              {n: 'Admiral UK', s: 'editor · 11 brands', d: 'var(--navy)', active: true},
              {n: 'Admiral Business', s: 'analytics · BYO', d: 'var(--violet)'},
              {n: 'Gladiator', s: 'analytics · shared', d: 'var(--coral)'},
              {n: 'MoreThan', s: 'analytics · shared', d: 'var(--gold)'},
            ].map((w, i) => (
              <div key={i} className="brand-row" style={{padding: 6, gridTemplateColumns: 'auto 1fr', fontWeight: w.active ? 600 : 400}}>
                <span style={{width: 8, height: 8, borderRadius: 2, background: w.d}}/>
                <div className="stack-2"><span>{w.n}</span><span className="muted" style={{fontSize: 9.5}}>{w.s}</span></div>
              </div>
            ))}
            <div style={{borderTop: '1px solid var(--line)', marginTop: 4, paddingTop: 4}}>
              <div className="brand-row" onClick={onWorkspace} style={{padding: 6, gridTemplateColumns: 'auto 1fr', color: 'var(--navy)'}}>
                <Icon name="settings" size={11}/><span style={{fontSize: 11}}>Manage workspaces</span>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="side-section">
        <div className={`brand-row ${viewKind === 'portfolio' ? 'active' : ''}`} onClick={onPortfolio} style={{gridTemplateColumns: '14px 1fr auto'}}>
          <Icon name="grid" size={12}/>
          <span style={{fontWeight: 500}}>Portfolio</span>
          <span className="rank">11</span>
        </div>
        <div className={`brand-row ${viewKind === 'explorer' ? 'active' : ''}`} onClick={onExplorer} style={{gridTemplateColumns: '14px 1fr auto'}}>
          <Icon name="sparkles" size={12}/>
          <span style={{fontWeight: 500}}>Relationship Explorer</span>
          <span className="rank">∞</span>
        </div>
        <div className={`brand-row ${viewKind === 'workspace' ? 'active' : ''}`} onClick={onWorkspace} style={{gridTemplateColumns: '14px 1fr auto'}}>
          <Icon name="settings" size={12}/>
          <span style={{fontWeight: 500}}>Workspaces</span>
          <span className="rank">4</span>
        </div>
      </div>

      {Object.entries(groups).map(([label, brands]) => (
        <div className="side-section" key={label}>
          <div className="side-label">
            <span>{label}</span>
            <span className="count">{brands.length}</span>
          </div>
          {brands.map(b => (
            <div
              key={b.id}
              className={`brand-row ${activeBrand?.id === b.id && viewKind === 'brand' ? 'active' : ''}`}
              onClick={() => setActiveBrand(b)}
            >
              <Fav init={b.initial}/>
              <span style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{b.name}</span>
              <span className="rank">#{b.rank}</span>
              <Delta d={b.delta}/>
            </div>
          ))}
        </div>
      ))}

      <div className="side-foot">
        <div className="avatar">JM</div>
        <div style={{lineHeight: 1.2}}>
          <div style={{color: 'var(--ink-1)', fontWeight: 500}}>Jamie Morgan</div>
          <div style={{fontSize: 10}}>Brand Strategy</div>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ crumbs, onBack, theme, setTheme }) => (
  <div className="topbar">
    <div className="crumbs">
      {crumbs.map((c, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {c.onClick ? (
            <button onClick={c.onClick}>{c.label}</button>
          ) : (
            <span className={i === crumbs.length - 1 ? 'here' : ''}>{c.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
    <div className="grow"/>
    <div className="meta">
      <span className="row" style={{gap: 6}}>
        <span className="pulse"/> live
      </span>
      <span>scan: 2h ago</span>
      <span>credits: 4,820</span>
    </div>
    <button className="icon-btn" title="Notifications"><Icon name="bell" size={14}/></button>
    <button className="icon-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} title="Theme">
      <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={14}/>
    </button>
    <button className="icon-btn"><Icon name="settings" size={14}/></button>
  </div>
);

const VerticalTabs = ({ verticals, active, setActive }) => (
  <div className="vert-tabs">
    {verticals.map(v => (
      <button
        key={v.id}
        className={`vert-tab ${active === v.id ? 'active' : ''}`}
        onClick={() => setActive(v.id)}
      >
        {v.alert && <span className="vt-alert"/>}
        <span>{v.name}</span>
        <span className="vt-rank">#{v.rank}</span>
        <Delta d={v.delta}/>
      </button>
    ))}
    <button className="vert-tab" style={{color: 'var(--ink-4)'}}>
      <Icon name="plus" size={11}/> Add
    </button>
  </div>
);

const SubTabs = ({ tabs, active, setActive }) => (
  <div className="sub-tabs">
    {tabs.map(t => (
      <button
        key={t}
        className={`sub-tab ${active === t ? 'active' : ''}`}
        onClick={() => setActive(t)}
      >
        {t}
      </button>
    ))}
  </div>
);

Object.assign(window, { Sidebar, Topbar, VerticalTabs, SubTabs });