// extension.jsx — browser extension popup (compact wallet) in a browser frame
// Exports: ExtensionDemo

function ExtMark({ size = 26 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: 8, background: 'linear-gradient(150deg,var(--violet),#B49BFF)', display: 'grid', placeItems: 'center', boxShadow: '0 3px 8px rgba(124,92,255,.4)' }}>
      <Icon name="paw" size={size * 0.62} color="#fff" stroke={2.2} fill="#fff" />
    </div>
  );
}

function ExtPopup({ ctx }) {
  const { t, pet, theme, total, change, agent } = ctx;
  const pct = pet.xp / xpForLevel(pet.level + 1);
  return (
    <div style={{ width: 340, background: 'var(--bg)', borderRadius: 20, overflow: 'hidden', boxShadow: '0 24px 60px rgba(30,20,50,.32), 0 0 0 1px var(--line)', fontFamily: 'var(--body)', color: 'var(--ink)' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 15px', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <ExtMark />
          <div>
            <div style={{ fontFamily: 'var(--disp)', fontWeight: 600, fontSize: 14, lineHeight: 1 }}>Poke</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 700 }}>vee.eth</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 999, padding: '5px 10px' }}>
          <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--mint)' }} />
          <span style={{ fontSize: 11.5, fontWeight: 800 }}>Ethereum</span>
        </div>
      </div>

      {/* hero */}
      <div style={{ padding: 15 }}>
        <div style={{ borderRadius: 22, padding: '14px 16px', background: `linear-gradient(150deg, ${theme.c1}, ${theme.c2})`, position: 'relative', overflow: 'hidden', boxShadow: `0 10px 24px ${theme.c1}55`, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 85% -10%, rgba(255,255,255,.4), transparent 60%)' }} />
          <div style={{ position: 'relative' }}>
            <Ring size={68} stroke={5} value={pct} track="rgba(255,255,255,.35)" color="#fff">
              <Creature hue={pet.hue} size={50} stage={pet.stage} art={t.art} bob={false} />
            </Ring>
            <div style={{ position: 'absolute', bottom: -2, left: '50%', transform: 'translateX(-50%)', whiteSpace: 'nowrap', background: '#fff', borderRadius: 999, padding: '1px 7px', fontFamily: 'var(--disp)', fontWeight: 600, fontSize: 10.5, color: 'var(--ink)' }}>Lv {pet.level}</div>
          </div>
          <div style={{ position: 'relative', flex: 1 }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, color: 'rgba(255,255,255,.85)' }}>Total balance</div>
            <div style={{ fontFamily: 'var(--disp)', fontWeight: 600, fontSize: 27, color: '#fff', lineHeight: 1.1 }}>{fmtUSD(total)}</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, marginTop: 4, background: 'rgba(255,255,255,.22)', borderRadius: 999, padding: '2px 8px', color: '#fff', fontWeight: 800, fontSize: 11.5 }}>
              <Icon name="arrowUp" size={12} stroke={2.6} /> {change.toFixed(1)}%
            </div>
          </div>
        </div>

        {/* quick actions */}
        <div style={{ display: 'flex', gap: 8, marginTop: 13 }}>
          {[['send', 'Send', 'var(--violet)', 'var(--violet-soft)'], ['receive', 'Receive', 'var(--sky)', '#E3F2FD'], ['swap', 'Swap', 'var(--mint)', 'var(--mint-soft)']].map(([ic, lb, c, s]) => (
            <button key={lb} style={{ flex: 1, border: 'none', cursor: 'pointer', background: 'var(--surface)', borderRadius: 14, padding: '11px 0 9px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, boxShadow: 'var(--shadow-soft)' }}>
              <span style={{ width: 32, height: 32, borderRadius: 10, background: s, color: c, display: 'grid', placeItems: 'center' }}><Icon name={ic} size={17} stroke={2.3} /></span>
              <span style={{ fontSize: 11, fontWeight: 800, color: 'var(--ink-2)' }}>{lb}</span>
            </button>
          ))}
        </div>

        {/* agent */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12, background: 'var(--surface)', borderRadius: 14, padding: '11px 13px', boxShadow: 'var(--shadow-soft)' }}>
          <div style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--violet-soft)', color: 'var(--violet)', display: 'grid', placeItems: 'center' }}><Icon name="cpu" size={18} stroke={2} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 13 }}>{agent.name}</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 700 }}>Agent live · {agent.runs} runs</div>
          </div>
          <div style={{ fontFamily: 'var(--disp)', fontWeight: 600, fontSize: 15, color: 'var(--mint)' }}>+{agent.apy}%</div>
        </div>

        {/* assets compact */}
        <div style={{ marginTop: 12, background: 'var(--surface)', borderRadius: 14, padding: '4px 4px', boxShadow: 'var(--shadow-soft)' }}>
          {ASSETS.slice(0, 3).map((a, i) => (
            <div key={a.sym} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 11px', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ width: 30, height: 30, borderRadius: 9, background: `oklch(0.92 0.09 ${a.hue})`, color: `oklch(0.45 0.15 ${a.hue})`, display: 'grid', placeItems: 'center', fontFamily: 'var(--disp)', fontWeight: 700, fontSize: 11 }}>{a.sym.slice(0, 2)}</div>
              <div style={{ flex: 1, fontWeight: 800, fontSize: 13 }}>{a.sym}</div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontWeight: 800, fontSize: 12.5 }}>{fmtUSD(a.amt * a.price)}</div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: a.chg > 0 ? 'var(--mint)' : a.chg < 0 ? 'var(--coral)' : 'var(--ink-3)' }}>{a.chg > 0 ? '+' : ''}{a.chg}%</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ExtensionDemo({ ctx }) {
  return (
    <div style={{ width: 460, borderRadius: 16, overflow: 'hidden', background: '#fff', boxShadow: '0 40px 90px rgba(30,20,50,.22), 0 0 0 1px rgba(0,0,0,.06)' }}>
      {/* browser chrome */}
      <div style={{ background: '#EDEAF2', padding: '11px 14px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 9 }}>
          {['#FF5F57', '#FEBC2E', '#28C840'].map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c }} />)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ background: '#fff', borderRadius: '9px 9px 0 0', padding: '8px 14px', fontSize: 12, fontWeight: 700, color: '#5A5566', display: 'flex', alignItems: 'center', gap: 7, maxWidth: 200 }}>
            <span style={{ width: 14, height: 14, borderRadius: 4, background: 'linear-gradient(150deg,#21B383,#3FD6A0)' }} />
            <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>app.harmonix.fi</span>
          </div>
        </div>
      </div>
      {/* toolbar */}
      <div style={{ background: '#fff', padding: '9px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid #ECE9F1', position: 'relative' }}>
        <Icon name="chevron" size={17} color="#A29DAD" stroke={2.4} style={{ transform: 'rotate(180deg)' }} />
        <Icon name="chevron" size={17} color="#D8D4E0" stroke={2.4} />
        <div style={{ flex: 1, background: '#F3F1F7', borderRadius: 999, padding: '7px 14px', fontSize: 12.5, color: '#6B6776', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 7 }}>
          <Icon name="lock" size={12} color="#21B383" stroke={2.4} /> app.harmonix.fi/earn
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: 'var(--violet-soft)', boxShadow: '0 0 0 2px var(--violet)' }}><ExtMark size={18} /></span>
        </div>
        {/* anchored popup */}
        <div style={{ position: 'absolute', top: 'calc(100% + 8px)', right: 12, zIndex: 10 }}>
          <div style={{ position: 'absolute', top: -6, right: 14, width: 12, height: 12, background: 'var(--surface)', transform: 'rotate(45deg)', borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }} />
          <ExtPopup ctx={ctx} />
        </div>
      </div>
      {/* faux page behind */}
      <div style={{ height: 540, background: 'linear-gradient(180deg,#FAFAFD,#F3F1F7)', position: 'relative' }}>
        <div style={{ padding: '30px 28px' }}>
          <div style={{ width: 150, height: 13, borderRadius: 7, background: '#E4E0EC' }} />
          <div style={{ width: 230, height: 28, borderRadius: 8, background: '#E4E0EC', marginTop: 14 }} />
          <div style={{ display: 'flex', gap: 14, marginTop: 26 }}>
            {[0, 1, 2].map((i) => <div key={i} style={{ flex: 1, height: 90, borderRadius: 16, background: '#fff', border: '1px solid #ECE9F1' }} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ExtensionDemo, ExtPopup });