// WiseTokens — Shell (sidebar, topbar, cmdk)
const NAV = [
  { group: 'Main', items: [
    { id: 'dashboard', label: 'Dashboard', icon: 'home' },
    { id: 'models', label: 'Models', icon: 'chip', badge: '12' },
    { id: 'playground', label: 'Playground', icon: 'play' },
  ]},
  { group: 'Develop', items: [
    { id: 'keys', label: 'API Keys', icon: 'key' },
    { id: 'logs', label: 'Logs & Usage', icon: 'chart' },
    { id: 'routing', label: 'Routing', icon: 'route' },
    { id: 'webhooks', label: 'Webhooks', icon: 'send' },
    { id: 'sdks', label: 'SDKs', icon: 'code' },
    { id: 'docs', label: 'Docs', icon: 'book', external: true },
  ]},
  { group: 'Business', items: [
    { id: 'billing', label: 'Billing', icon: 'wallet' },
    { id: 'reports', label: 'Reports', icon: 'chart' },
    { id: 'broker', label: 'Broker', icon: 'users' },
    { id: 'whitelabel', label: 'White Label', icon: 'tenant' },
  ]},
  { group: 'Account', items: [
    { id: 'team', label: 'Team & Roles', icon: 'users' },
    { id: 'notifications', label: 'Notifications', icon: 'bell', badge: '3' },
    { id: 'compliance', label: 'Compliance', icon: 'shield' },
    { id: 'changelog', label: 'Changelog', icon: 'bolt' },
    { id: 'status', label: 'Status', icon: 'globe' },
    { id: 'settings', label: 'Settings', icon: 'cog' },
  ]},
];

function Sidebar({ active, onNav, balance }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark"><span>W</span></div>
        <div className="brand-label">
          <div style={{ lineHeight: 1.2 }}>WiseTokens</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-3)', fontWeight: 400, letterSpacing: '0.02em' }}>api.wisetokens.ai</div>
        </div>
      </div>
      <nav className="nav">
        {NAV.map(g => (
          <div key={g.group}>
            <div className="nav-group-label">{g.group}</div>
            {g.items.map(it => (
              <div key={it.id}
                   className={'nav-item' + (active === it.id ? ' active' : '')}
                   onClick={() => onNav(it.id)}>
                <span className="nav-icon"><Icon name={it.icon} size={15}/></span>
                <span className="nav-label">{it.label}</span>
                {it.badge && <span className="nav-badge">{it.badge}</span>}
                {it.external && <span className="nav-icon" style={{ marginLeft: 'auto' }}><Icon name="ext" size={12}/></span>}
              </div>
            ))}
          </div>
        ))}
      </nav>
      <div className="sidebar-footer">
        <div className="balance-card" onClick={() => onNav('billing')}>
          <div>
            <div className="label">Balance</div>
            <div className="value tabular">{WT.fmt.money(balance)}</div>
          </div>
          <Icon name="plus" size={14}/>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ crumbs, theme, onTheme, onCmdK, user }) {
  return (
    <div className="topbar">
      <div>
        <span className="topbar-crumb">{crumbs[0]}</span>
        {crumbs[1] && <>
          <span className="topbar-crumb" style={{ margin: '0 8px' }}>/</span>
          <span className="topbar-title">{crumbs[1]}</span>
        </>}
      </div>
      <div className="topbar-spacer"/>
      <div className="cmdk" onClick={onCmdK}>
        <Icon name="search" size={14}/>
        <span>Search models, keys, docs…</span>
        <kbd>⌘K</kbd>
      </div>
      <button className="btn ghost icon" onClick={onTheme} title="Toggle theme">
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15}/>
      </button>
      <button className="btn ghost icon" title="Notifications">
        <Icon name="bell" size={15}/>
      </button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 10px 6px 8px', border: '1px solid var(--line)', borderRadius: 999, background: 'var(--bg-elev)' }}>
        <div className="avatar" style={{ background: 'var(--accent)', color: 'var(--accent-ink)', borderColor: 'transparent' }}>A</div>
        <div style={{ fontSize: 12, lineHeight: 1.1 }}>
          <div style={{ fontWeight: 500 }}>{user.name}</div>
          <div style={{ color: 'var(--ink-3)', fontSize: 10.5 }}>{user.org} · {user.plan}</div>
        </div>
      </div>
    </div>
  );
}

// Top-nav variant
function TopNav({ active, onNav, theme, onTheme, balance, user }) {
  const flat = NAV.flatMap(g => g.items).filter(i => !i.external);
  return (
    <div className="topnav">
      <div className="topnav-brand">
        <div className="brand-mark"><span>W</span></div>
        <span>WiseTokens</span>
      </div>
      {flat.map(it => (
        <div key={it.id}
             className={'topnav-item' + (active === it.id ? ' active' : '')}
             onClick={() => onNav(it.id)}>
          {it.label}
        </div>
      ))}
      <div className="topnav-spacer"/>
      <div className="balance-card" style={{ padding: '5px 10px' }} onClick={() => onNav('billing')}>
        <div className="value tabular">{WT.fmt.money(balance)}</div>
      </div>
      <button className="btn ghost icon" onClick={onTheme}>
        <Icon name={theme === 'dark' ? 'sun' : 'moon'} size={15}/>
      </button>
      <div className="avatar" style={{ background: 'var(--accent)', color: 'var(--accent-ink)', borderColor: 'transparent' }}>A</div>
    </div>
  );
}

function CmdK({ open, onClose, onNav }) {
  const [q, setQ] = React.useState('');
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (open && inputRef.current) inputRef.current.focus();
    if (!open) setQ('');
  }, [open]);
  if (!open) return null;
  const items = [
    ...NAV.flatMap(g => g.items).map(i => ({ ...i, kind: 'page' })),
    ...WT.MODELS.map(m => ({ id: 'models', label: m.name, sub: m.provider + ' · ' + m.class, kind: 'model', icon: 'chip' })),
    { id: 'docs', label: 'Quickstart guide', sub: 'Make your first request', icon: 'book', kind: 'doc' },
    { id: 'docs', label: 'OpenAI SDK compatibility', sub: 'Drop-in base URL', icon: 'code', kind: 'doc' },
  ];
  const filtered = q ? items.filter(i => i.label.toLowerCase().includes(q.toLowerCase())) : items.slice(0, 10);
  return (
    <div className="backdrop" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 560 }} onClick={e => e.stopPropagation()}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="search" size={16}/>
          <input ref={inputRef} className="input" style={{ border: 'none', padding: 0, background: 'transparent' }}
                 placeholder="Search models, keys, docs…" value={q} onChange={e => setQ(e.target.value)}/>
          <kbd style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, padding: '2px 6px', background: 'var(--bg-sunken)', border: '1px solid var(--line)', borderRadius: 3 }}>ESC</kbd>
        </div>
        <div style={{ maxHeight: 380, overflowY: 'auto', padding: 6 }}>
          {filtered.length === 0 && <div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-3)' }}>No results</div>}
          {filtered.map((it, i) => (
            <div key={i}
                 className="nav-item"
                 style={{ padding: '8px 12px', borderRadius: 4 }}
                 onClick={() => { onNav(it.id); onClose(); }}>
              <Icon name={it.icon || 'arrow-right'} size={14}/>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                <span>{it.label}</span>
                {it.sub && <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>{it.sub}</span>}
              </div>
              <span className="badge" style={{ marginLeft: 'auto' }}>{it.kind}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, TopNav, CmdK, NAV });