// billing.jsx — Account & Billing page

function Billing() {
  const [platform, setPlatform] = React.useState('kick');
  return (
    <Stage>
      <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', minHeight: '100%' }}>
        <DashSidebar active="billing"/>
        <div style={{ padding: '24px 40px 80px', maxWidth: 1280 }}>
          <DashTopbar platform={platform} setPlatform={setPlatform}/>

          <div style={{ marginTop: 28, marginBottom: 32 }}>
            <h1 className="vb-h1" style={{ marginBottom: 6 }}>Billing & account</h1>
            <p className="vb-body" style={{ fontSize: 14, color: 'var(--vb-fg-2)' }}>Manage payment methods, view invoices, top up your balance.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 16, marginBottom: 24 }}>
            <Glass style={{ padding: 32, borderRadius: 24, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -60, right: -60, width: 280, height: 280, background: 'radial-gradient(circle, oklch(0.62 0.23 295 / 0.3), transparent 65%)', pointerEvents: 'none' }}/>
              <div style={{ position: 'absolute', bottom: -80, left: -40, width: 240, height: 240, background: 'radial-gradient(circle, oklch(0.88 0.27 142 / 0.18), transparent 65%)', pointerEvents: 'none' }}/>
              <div style={{ position: 'relative' }}>
                <div className="vb-row" style={{ marginBottom: 20 }}>
                  <span className="vb-caption">Current plan</span>
                  <span className="vb-spacer"/>
                  <span className="vb-badge vb-badge-kick">Pro · Kick Views</span>
                </div>
                <div className="vb-row" style={{ alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
                  <span className="vb-mono" style={{ fontSize: 64, fontWeight: 700, letterSpacing: '-0.03em' }}>$100<span style={{ color: 'var(--vb-fg-2)', fontWeight: 600, fontSize: 28, marginLeft: 6 }}>/ mo</span></span>
                </div>
                <span style={{ fontSize: 13, color: 'var(--vb-fg-2)' }}>Renews May 26, 2026 · Unlimited boosts · Cancel anytime</span>
                <div className="vb-row" style={{ gap: 10, marginTop: 28 }}>
                  <Btn variant="primary" icon={<IconBolt size={14}/>} href="pricing.html">Upgrade plan</Btn>
                  <Btn variant="glass" icon={<IconReceipt size={14}/>}>Invoices</Btn>
                  <Btn variant="ghost" size="sm">Cancel subscription</Btn>
                </div>
              </div>
            </Glass>

            <Glass style={{ padding: 24, borderRadius: 24 }}>
              <div className="vb-row" style={{ marginBottom: 16 }}>
                <span className="vb-caption">Default payment</span>
                <span className="vb-spacer"/>
                <button className="vb-btn vb-btn-ghost vb-btn-sm">Manage</button>
              </div>
              <div style={{ padding: 18, borderRadius: 14, background: 'linear-gradient(135deg, #1a1d29, #0d0f16)', border: '1px solid rgba(255,255,255,0.08)', position: 'relative', overflow: 'hidden', marginBottom: 12 }}>
                <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, background: 'radial-gradient(circle, oklch(0.62 0.23 295 / 0.3), transparent)', pointerEvents: 'none' }}/>
                <div className="vb-row" style={{ marginBottom: 24 }}>
                  <span style={{ width: 36, height: 24, borderRadius: 4, background: 'linear-gradient(135deg, #f7b500, #ff5722)' }}/>
                  <span className="vb-spacer"/>
                  <span style={{ fontSize: 11, color: 'var(--vb-fg-3)', fontWeight: 600, letterSpacing: '0.1em' }}>VISA</span>
                </div>
                <div className="vb-mono" style={{ fontSize: 16, letterSpacing: '0.15em', marginBottom: 14 }}>•••• •••• •••• 4242</div>
                <div className="vb-row" style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>
                  <span>Marcus Klein</span>
                  <span className="vb-spacer"/>
                  <span>04 / 28</span>
                </div>
              </div>
              <button style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', width: '100%', background: 'rgba(255,255,255,0.02)', border: '1px dashed rgba(255,255,255,0.1)', borderRadius: 12, color: 'var(--vb-fg-2)', fontSize: 12, cursor: 'pointer', justifyContent: 'center' }}>
                <IconPlus size={12}/> Add payment method
              </button>
            </Glass>
          </div>

          <Glass style={{ padding: 28, borderRadius: 24, marginBottom: 24 }}>
            <div className="vb-row" style={{ marginBottom: 20 }}>
              <h2 className="vb-h3">Recent invoices</h2>
              <span className="vb-spacer"/>
              <Btn variant="glass" size="sm">Export CSV</Btn>
            </div>
            <div className="vb-col" style={{ gap: 4 }}>
              <div className="vb-row" style={{ padding: '8px 16px', fontSize: 11, color: 'var(--vb-fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                <span style={{ width: 100 }}>Date</span>
                <span style={{ width: 130 }}>Invoice</span>
                <span style={{ width: 200 }}>Service</span>
                <span style={{ flex: 1 }}>Channel</span>
                <span style={{ width: 100, textAlign: 'right' }}>Amount</span>
                <span style={{ width: 100, textAlign: 'right' }}>Status</span>
                <span style={{ width: 40 }}/>
              </div>
              {[
                ['Apr 26', 'INV-1842', 'Pro Plan · monthly', 'pump_it_up_live', 'kick', 100.00, 'paid'],
                ['Apr 22', 'INV-1827', 'Standard Plan · monthly', 'marcus_plays', 'twitch', 50.00, 'paid'],
                ['Mar 26', 'INV-1779', 'Pro Plan · monthly', 'pump_it_up_live', 'kick', 100.00, 'paid'],
                ['Mar 22', 'INV-1762', 'Standard Plan · monthly', 'marcus_plays', 'twitch', 50.00, 'paid'],
                ['Mar 12', 'INV-1745', 'AIO Basic · upgrade', 'pump_it_up_live', 'kick', 80.00, 'paid'],
                ['Feb 26', 'INV-1701', 'Basic Plan · monthly', 'marcus_plays', 'twitch', 20.00, 'refunded'],
              ].map((row, i) => (
                <div key={i} className="vb-row" style={{ padding: '14px 16px', borderRadius: 10, fontSize: 13, transition: 'background 0.15s', cursor: 'pointer' }}
                     onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
                     onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <span style={{ width: 100, color: 'var(--vb-fg-2)' }}>{row[0]}</span>
                  <span style={{ width: 130, fontFamily: 'var(--vb-font-mono)', fontSize: 12, color: 'var(--vb-fg-1)' }}>{row[1]}</span>
                  <span style={{ width: 200, color: 'var(--vb-fg-1)' }}>{row[2]}</span>
                  <span style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                    {row[4] && <PlatformPill platform={row[4]}/>}
                    <span style={{ color: 'var(--vb-fg-1)' }}>{row[3]}</span>
                  </span>
                  <span style={{ width: 100, textAlign: 'right', fontFamily: 'var(--vb-font-mono)', fontWeight: 600 }}>${row[5].toFixed(2)}</span>
                  <span style={{ width: 100, textAlign: 'right' }}>
                    {row[6] === 'paid' ? <span className="vb-badge vb-badge-kick" style={{ height: 22 }}>Paid</span> : <span className="vb-badge" style={{ height: 22 }}>Refunded</span>}
                  </span>
                  <span style={{ width: 40, textAlign: 'right', color: 'var(--vb-fg-3)' }}><IconArrow size={14}/></span>
                </div>
              ))}
            </div>
          </Glass>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Glass id="channels" style={{ padding: 28, borderRadius: 24, scrollMarginTop: 90 }}>
              <div className="vb-row" style={{ marginBottom: 20 }}>
                <h2 className="vb-h3">Linked channels</h2>
                <span className="vb-spacer"/>
                <Btn variant="glass" size="sm" icon={<IconPlus size={12}/>}>Add</Btn>
              </div>
              <div className="vb-col" style={{ gap: 10 }}>
                <ChannelRow platform="kick" name="pump_it_up_live" followers="18.4K" verified/>
                <ChannelRow platform="twitch" name="marcus_plays" followers="3.2K" verified/>
                <ChannelRow platform="kick" name="late_night_grind" followers="841"/>
              </div>
            </Glass>

            <Glass id="account" style={{ padding: 28, borderRadius: 24, scrollMarginTop: 90 }}>
              <div className="vb-row" style={{ marginBottom: 20 }}>
                <h2 className="vb-h3">Account</h2>
              </div>
              <div className="vb-col" style={{ gap: 4 }}>
                <SettingRow label="Email" value="marcus@klein.io" actionLabel="Change"/>
                <SettingRow label="Password" value="•••••••••" actionLabel="Update"/>
                <SettingRow label="Two-factor auth" value="Authenticator app" actionLabel="Manage" status="on"/>
                <SettingRow label="Time zone" value="America / New York"/>
                <SettingRow label="API access" value="2 active keys" actionLabel="Tokens"/>
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.05)' }}>
                <button style={{ background: 'transparent', border: 'none', color: 'oklch(0.7 0.2 25)', fontSize: 12, fontWeight: 500, cursor: 'pointer', padding: 0 }}>Delete account</button>
              </div>
            </Glass>
          </div>
        </div>
      </div>
    </Stage>
  );
}

function ChannelRow({ platform, name, followers, verified }) {
  return (
    <div className="vb-row" style={{ padding: 14, borderRadius: 12, background: 'rgba(255,255,255,0.02)', border: '1px solid rgba(255,255,255,0.05)', gap: 12 }}>
      <Avatar name={name} size={36} hue={platform === 'kick' ? 142 : 295}/>
      <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
        <div className="vb-row" style={{ gap: 6 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{name}</span>
          {verified && <span style={{ color: 'oklch(0.85 0.18 200)' }}><IconCheck size={11}/></span>}
        </div>
        <span style={{ fontSize: 11, color: 'var(--vb-fg-3)' }}>{followers} followers</span>
      </div>
      <PlatformPill platform={platform}/>
      <button style={{ background: 'transparent', border: 'none', color: 'var(--vb-fg-3)', cursor: 'pointer', padding: 4 }}>•••</button>
    </div>
  );
}

function SettingRow({ label, value, actionLabel, status }) {
  return (
    <div className="vb-row" style={{ padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
      <div className="vb-col" style={{ flex: 1, minWidth: 0 }}>
        <span style={{ fontSize: 12, color: 'var(--vb-fg-3)' }}>{label}</span>
        <span style={{ fontSize: 13, color: 'var(--vb-fg-1)', marginTop: 2 }}>{value}</span>
      </div>
      {status === 'on' && <span className="vb-badge vb-badge-kick" style={{ height: 22, marginRight: 8 }}>On</span>}
      {actionLabel && <button className="vb-btn vb-btn-ghost vb-btn-sm" style={{ height: 28 }}>{actionLabel}</button>}
    </div>
  );
}

Object.assign(window, { Billing });