// dash-chrome.jsx — shared sidebar + topbar for dashboard and billing

function DashSidebar({ active }) {
  const items = [
    { id: 'overview',   label: 'Overview',   icon: <IconHome size={16}/>,  href: 'dashboard.html' },
    { id: 'aichatbot',  label: 'AI Chatbot', icon: <IconSpark size={16}/>, href: 'ai-chat-dashboard.html', badge: 'LIVE' },
    { id: 'affiliate',  label: 'Affiliate',  icon: <IconLink size={16}/>,  href: 'affiliate-dashboard.html', badge: 'PRO' },
    { id: 'channels',   label: 'Channels',   icon: <IconUser size={16}/>,  href: 'billing.html#channels' },
    { id: 'billing',    label: 'Billing',    icon: <IconCard size={16}/>,  href: 'billing.html' },
    { id: 'settings',   label: 'Settings',   icon: <IconCog size={16}/>,   href: 'billing.html#account' },
  ];
  return (
    <aside style={{ padding: '24px 16px', borderRight: '1px solid rgba(255,255,255,0.05)', display: 'flex', flexDirection: 'column' }}>
      <a href="index.html" className="vb-row" style={{ gap: 10, padding: '8px 12px 28px', textDecoration: 'none', color: 'inherit' }}>
        <span style={{ fontWeight: 600, fontSize: 15, letterSpacing: '-0.015em' }}>Viewbot<span style={{ color: 'var(--vb-fg-3)' }}>.to</span></span>
      </a>
      <nav className="vb-col" style={{ gap: 2 }}>
        {items.map((it) => (
          <a key={it.id} href={it.href} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px',
            border: 'none', cursor: 'pointer',
            background: active === it.id ? 'rgba(255,255,255,0.06)' : 'transparent',
            borderRadius: 10,
            color: active === it.id ? 'var(--vb-fg-0)' : 'var(--vb-fg-2)',
            fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
            position: 'relative', textDecoration: 'none',
          }}>
            {active === it.id && <span style={{ position: 'absolute', left: -16, top: 8, bottom: 8, width: 2, background: 'linear-gradient(180deg, oklch(0.88 0.27 142), oklch(0.62 0.23 295))', borderRadius: 1 }}/>}
            {it.icon}
            <span>{it.label}</span>
            {it.badge && <span style={{ marginLeft: 'auto', fontSize: 10, fontWeight: 600, background: 'oklch(0.88 0.27 142 / 0.2)', color: 'oklch(0.92 0.2 142)', padding: '2px 7px', borderRadius: 999 }}>{it.badge}</span>}
          </a>
        ))}
      </nav>
      <div className="vb-spacer"/>
      <Glass soft style={{ padding: 14, borderRadius: 14 }}>
        <div className="vb-row" style={{ gap: 10 }}>
          <Avatar name="M" size={32} hue={142}/>
          <div className="vb-col" style={{ minWidth: 0, flex: 1 }}>
            <span style={{ fontSize: 12, fontWeight: 600 }}>Marcus K.</span>
            <span style={{ fontSize: 10, color: 'var(--vb-fg-3)', overflow: 'hidden', textOverflow: 'ellipsis' }}>Pro · since Mar '26</span>
          </div>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--vb-fg-2)', cursor: 'pointer' }}><IconChevron size={14}/></button>
        </div>
      </Glass>
    </aside>
  );
}

function DashTopbar({ platform, setPlatform }) {
  return (
    <Glass style={{ height: 56, padding: '0 8px 0 20px', borderRadius: 999, display: 'flex', alignItems: 'center' }}>
      <div className="vb-row" style={{ gap: 10 }}>
        <IconSearch size={16} style={{ color: 'var(--vb-fg-3)' }}/>
        <input className="vb-input" placeholder="Search boosts, channels, invoices…" style={{ background: 'transparent', border: 'none', height: 32, padding: 0, width: 320, fontSize: 13 }}/>
      </div>
      <span className="vb-spacer"/>
      <Tabs items={[
        { value: 'kick', label: 'Kick', icon: <IconKick size={12}/> },
        { value: 'twitch', label: 'Twitch', icon: <IconTwitch size={12}/> },
      ]} value={platform} onChange={setPlatform} style={{ marginRight: 12 }}/>
      <button style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', color: 'var(--vb-fg-1)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
        <IconBell size={16}/>
        <span style={{ position: 'absolute', top: 6, right: 8, width: 6, height: 6, borderRadius: 3, background: 'oklch(0.7 0.24 25)' }}/>
      </button>
      <Btn variant="primary" size="sm" icon={<IconBolt size={13}/>} href="pricing.html" style={{ marginLeft: 8 }}>New boost</Btn>
    </Glass>
  );
}

Object.assign(window, { DashSidebar, DashTopbar });