// Broker switcher — Alpaca / MooMoo / Add yours.
// Shows the BrokerAdapter interface and per-broker capabilities.

const BROKERS = [
  {
    id: 'alpaca', name: 'Alpaca', tag: 'WIRED',
    markets: ['US equities'],
    auth: 'API key + secret',
    host: 'paper-api.alpaca.markets',
    sample: { sym: 'AAPL', side: 'BUY', qty: 100, price: '205.42 / 205.43' },
    notes: 'Paper trading and live trading. Bring your own Alpaca account credentials.',
  },
  {
    id: 'moomoo', name: 'MooMoo', tag: 'WIRED',
    markets: ['US equities', 'HK equities', 'CN equities'],
    auth: 'OpenAPI token',
    host: 'tradexchange.cc',
    sample: { sym: 'HK.00700', side: 'BUY', qty: 100, price: '417.20 HKD' },
    notes: 'Bring your own MooMoo OpenAPI token. We host the relay so you do not have to.',
  },
  {
    id: 'custom', name: 'Add yours', tag: 'INTERFACE',
    markets: ['Any market your broker supports'],
    auth: 'Whatever your broker requires',
    host: 'your.broker.example',
    sample: null,
    notes: 'Tell us which broker you use. We add it within 30 days if there is API access.',
  },
];

function BrokerSwitcher() {
  const [bid, setBid] = React.useState('alpaca');
  const b = BROKERS.find(x => x.id === bid);

  const bsStyles = {
    wrap: {
      display: 'grid', gridTemplateColumns: '300px 1fr', gap: 0,
      border: `1px solid ${T.hair}`, background: T.paper,
    },
    side: { borderRight: `1px solid ${T.hair}`, padding: 24 },
    tab: (active) => ({
      width: '100%', textAlign: 'left',
      padding: '14px 16px', marginBottom: 4, cursor: 'pointer',
      background: active ? T.ink : 'transparent',
      color: active ? T.paper : T.text,
      border: 'none', transition: 'all .15s ease',
    }),
    stage: { padding: 32, background: T.paperDeep, position: 'relative', minHeight: 460 },
  };

  return (
    <div style={bsStyles.wrap}>
      <div style={bsStyles.side}>
        <Mono color={T.mute}>SELECT BROKER</Mono>
        <div style={{ marginTop: 16 }}>
          {BROKERS.map(x => (
            <button key={x.id} onClick={() => setBid(x.id)} style={bsStyles.tab(bid === x.id)}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: GEIST, fontSize: 16, fontWeight: 500, letterSpacing: -0.2 }}>
                  {x.name}
                </span>
                <span style={{
                  fontFamily: GMONO, fontSize: 9, letterSpacing: 0.6,
                  color: x.id === 'custom' ? T.caution : T.allow,
                }}>{x.tag}</span>
              </div>
              <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4, letterSpacing: -0.1 }}>
                {x.markets.join(' · ')}
              </div>
            </button>
          ))}
        </div>

        <div style={{ marginTop: 28, paddingTop: 20, borderTop: `1px solid ${T.hair}` }}>
          <Mono color={T.mute}>SAME EXPERIENCE, ANY BROKER</Mono>
          <p style={{ marginTop: 10, fontSize: 13, color: T.mute, lineHeight: 1.55, letterSpacing: -0.1 }}>
            Same verification panel. Same risk check. Same receipts. The broker is just the venue we send your verified order to.
          </p>
        </div>
      </div>

      <div style={bsStyles.stage}>
        <CornerMark where="tl"/><CornerMark where="tr"/><CornerMark where="bl"/><CornerMark where="br"/>
        <BrokerStage b={b}/>
      </div>
    </div>
  );
}

function BrokerStage({ b }) {
  // Show: connection card on top, then sample quote/order
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
        <Bracket color={T.allow}>BROKER · {b.name.toUpperCase()}</Bracket>
        <Mono color={T.mute}>{b.id === 'custom' ? 'On request' : 'Live on the platform'}</Mono>
      </div>

      <div style={{
        background: '#fff', border: `1px solid ${T.hair}`, padding: 22, marginBottom: 16,
      }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          <Spec k="AUTH" v={b.auth}/>
          <Spec k="HOST" v={b.host}/>
          <Spec k="MARKETS" v={b.markets.join(', ')}/>
          <Spec k="STATUS" v={
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Pulse color={b.id === 'custom' ? T.caution : T.allow} size={6}/>
              <span>{b.tag === 'INTERFACE' ? 'We add it for you' : 'Live · ready to trade'}</span>
            </span>
          }/>
        </div>
      </div>

      {b.sample ? (
        <div style={{ background: T.ink, color: T.textInv, padding: 22 }}>
          <Mono color={T.allow} weight={500}>SAMPLE ORDER · {b.name.toUpperCase()}</Mono>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
            marginTop: 16, paddingBottom: 16, borderBottom: `1px solid ${T.inkBorder}`,
          }}>
            <SpecDark k="SYMBOL" v={b.sample.sym}/>
            <SpecDark k="SIDE" v={b.sample.side}/>
            <SpecDark k="QTY" v={b.sample.qty}/>
            <SpecDark k="QUOTE" v={b.sample.price}/>
          </div>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <CodeRow k="01 · ORDER"        v={`${b.sample.side} ${b.sample.qty} ${b.sample.sym} · market order`}/>
            <CodeRow k="02 · VERIFIED"     v={'24 of 26 verifiers agree · 187ms'}/>
            <CodeRow k="03 · RISK CHECK"   v={'all 10 checks passed · 64ms'}/>
            <CodeRow k="04 · SENT TO BROKER" v={`${b.name} accepted the order`}/>
            <CodeRow k="05 · RECEIPT"      v={`ord_${Math.random().toString(36).slice(2,10)} · on file 90 days`}/>
          </div>
        </div>
      ) : (
        <div style={{ background: T.ink, color: T.textInv, padding: '24px 22px' }}>
          <Mono color={T.caution} weight={500}>WANT US TO ADD YOUR BROKER?</Mono>
          <ol style={{
            marginTop: 16, paddingLeft: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            {[
              'Tell us which broker you use today',
              'Confirm they have API access (most do)',
              'We build and test the integration',
              'You connect with your existing credentials',
              'You start trading — same verification, same receipts',
            ].map((step, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '28px 1fr', gap: 12 }}>
                <Mono color={T.allow} weight={500}>0{i+1}</Mono>
                <span style={{ fontFamily: GEIST, fontSize: 13, color: T.textInv, letterSpacing: -0.1 }}>{step}</span>
              </li>
            ))}
          </ol>
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${T.inkBorder}` }}>
            <Mono color={T.muteInv}>TYPICALLY 30 DAYS · EMAIL IP@EPOCHCORE.COM · INTERACTIVE BROKERS IS NEXT</Mono>
          </div>
        </div>
      )}
    </div>
  );
}

function Spec({ k, v }) {
  return (
    <div>
      <Mono color={T.mute}>{k}</Mono>
      <div style={{
        fontFamily: GMONO, fontSize: 13.5, marginTop: 6,
        color: T.text, letterSpacing: 0.2,
      }}>{v}</div>
    </div>
  );
}

function SpecDark({ k, v }) {
  return (
    <div>
      <Mono color={T.muteInv}>{k}</Mono>
      <div style={{
        fontFamily: GMONO, fontSize: 15, marginTop: 6, fontWeight: 500,
        color: T.textInv, letterSpacing: 0.3,
      }}>{v}</div>
    </div>
  );
}

function CodeRow({ k, v }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 12 }}>
      <Mono color={T.muteInv}>{k}</Mono>
      <span style={{
        fontFamily: GMONO, fontSize: 12, color: T.textInv,
        letterSpacing: 0.2, opacity: 0.9, wordBreak: 'break-all',
      }}>{v}</span>
    </div>
  );
}

Object.assign(window, { BrokerSwitcher });