// Compute Marketplace — bid for GPU/CPU compute on UB-Chain.

function ComputeDapp() {
  const sidebar = (
    <>
      <NavGroup label="Marketplace">
        <NavItem icon={Icon.cpu} label="Spot market" active />
        <NavItem icon={Icon.shield} label="Reserved" />
        <NavItem icon={Icon.cube} label="ZK compute" />
        <NavItem icon={Icon.flask} label="My jobs" badge="3" />
      </NavGroup>
      <NavGroup label="Provide">
        <NavItem icon={Icon.plus} label="List a node" />
        <NavItem icon={Icon.bank} label="Earnings" />
      </NavGroup>
      <NavGroup label="Bench">
        <NavItem icon={Icon.doc} label="Reproducibility logs" />
      </NavGroup>
    </>
  );

  return (
    <Dapp dark>
      <ChromeBar dapp="COMPUTE" code="MARKET" />
      <Layout dark rail={sidebar}>
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', background: UB.ink, color: '#EAE9E2' }}>
          {/* Header in dark */}
          <div style={{ padding: '20px 28px 18px', borderBottom: '1px solid rgba(255,255,255,.08)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.2em', color: '#8A8990', textTransform: 'uppercase', marginBottom: 6 }}>Spot market · live</div>
              <h1 style={{ margin: 0, fontFamily: UB.serif, fontWeight: 400, fontSize: 32, letterSpacing: '-0.02em' }}>Academic compute exchange</h1>
              <div style={{ marginTop: 6, color: '#A8A7A0', maxWidth: 600 }}>1,847 nodes online · 412 PFLOPS aggregate · provider-side bids settle every 12 seconds.</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Btn small dark icon={Icon.flask}>Submit job</Btn>
              <Btn small primary>Quick bid</Btn>
            </div>
          </div>

          <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            {/* Live order book */}
            <div style={{ border: '1px solid rgba(255,255,255,.10)', background: '#161617', display: 'flex', flexDirection: 'column' }}>
              <div style={{ padding: '10px 14px', borderBottom: '1px solid rgba(255,255,255,.06)', display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontWeight: 600, fontSize: 12 }}>Order book</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: '#8A8990' }}>UBR · per GPU·hr</span>
                </div>
                <Tag tone="accent">LIVE</Tag>
              </div>
              {/* table */}
              <div style={{ display: 'grid', gridTemplateColumns: '50px 1.2fr 80px 80px 80px 60px', gap: 12, padding: '8px 14px', fontFamily: UB.mono, fontSize: 9, color: '#8A8990', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                <span>SIDE</span><span>HARDWARE</span><span style={{textAlign:'right'}}>PRICE</span><span style={{textAlign:'right'}}>QTY</span><span style={{textAlign:'right'}}>TIS</span><span style={{textAlign:'right'}}>UP%</span>
              </div>
              {[
                ['ASK', 'NVIDIA H100 · 80GB · IB', 4.20, 12, 96, 99.7],
                ['ASK', 'NVIDIA H100 · 80GB', 3.80, 8, 92, 99.4],
                ['ASK', 'NVIDIA A100 · 80GB', 2.40, 24, 88, 99.8],
                ['ASK', 'NVIDIA A100 · 40GB', 1.90, 18, 84, 98.9],
                ['ASK', 'NVIDIA RTX 4090', 0.80, 64, 71, 97.6],
                ['ASK', 'AMD MI250X', 2.10, 6, 79, 99.1],
                ['BID', 'NVIDIA H100 · any', 3.60, 4, '—', '—'],
                ['BID', 'NVIDIA A100 · 80GB', 2.20, 8, '—', '—'],
                ['BID', 'CPU · 64-core', 0.18, 200, '—', '—'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '50px 1.2fr 80px 80px 80px 60px', gap: 12, padding: '7px 14px', fontFamily: UB.mono, fontSize: 11, borderTop: '1px solid rgba(255,255,255,.04)' }}>
                  <span style={{ color: r[0] === 'ASK' ? UB.accent : '#7CC4F2' }}>{r[0]}</span>
                  <span style={{ color: '#EAE9E2' }}>{r[1]}</span>
                  <span style={{ textAlign: 'right' }}>{r[2].toFixed ? r[2].toFixed(2) : r[2]}</span>
                  <span style={{ textAlign: 'right', color: '#A8A7A0' }}>{r[3]}</span>
                  <span style={{ textAlign: 'right', color: '#A8A7A0' }}>{r[4]}</span>
                  <span style={{ textAlign: 'right', color: typeof r[5] === 'number' && r[5] >= 99 ? UB.ok : '#A8A7A0' }}>{r[5]}</span>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Submit job */}
              <div style={{ border: '1px solid rgba(255,255,255,.10)', background: '#161617', padding: 16 }}>
                <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 12 }}>Submit job</div>
                {[
                  ['Workload', 'PyTorch · GNN training'],
                  ['Hardware tier', 'H100 · 80GB · ≥4 GPUs'],
                  ['Duration', '24h · auto-checkpoint'],
                  ['Data source', 'ipfs://QmZ8…7c2e (encrypted)'],
                  ['ZK verify', 'On — replicate × 3'],
                ].map((f, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 4 ? '1px solid rgba(255,255,255,.05)' : 'none' }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 9, color: '#8A8990', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{f[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 11 }}>{f[1]}</span>
                  </div>
                ))}
                <div style={{ marginTop: 12, padding: 10, background: 'rgba(255,255,255,.03)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 4 }}>
                    <span>Est. cost</span><span style={{ fontFamily: UB.mono, color: UB.accent }}>403.20 UBR</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: '#8A8990' }}>
                    <span>4 × H100 · 24h × 4.20</span><span>≈ $132.25</span>
                  </div>
                </div>
                <Btn small primary style={{ width: '100%', marginTop: 12 }}>Place order · escrow</Btn>
              </div>

              {/* Network status */}
              <div style={{ border: '1px solid rgba(255,255,255,.10)', background: '#161617', padding: 16 }}>
                <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 12 }}>Network</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div><div style={{fontFamily:UB.mono,fontSize:9,letterSpacing:'0.18em',color:'#8A8990',marginBottom:4}}>NODES ONLINE</div><div style={{fontFamily:UB.mono,fontSize:18,fontWeight:500}}>1,847</div></div>
                  <div><div style={{fontFamily:UB.mono,fontSize:9,letterSpacing:'0.18em',color:'#8A8990',marginBottom:4}}>UTIL</div><div style={{fontFamily:UB.mono,fontSize:18,fontWeight:500,color:UB.accent}}>92.3%</div></div>
                  <div><div style={{fontFamily:UB.mono,fontSize:9,letterSpacing:'0.18em',color:'#8A8990',marginBottom:4}}>QUEUE</div><div style={{fontFamily:UB.mono,fontSize:18,fontWeight:500}}>2m 14s</div></div>
                  <div><div style={{fontFamily:UB.mono,fontSize:9,letterSpacing:'0.18em',color:'#8A8990',marginBottom:4}}>PFLOPS</div><div style={{fontFamily:UB.mono,fontSize:18,fontWeight:500}}>412</div></div>
                </div>
                <div style={{ marginTop: 12 }}>
                  <div style={{fontFamily:UB.mono,fontSize:9,letterSpacing:'0.18em',color:'#8A8990',marginBottom:6}}>H100 · UTILIZATION 24H</div>
                  <MiniBars values={[0.8,0.9,0.85,0.95,1,0.92,0.88,0.94,0.97,1,0.99,0.93,0.91,0.95,0.99,1,0.97,0.94,0.92,0.96,0.98,0.95,0.93,0.92]} h={36} color={UB.accent} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

// Btn override accepting "dark" prop without re-exporting — wrap simply
window.ComputeDapp = ComputeDapp;