// Onboarding (5 steps) + Settings modal
const { useState: useStateO } = React;

function Onboarding({ onDone }) {
  const { ICONS, Logo } = window.VDIcons;
  const [step, setStep] = useStateO(0);
  const [understood, setUnderstood] = useStateO(false);
  const [amount, setAmount] = useStateO(200);
  const [custom, setCustom] = useStateO('');

  const next = () => step < 4 ? setStep(step + 1) : onDone();

  const Progress = () => (
    <div style={{ display: 'flex', gap: 6, justifyContent: 'center', padding: '20px 0 8px' }}>
      {[0,1,2,3,4].map(i => (
        <div key={i} style={{
          width: i === step ? 28 : 8, height: 4, borderRadius: 999,
          background: i <= step ? 'var(--mint)' : 'var(--line)',
          transition: 'all 320ms var(--ease)',
        }} />
      ))}
    </div>
  );

  return (
    <div className="vd-backdrop" style={{ background: 'rgba(7,12,14,0.92)' }}>
      <div className="vd-card-rise" style={{ width: 460, background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', overflow: 'hidden' }}>
        <Progress />

        {step === 0 && (
          <Pane>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}><Logo size={48} /></div>
            <h1 style={{ fontSize: 28, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 12 }}>Trade the outcome of anything.</h1>
            <p style={{ color: 'var(--text-2)', fontSize: 14, marginBottom: 28, lineHeight: 1.5 }}>
              Binary options on assets, events, and catalysts. 1¢–100¢ tick sizing, sub-second matching, $0 gas.
            </p>
            <button onClick={next} className="btn btn-primary btn-xl btn-full">Get started</button>
          </Pane>
        )}

        {step === 1 && (
          <Pane>
            <div style={{ display: 'flex', justifyContent:'center', marginBottom: 20 }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bg-elev-2)', border: '1px solid var(--line)', display: 'flex', alignItems:'center', justifyContent:'center', color: 'var(--mint)' }}>{ICONS.walletI}</div>
            </div>
            <h1 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 10 }}>Connect your wallet</h1>
            <p style={{ color: 'var(--text-2)', fontSize: 13, marginBottom: 18, lineHeight: 1.5 }}>
              We'll set up an HL agent so you can trade gaslessly. Your keys stay yours — the agent is scoped to Verdict and revocable any time.
            </p>
            <div style={{ background: 'var(--bg-elev-2)', borderRadius: 10, border: '1px solid var(--line-subtle)', padding: 14, marginBottom: 20, display:'grid', gap: 10 }}>
              <Bullet>No key exposure to the venue</Bullet>
              <Bullet>Sub-second order entry</Bullet>
              <Bullet>$0 gas, builder-code routed</Bullet>
            </div>
            <button onClick={next} className="btn btn-primary btn-xl btn-full">Connect</button>
          </Pane>
        )}

        {step === 2 && (
          <Pane>
            <div style={{ display: 'flex', justifyContent:'center', marginBottom: 20 }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--coral-bg10)', border: '1px solid rgba(237,112,136,0.3)', display: 'flex', alignItems:'center', justifyContent:'center', color: 'var(--coral)' }}>{ICONS.alertI}</div>
            </div>
            <h1 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 10 }}>Risk acknowledgment</h1>
            <p style={{ color: 'var(--text-2)', fontSize: 13, marginBottom: 16, lineHeight: 1.55 }}>
              Binary options can lose <span style={{ color:'var(--text)' }}>100% of premium</span>. They settle at $0 or $1 — there's no partial outcome. Don't trade more than you can afford to lose.
            </p>
            <button onClick={() => setUnderstood(!understood)} style={{
              width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', borderRadius: 10,
              background: understood ? 'var(--mint-bg10)' : 'var(--bg-elev-2)',
              border: `1px solid ${understood ? 'rgba(151,252,228,0.4)' : 'var(--line-subtle)'}`,
              transition: 'all 200ms var(--ease)', textAlign:'left', marginBottom: 18,
            }}>
              <div style={{ width: 18, height: 18, borderRadius: 4, border: `1.5px solid ${understood ? 'var(--mint)' : 'var(--line-strong)'}`, background: understood ? 'var(--mint)' : 'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                {understood && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#0B1416" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5 10 17.5 19 7" /></svg>}
              </div>
              <span style={{ fontSize: 13, color: understood ? 'var(--text)' : 'var(--text-2)' }}>I understand the risks of trading binary options.</span>
            </button>
            <button onClick={next} disabled={!understood} className="btn btn-primary btn-xl btn-full" style={{ opacity: understood ? 1 : 0.4 }}>Continue</button>
          </Pane>
        )}

        {step === 3 && (
          <Pane>
            <div style={{ display: 'flex', justifyContent:'center', marginBottom: 20 }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bg-elev-2)', border: '1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--mint)' }}>{ICONS.dollar}</div>
            </div>
            <h1 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 10 }}>Fund your account</h1>
            <p style={{ color: 'var(--text-2)', fontSize: 13, marginBottom: 18 }}>USDC on Hyperliquid. Pick a starting amount.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
              {[50, 200, 1000].map(v => (
                <button key={v} onClick={() => { setAmount(v); setCustom(''); }} className="lift" style={{
                  padding: '14px 0', borderRadius: 10,
                  background: amount === v && !custom ? 'var(--bg-elev-3)' : 'var(--bg-elev-2)',
                  border: `1px solid ${amount === v && !custom ? 'rgba(151,252,228,0.4)' : 'var(--line-subtle)'}`,
                }}>
                  <div className="num" style={{ fontSize: 18, fontWeight: 600 }}>${v}</div>
                </button>
              ))}
            </div>
            <input className="vd-input" placeholder="Custom amount" value={custom} onChange={(e) => { setCustom(e.target.value.replace(/[^\d]/g, '')); setAmount(0); }} style={{ marginBottom: 18 }} />
            <button onClick={next} className="btn btn-primary btn-xl btn-full">Fund account · ${custom || amount}</button>
          </Pane>
        )}

        {step === 4 && (
          <Pane>
            <div style={{ display:'flex', justifyContent:'center', marginBottom: 16 }}>
              <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--mint-bg10)', border: '1px solid rgba(151,252,228,0.3)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--mint)' }}>{ICONS.target}</div>
            </div>
            <h1 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', marginBottom: 10 }}>Your first trade</h1>
            <p style={{ color: 'var(--text-2)', fontSize: 13, marginBottom: 18 }}>Here's a low-risk binary to start. You can skip and explore the markets first.</p>
            <div style={{ background: 'var(--bg-elev-2)', borderRadius: 12, border: '1px solid var(--line-subtle)', padding: 18, marginBottom: 18 }}>
              <div className="cap-sm" style={{ color:'var(--mint)', marginBottom: 8 }}>Featured · Today</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 6 }}>BTC closes above $90,000 by Friday</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
                <span className="num" style={{ fontSize: 28, fontWeight: 600, color: 'var(--mint)' }}>78¢</span>
                <span style={{ color: 'var(--text-3)', fontSize: 12 }}>YES · resolves May 8</span>
              </div>
              <div style={{ color: 'var(--text-3)', fontSize: 11, lineHeight: 1.5 }}>Pays $1 if BTC closes above $90K Friday per Pyth aggregate. Loses $0.78 if not.</div>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <button onClick={onDone} className="btn btn-xl btn-full" style={{ flex: 1 }}>Skip for now</button>
              <button onClick={onDone} className="btn btn-primary btn-xl btn-full" style={{ flex: 1.4 }}>Place first trade</button>
            </div>
          </Pane>
        )}
      </div>
    </div>
  );

  function Pane({ children }) { return <div style={{ padding: '8px 28px 28px' }}>{children}</div>; }
  function Bullet({ children }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, color: 'var(--text-2)' }}>
        <span style={{ color: 'var(--mint)', display:'inline-flex' }}>{ICONS.check}</span>{children}
      </div>
    );
  }
}

function Settings({ onClose }) {
  const { ICONS } = window.VDIcons;
  const VD = window.VD;
  const [priceFmt, setPriceFmt] = useStateO('cents');
  const [tz, setTz] = useStateO('ET');

  return (
    <div className="vd-backdrop" onClick={onClose}>
      <div className="vd-card-rise" onClick={(e) => e.stopPropagation()} style={{ width: 460, background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)', overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: '1px solid var(--line-subtle)' }}>
          <span style={{ fontWeight: 600 }}>Settings</span>
          <button className="btn-ghost btn" style={{ width: 32, height: 32, padding: 0 }} onClick={onClose}>{ICONS.close}</button>
        </div>

        <div style={{ padding: 18, display: 'grid', gap: 18 }}>
          <Group title="Account">
            <Field k="Wallet" v="0x4F2c…9aB1" copy />
            <Field k="HL Agent" v="Active" pill="mint" />
            <Field k="USDC balance" v={`$${VD.VD_ACCOUNT.total.toLocaleString(undefined, { minimumFractionDigits: 2 })}`} />
          </Group>

          <Group title="Display">
            <FieldChoice k="Price format" v={priceFmt} onChange={setPriceFmt} options={[['cents','¢'],['dollars','$'],['percent','%']]} />
            <FieldChoice k="Timezone" v={tz} onChange={setTz} options={[['ET','ET'],['UTC','UTC'],['PT','PT']]} />
          </Group>

          <Group title="Notifications">
            <Toggle k="Position alerts" defaultChecked />
            <Toggle k="Settlement notices" defaultChecked />
            <Toggle k="Catalyst reminders" />
          </Group>

          <button className="btn" style={{ marginTop: 4 }}>{ICONS.out} Disconnect wallet</button>
        </div>
      </div>
    </div>
  );

  function Group({ title, children }) {
    return (
      <div>
        <div className="cap-sm" style={{ marginBottom: 8 }}>{title}</div>
        <div style={{ background: 'var(--bg-elev-2)', border: '1px solid var(--line-subtle)', borderRadius: 10, overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    );
  }
  function Field({ k, v, copy, pill }) {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--line-subtle)' }}>
        <span style={{ color: 'var(--text-2)', fontSize: 13 }}>{k}</span>
        <span className="num" style={{ fontSize: 13, display: 'inline-flex', alignItems:'center', gap: 6,
          color: pill === 'mint' ? 'var(--mint)' : 'var(--text)'
        }}>
          {v}
          {copy && <span style={{ color: 'var(--text-3)', display: 'inline-flex' }}>{ICONS.copy}</span>}
        </span>
      </div>
    );
  }
  function FieldChoice({ k, v, onChange, options }) {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--line-subtle)' }}>
        <span style={{ color: 'var(--text-2)', fontSize: 13 }}>{k}</span>
        <div style={{ display: 'flex', background: 'var(--bg-elev-3)', borderRadius: 6, padding: 2 }}>
          {options.map(([val, label]) => (
            <button key={val} onClick={() => onChange(val)} style={{
              padding: '4px 10px', borderRadius: 4, fontSize: 12, fontWeight: 600,
              background: v === val ? 'var(--bg-elev)' : 'transparent',
              color: v === val ? 'var(--text)' : 'var(--text-3)',
              fontFamily: 'Geist Mono, monospace',
            }}>{label}</button>
          ))}
        </div>
      </div>
    );
  }
  function Toggle({ k, defaultChecked }) {
    const [on, setOn] = useStateO(!!defaultChecked);
    return (
      <button onClick={() => setOn(!on)} style={{ width:'100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 14px', borderBottom: '1px solid var(--line-subtle)', textAlign:'left' }}>
        <span style={{ color: 'var(--text-2)', fontSize: 13 }}>{k}</span>
        <div style={{ width: 36, height: 20, borderRadius: 999, background: on ? 'var(--mint)' : 'var(--line)', position: 'relative', transition: 'background 200ms var(--ease)' }}>
          <div style={{ position: 'absolute', top: 2, left: on ? 18 : 2, width: 16, height: 16, borderRadius: 999, background: '#0B1416', transition: 'left 200ms var(--spring)' }} />
        </div>
      </button>
    );
  }
}

window.VDOnboarding = { Onboarding, Settings };