// Token Swap — DEX-style swap dashboard for UBR / USDC / patent / DAO tokens.

const SWAP_TOKENS = [
  { sym: 'UBR',     name: 'Unblock token',          price: 1.84,  cls: 'protocol', col: 'oklch(0.86 0.19 118)' },
  { sym: 'USDC',    name: 'USD Coin',               price: 1.00,  cls: 'stable',   col: '#2775CA' },
  { sym: 'ETH',     name: 'Ether',                  price: 3210,  cls: 'crypto',   col: '#5B5A60' },
  { sym: 'GAT3-LTP',name: 'Astrocytic GAT-3 mod',   price: 1.84,  cls: 'patent',   col: 'oklch(0.66 0.13 240)' },
  { sym: 'AGEX',    name: 'AgeX Longevity DAO',     price: 2.42,  cls: 'dao',      col: 'oklch(0.78 0.16 70)' },
  { sym: 'GLIA',    name: 'Glia Initiative DAO',    price: 1.84,  cls: 'dao',      col: 'oklch(0.78 0.16 70)' },
  { sym: 'OPENVAX', name: 'OpenVax Cooperative',    price: 0.94,  cls: 'dao',      col: 'oklch(0.78 0.16 70)' },
  { sym: 'AGE-04',  name: 'Aging assay platform',   price: 1.32,  cls: 'patent',   col: 'oklch(0.66 0.13 240)' },
];

function SwapRail() {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>WALLET · LIQUID</div>
        <div style={{ fontFamily: UB.mono, fontSize: 22, color: UB.ink, lineHeight: 1.05 }}>$48,210</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 4 }}>14 assets · 3 networks</div>
      </div>
      <NavGroup label="Swap">
        <NavItem icon={Icon.arrow}  label="Swap"           badge="LIVE" active />
        <NavItem icon={Icon.bank}   label="Liquidity"      badge="3" />
        <NavItem icon={Icon.cube}   label="Bridge"         badge="—" />
        <NavItem icon={Icon.doc}    label="Limit orders"   badge="2" />
        <NavItem icon={Icon.flask}  label="Auto-DCA"       badge="1" />
      </NavGroup>
      <NavGroup label="Recent">
        <NavItem icon={Icon.check}  label="USDC → AGEX · $2.5K" />
        <NavItem icon={Icon.check}  label="UBR → USDC · 8K" />
        <NavItem icon={Icon.check}  label="OPENVAX → UBR · 2K" />
        <NavItem icon={Icon.check}  label="USDC → GAT3 · $4K" />
      </NavGroup>
      <NavGroup label="Tools">
        <NavItem icon={Icon.doc}  label="Tax · swaps" />
        <NavItem icon={Icon.cog}  label="Settings" />
      </NavGroup>
    </>
  );
}

function TokenPill({ t }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px 6px 6px', background: '#fff', border: `1px solid ${UB.rule2}`, cursor: 'pointer' }}>
      <div style={{ width: 24, height: 24, background: t.col, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.mono, fontSize: 9, fontWeight: 700 }}>{t.sym.slice(0, 2)}</div>
      <span style={{ fontFamily: UB.mono, fontSize: 12, fontWeight: 600 }}>{t.sym}</span>
      <span style={{ color: UB.ink4, fontSize: 11 }}>▾</span>
    </div>
  );
}

function SwapDapp() {
  const from = SWAP_TOKENS[1]; // USDC
  const to   = SWAP_TOKENS[4]; // AGEX
  return (
    <Dapp>
      <ChromeBar dapp="SWAP" code="UBP-AMM v1 · 14 PAIRS" />
      <Layout rail={<SwapRail />}>
        <PageHead
          eyebrow={<span>Tokens · Swap</span>}
          title="Swap"
          sub="Trade UBR, stables, and any patent or DAO token issued through UB-Chain. Routes auto-split across the protocol AMM and approved third-party pools."
          actions={<>
            <Btn small icon={Icon.cog}>Slippage · 0.5%</Btn>
            <Btn small icon={Icon.doc}>History · 124</Btn>
            <Btn small primary icon={Icon.bank}>Provide liquidity</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          {/* Left — swap card + chart + route */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title={`${from.sym} → ${to.sym}`} code="MARKET ORDER" pad={false}>
              <div style={{ padding: 18 }}>
                {/* From */}
                <div style={{ background: UB.paperDeep, padding: '14px 16px', marginBottom: 6 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>
                    <span>YOU PAY</span>
                    <span>balance · 18,420.00 USDC</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <input value="2,500.00" readOnly style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontFamily: UB.mono, fontSize: 28, fontWeight: 600, color: UB.ink, padding: 0 }} />
                    <TokenPill t={from} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 8 }}>
                    <span>≈ $2,500.00</span>
                    <div style={{ display: 'flex', gap: 4 }}>
                      {['25%', '50%', 'MAX'].map(p => <Tag key={p}>{p}</Tag>)}
                    </div>
                  </div>
                </div>
                {/* Flip */}
                <div style={{ display: 'flex', justifyContent: 'center', position: 'relative', height: 0 }}>
                  <div style={{ position: 'absolute', top: -14, width: 28, height: 28, background: '#fff', border: `1px solid ${UB.rule2}`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke={UB.ink} strokeWidth="1.4"><path d="M3 2v8M3 10l-2-2M3 10l2-2M9 10V2M9 2l-2 2M9 2l2 2"/></svg>
                  </div>
                </div>
                {/* To */}
                <div style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: '14px 16px', marginTop: 6 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>
                    <span>YOU RECEIVE</span>
                    <span>balance · 12,400.00 AGEX</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ flex: 1, fontFamily: UB.mono, fontSize: 28, fontWeight: 600, color: UB.accent }}>1,033.057</span>
                    <TokenPill t={to} />
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 8 }}>≈ $2,490.00 · 1 AGEX = $2.42</div>
                </div>
                <Btn primary style={{ width: '100%', justifyContent: 'center', height: 44, marginTop: 14, fontSize: 13 }}>Confirm swap · 2,500 USDC → 1,033 AGEX</Btn>
                <div style={{ marginTop: 10, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, lineHeight: 1.7 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Rate</span><span>1 USDC = 0.413 AGEX</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Slippage tolerance</span><span style={{ color: UB.accent }}>0.50%</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Min received</span><span>1,027.89 AGEX</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Price impact</span><span style={{ color: UB.ok }}>0.18%</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Network fee</span><span>0.0014 UBR · $0.02</span></div>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Protocol fee</span><span>0.30% · $7.50</span></div>
                </div>
              </div>
            </Card>

            <Card title={`${from.sym}/${to.sym} · 30d`} code="$2.42 · +5.1% 24h" pad={false}>
              <div style={{ padding: 18, height: 200 }}>
                <svg width="100%" height="100%" viewBox="0 0 600 160" preserveAspectRatio="none">
                  {[40, 80, 120].map(y => <line key={y} x1="0" x2="600" y1={y} y2={y} stroke={UB.rule3} strokeWidth="0.5" />)}
                  {(() => {
                    const pts = [];
                    for (let i = 0; i <= 30; i++) {
                      pts.push(120 - i * 1.6 + Math.sin(i * 0.5) * 10);
                    }
                    let d = `M 0 ${pts[0]}`;
                    pts.forEach((y, i) => { d += ` L ${(i / 30) * 600} ${y}`; });
                    return <path d={d} stroke={UB.accent} strokeWidth="1.6" fill="none" />;
                  })()}
                </svg>
              </div>
            </Card>

            <Card title="Route · split across 3 pools" code="OPTIMAL · UB-ROUTER" pad={false}>
              <div style={{ padding: 18 }}>
                <svg width="100%" height="120" viewBox="0 0 600 120">
                  {/* From box */}
                  <rect x="10" y="46" width="100" height="28" fill={UB.ink} />
                  <text x="60" y="64" textAnchor="middle" fontFamily={UB.mono} fontSize="11" fill={UB.paper}>2,500 USDC</text>
                  {/* Three split paths */}
                  {[{ y: 22, l: '60% · UBP-AMM v1 · USDC/AGEX', col: UB.accent }, { y: 60, l: '28% · USDC/UBR/AGEX', col: 'oklch(0.66 0.13 240)' }, { y: 98, l: '12% · USDC/ETH/AGEX', col: UB.ok }].map((r, i) => (
                    <g key={i}>
                      <path d={`M 110 60 C 220 60 ${r.y > 60 ? 280 : 280} ${r.y} 380 ${r.y}`} stroke={r.col} strokeWidth="1.4" fill="none" />
                      <text x="220" y={r.y - 4} fontFamily={UB.mono} fontSize="9" fill={UB.ink3}>{r.l}</text>
                      <circle cx="380" cy={r.y} r="3" fill={r.col} />
                      <path d={`M 380 ${r.y} C 460 ${r.y} 460 60 510 60`} stroke={r.col} strokeWidth="1.4" fill="none" />
                    </g>
                  ))}
                  {/* To box */}
                  <rect x="510" y="46" width="80" height="28" fill={UB.accent} />
                  <text x="550" y="64" textAnchor="middle" fontFamily={UB.mono} fontSize="11" fill={UB.ink}>1,033 AGEX</text>
                </svg>
              </div>
            </Card>
          </div>

          {/* Right — pairs / order book / recents */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Top pairs · 24h" code="BY VOLUME" pad={false}>
              {[
                ['UBR/USDC',     '$1.84',  '+2.1%', '$4.2M'],
                ['AGEX/USDC',    '$2.42',  '+5.1%', '$1.4M'],
                ['GLIA/UBR',     '$1.84',  '+2.4%', '$0.9M'],
                ['GAT3/USDC',    '$1.84',  '+0.4%', '$0.4M'],
                ['OPENVAX/UBR',  '$0.94',  '+1.4%', '$0.3M'],
                ['CRSPR/USDC',   '$1.42',  '+3.2%', '$0.2M'],
              ].map((r, i, arr) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 70px 70px 1fr', gap: 8, padding: '8px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontFamily: UB.mono, fontSize: 11, cursor: 'pointer' }}>
                  <span style={{ fontWeight: 600 }}>{r[0]}</span>
                  <span>{r[1]}</span>
                  <span style={{ color: UB.ok }}>{r[2]}</span>
                  <span style={{ color: UB.ink3, textAlign: 'right' }}>{r[3]}</span>
                </div>
              ))}
            </Card>

            <Card title="Order book · USDC/AGEX" code="DEPTH" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                <div style={{ borderRight: `1px solid ${UB.rule2}` }}>
                  {[[2.42, 1240], [2.41, 2100], [2.40, 540], [2.38, 4400]].map((r, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 12px', fontFamily: UB.mono, fontSize: 11, position: 'relative', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                      <span style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${(r[1] / 4400) * 100}%`, background: 'oklch(0.72 0.13 155 / 0.1)' }} />
                      <span style={{ color: UB.ok, position: 'relative' }}>${r[0].toFixed(2)}</span>
                      <span style={{ color: UB.ink3, position: 'relative' }}>{r[1]}</span>
                    </div>
                  ))}
                </div>
                <div>
                  {[[2.43, 800], [2.45, 1400], [2.48, 2200], [2.52, 1800]].map((r, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 12px', fontFamily: UB.mono, fontSize: 11, position: 'relative', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                      <span style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${(r[1] / 2200) * 100}%`, background: 'oklch(0.62 0.20 25 / 0.1)' }} />
                      <span style={{ color: UB.bad, position: 'relative' }}>${r[0].toFixed(2)}</span>
                      <span style={{ color: UB.ink3, position: 'relative' }}>{r[1]}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Card>

            <Card title="Your recent swaps" code="LAST 6" pad={false}>
              {[
                ['USDC → AGEX',  '$2,500',  '+1,033 AGEX', '14:08'],
                ['UBR → USDC',   '8,000 UBR', '+$14,720', '11:42'],
                ['OPENVAX → UBR','2,000',   '+1,020 UBR', '08:14'],
                ['USDC → GAT3',  '$4,000',  '+2,173 GAT3', 'yesterday'],
                ['UBR → AGEX',   '1,200 UBR', '+912 AGEX',  'yesterday'],
                ['USDC → GLIA',  '$1,800',  '+978 GLIA',   '2d'],
              ].map((r, i, arr) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.2fr 80px 1fr 70px', gap: 8, padding: '7px 14px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 10, alignItems: 'center' }}>
                  <span style={{ color: UB.ink2 }}>{r[0]}</span>
                  <span style={{ color: UB.ink3 }}>{r[1]}</span>
                  <span style={{ color: UB.ok }}>{r[2]}</span>
                  <span style={{ color: UB.ink4, textAlign: 'right' }}>{r[3]}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.SwapDapp = SwapDapp;
