// Neurasea for Business — Suppliers view (3 import methods + console)
// Exports to window: BizSuppliers

function MethodDetail({ method }) {
  const t = useTheme();
  const T = useT();
  const c = exColors ? exColors(t) : { up: t.live, down: '#c00' };
  if (method === 'cli') {
    return (
      <div style={{ background: t.dark ? '#0c0d10' : '#16171b', borderRadius: 14, padding: '18px 20px', fontFamily: t.mono, fontSize: 12.5, lineHeight: 1.7, color: '#cfd2d6', overflowX: 'auto' }}>
        <div style={{ color: '#6b7280' }}># import a CSV of API keys & ready-made accounts</div>
        <div><span style={{ color: t.live }}>$</span> neurasea supply import \\</div>
        <div style={{ paddingLeft: 18 }}>--file keys-batch-0612.csv --provider anthropic</div>
        <div style={{ color: '#8a8f98' }}>✓ parsed 240 rows · validating credentials…</div>
        <div style={{ color: '#8a8f98' }}>✓ 236 live · 3 rate-limited · 1 invalid</div>
        <div><span style={{ color: t.live }}>✓</span> 236 accounts joined the pool · earning enabled</div>
        <div style={{ marginTop: 6, color: '#6b7280' }}># or add one interactively</div>
        <div><span style={{ color: t.live }}>$</span> neurasea supply add --interactive</div>
      </div>
    );
  }
  if (method === 'cloud') {
    return (
      <div style={{ borderRadius: 14, border: `1px solid ${t.line}`, overflow: 'hidden', background: t.panel }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 14px', background: t.panel3, borderBottom: `1px solid ${t.line}` }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#ff5f57' }}/>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#febc2e' }}/>
            <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#28c840' }}/>
          </div>
          <div style={{ flex: 1, textAlign: 'center', fontSize: 11.5, fontFamily: t.mono, color: t.ink3 }}>cloud-browser · session #4821 🔒</div>
        </div>
        <div style={{ padding: '26px 20px', textAlign: 'center' }}>
          <div style={{ width: 54, height: 54, borderRadius: 14, background: '#e7ddd0', color: '#5a3b22', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 20, marginBottom: 14 }}>C</div>
          <div style={{ fontSize: 15, fontWeight: 650, color: t.ink }}>Sign in to Claude</div>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 260, margin: '14px auto 0' }}>
            <div style={{ textAlign: 'left', padding: '9px 12px', borderRadius: 9, border: `1px solid ${t.line}`, fontSize: 13, color: t.ink2, fontFamily: t.mono }}>pool-acct-37@…</div>
            <div style={{ textAlign: 'left', padding: '9px 12px', borderRadius: 9, border: `1px solid ${t.line}`, fontSize: 13, color: t.ink3, fontFamily: t.mono }}>••••••••••••</div>
            <div style={{ padding: '9px 12px', borderRadius: 9, background: t.live, color: '#fff', fontSize: 13, fontWeight: 600 }}>Continue</div>
          </div>
          <div style={{ marginTop: 16, fontSize: 11.5, color: t.ink3, fontFamily: t.mono, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="shield" size={13} color={t.live}/> Cookies & session stay in this cloud instance
          </div>
        </div>
      </div>
    );
  }
  // sandbox
  const boxes = [
    { id: 'sbx-1', acc: 128, load: 82, q: 99.4 },
    { id: 'sbx-2', acc: 96, load: 64, q: 99.1 },
    { id: 'sbx-3', acc: 120, load: 71, q: 98.8 },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
      {boxes.map(b => (
        <div key={b.id} style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 13, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 12.5, fontFamily: t.mono, fontWeight: 600, color: t.ink }}>{b.id}</span>
            <StatusDot color={t.live} size={6} pulse/>
          </div>
          <div style={{ fontSize: 11, color: t.ink3, fontFamily: t.mono, marginBottom: 3 }}>{b.acc} accts · session vault</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 8 }}>
            <Meter value={b.load} color={t.draw}/>
            <span style={{ fontSize: 11, fontFamily: t.mono, color: t.ink2, minWidth: 28 }}>{b.load}%</span>
          </div>
          <div style={{ fontSize: 11, color: t.ink3, fontFamily: t.mono, marginTop: 8 }}>quality {b.q}%</div>
        </div>
      ))}
    </div>
  );
}

function ImportMethods() {
  const t = useTheme();
  const T = useT();
  const [m, setM] = React.useState('cloud');
  const methods = [
    { id: 'cli', icon: 'terminal', title: 'CLI bulk import', rec: 'Recommended for API keys',
      body: 'Script accounts in one by one — or pipe a CSV of thousands. Best for API keys and headless credentials.', stat: '236 accounts imported', cta: 'Add another' },
    { id: 'cloud', icon: 'globe', title: 'Cloud serverless browser', rec: 'Recommended for account logins',
      body: 'Log into ready-made accounts in a managed cloud browser. Cookies and sessions stay in our instance — nothing on your machine.', stat: 'session active', cta: 'Open cloud browser' },
    { id: 'sandbox', icon: 'grid', title: 'Sandbox + session vault', rec: 'Recommended for large pools',
      body: 'Store credentials in isolated sandboxes backed by browser sessions. Built for large pools that need quota, rotation and load balancing.', stat: '3 sandboxes running', cta: 'Manage sandboxes' },
  ];
  const sel = methods.find(x => x.id === m);
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginBottom: 22 }}>
        {methods.map(meth => {
          const on = meth.id === m;
          return (
            <button key={meth.id} onClick={() => setM(meth.id)} style={{
              textAlign: 'left', cursor: 'pointer', fontFamily: t.sans,
              background: on ? t.panel : t.panel2, border: `1.5px solid ${on ? t.live : t.line}`,
              borderRadius: 16, padding: 20, transition: 'all .18s',
              boxShadow: on ? (t.dark ? '0 8px 24px rgba(0,0,0,0.35)' : '0 8px 24px rgba(0,0,0,0.07)') : 'none',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 11, background: on ? t.liveSoft : t.panel3, color: on ? t.live : t.ink2 }}>
                  <Icon name={meth.icon} size={21} color={on ? t.live : t.ink2}/>
                </div>
                {on && <StatusDot color={t.live} size={7} pulse/>}
              </div>
              <div style={{ fontSize: 16, fontWeight: 650, color: t.ink }}>{T(meth.title)}</div>
              <div style={{ fontSize: 11.5, color: t.live, fontFamily: t.mono, marginTop: 4 }}>{T(meth.rec)}</div>
              <p style={{ margin: '10px 0 0', fontSize: 13, lineHeight: 1.5, color: t.ink2 }}>{T(meth.body)}</p>
            </button>
          );
        })}
      </div>
      <div style={{ background: t.panel2, border: `1px solid ${t.line}`, borderRadius: 18, padding: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 13.5, fontFamily: t.mono, color: t.ink2 }}>
            <StatusDot color={t.live} size={6} pulse/>
            <span><b style={{ color: t.ink, fontWeight: 650 }}>{sel.stat.match(/^\d+/) ? sel.stat.match(/^\d+/)[0] : ''}</b> {T(sel.stat.replace(/^\d+\s*/, ''))}</span>
          </div>
          <Btn kind="secondary" size="sm" icon="plus">{T(sel.cta)}</Btn>
        </div>
        <MethodDetail method={m}/>
      </div>
    </div>
  );
}

// ── Supplier console ──────────────────────────────────────────
function statusTone(t, s) {
  return { live: t.live, cooling: t.idle, banned: 'oklch(0.62 0.19 25)' }[s] || t.ink2;
}

function SupplierConsole() {
  const t = useTheme();
  const T = useT();
  const d = BIZ_DATA.supplier;
  const kpis = [
    { l: 'Active accounts', v: d.activeAccounts, sub: `/ ${d.totalAccounts}`, c: t.ink },
    { l: 'kWh sold today', v: d.kwhToday.toLocaleString(), sub: 'kWh', c: t.live },
    { l: 'Revenue · 7d', v: '$' + d.revenue7d.toLocaleString(), sub: '', c: t.ink },
    { l: 'Fill rate', v: d.fillRate + '%', sub: '', c: t.live },
  ];
  return (
    <div style={{ background: t.win, border: `1px solid ${t.line}`, borderRadius: 22, padding: 26, marginTop: 8 }}>
      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0, marginBottom: 24 }}>
        {kpis.map((k, i) => (
          <div key={i} style={{ padding: '4px 22px', borderLeft: i ? `1px solid ${t.line2}` : 'none' }}>
            <div style={{ fontSize: 11, color: t.ink3, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.05em' }}>{T(k.l)}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 6 }}>
              <span style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', color: k.c }}>{k.v}</span>
              {k.sub && <span style={{ fontSize: 12.5, color: t.ink3, fontFamily: t.mono }}>{k.sub}</span>}
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 }}>
        {/* account pool */}
        <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 16, padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <span style={{ fontSize: 15, fontWeight: 650, color: t.ink }}>{T('Account pool')}</span>
            <span style={{ fontSize: 12, color: t.ink3, fontFamily: t.mono }}>{BIZ_DATA.accounts.length} {T('accounts imported').replace('imported','').trim() || ''}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.8fr 1.3fr 0.7fr', gap: 8, fontSize: 10.5, fontFamily: t.mono, color: t.ink3, textTransform: 'uppercase', letterSpacing: '0.04em', padding: '0 4px 10px', borderBottom: `1px solid ${t.line2}` }}>
            <span>{T('PROVIDER')}</span><span>{T('STATUS')}</span><span>{T('LOAD')}</span><span style={{ textAlign: 'right' }}>{T('SOLD 24H')}</span>
          </div>
          {BIZ_DATA.accounts.map(a => {
            const sc = statusTone(t, a.status);
            return (
              <div key={a.id} style={{ display: 'grid', gridTemplateColumns: '1.4fr 0.8fr 1.3fr 0.7fr', gap: 8, alignItems: 'center', padding: '10px 4px', borderBottom: `1px solid ${t.line2}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
                  <Avatar label={a.label} bg={a.bg} fg={a.fg} size={26} radius={7}/>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: t.ink, whiteSpace: 'nowrap' }}>{a.provider}</div>
                    <div style={{ fontSize: 10.5, color: t.ink3, fontFamily: t.mono }}>{a.plan}</div>
                  </div>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 600, fontFamily: t.mono, color: sc }}>
                  <StatusDot color={sc} size={5} pulse={a.status === 'live'}/> {T(a.status)}
                </span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <Meter value={a.load} color={a.status === 'live' ? t.live : t.idle}/>
                  <span style={{ fontSize: 11, fontFamily: t.mono, color: t.ink2, minWidth: 26 }}>{a.load}%</span>
                </div>
                <span style={{ fontSize: 12.5, fontFamily: t.mono, fontWeight: 600, color: t.ink, textAlign: 'right' }}>{a.sold || '—'}</span>
              </div>
            );
          })}
        </div>

        {/* right column: load balancing + import jobs + payout */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 16, padding: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 650, color: t.ink, marginBottom: 4 }}>{T('Load balancing')}</div>
            <p style={{ margin: '0 0 12px', fontSize: 11.5, lineHeight: 1.45, color: t.ink3 }}>{T("Requests are spread across healthy accounts to stay under each provider's rate ceiling.")}</p>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 56 }}>
              {d.loadSeries.map((v, i) => (
                <div key={i} style={{ flex: 1, height: `${v}%`, background: i === d.loadSeries.length - 1 ? t.live : t.liveSoft, borderRadius: 3, minHeight: 3 }}/>
              ))}
            </div>
          </div>
          <div style={{ background: t.panel, border: `1px solid ${t.line}`, borderRadius: 16, padding: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 650, color: t.ink, marginBottom: 12 }}>{T('Import jobs')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {BIZ_DATA.importJobs.map(j => {
                const jc = j.status === 'completed' ? t.live : j.status === 'running' ? t.draw : t.ink3;
                return (
                  <div key={j.id} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <StatusDot color={jc} size={6} pulse={j.status === 'running'}/>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: t.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{j.label}</div>
                      <div style={{ fontSize: 10.5, color: t.ink3, fontFamily: t.mono }}>{j.count} · {T(j.method)}</div>
                    </div>
                    <span style={{ fontSize: 11, fontFamily: t.mono, color: jc }}>{T(j.status)}</span>
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{ background: t.ink, borderRadius: 16, padding: 18, color: '#fff' }}>
            <div style={{ fontSize: 14, fontWeight: 650, marginBottom: 12 }}>{T('Payout & settlement')}</div>
            <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.6)', fontFamily: t.mono }}>{T('Available to withdraw')}</div>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '2px 0 10px' }}>${BIZ_DATA.supplier.available.toLocaleString()}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.6)', fontFamily: t.mono }}>{T('Next settlement')} · {BIZ_DATA.supplier.nextSettlement}</span>
              <Btn kind="accent" size="sm" color={t.live} icon="arrowUpRight">{T('Withdraw')}</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BizSuppliers() {
  const t = useTheme();
  const T = useT();
  return (
    <div style={{ padding: '56px 56px 72px', maxWidth: 1200, margin: '0 auto' }}>
      <ExHead kicker={T('For Suppliers')} title={T('Bring your inventory. We turn it into revenue.')}
        sub={T('Import thousands of ready-made accounts or API keys without a desktop client. Pick the path that fits your operation — all three keep credentials sealed inside Neurasea.')} />
      <h2 style={{ margin: '8px 0 20px', fontSize: 21, fontWeight: 680, letterSpacing: '-0.02em', color: t.ink }}>{T('Three ways to onboard a pool')}</h2>
      <ImportMethods/>
      <div style={{ marginTop: 56 }}>
        <ExHead title={T('Supplier console')} sub={T('A live view of your pool, earnings and load.')} />
        <SupplierConsole/>
      </div>
    </div>
  );
}

Object.assign(window, { BizSuppliers });