/* global React, window */
const { useState: useStateM } = React;

const MarketplaceView = () => {
  const [sel, setSel] = useStateM('SONLI');
  const cell = window.MARKET_CELLS.find(c => c.sym === sel);
  return (
    <>
      <div className="subbar">
        <div className="subbar__path">Secondary Registry <span className="sep">/</span> <span style={{fontWeight:400, color:'var(--text-2)'}}>{cell.sym} · {cell.name}</span></div>
        <div className="subbar__kpis">
          <Kpi label="Last" value={cell.last.toFixed(3)} delta={(cell.ch>=0?'+':'')+cell.ch.toFixed(3)} deltaKind={cell.ch>=0?'pos':'neg'} />
          <Kpi label="NAV" value={cell.nav.toFixed(3)} />
          <Kpi label="Spread" value={cell.spread+' bps'} />
          <Kpi label="24h Volume" value={cell.vol} />
        </div>
      </div>

      <div className="canvas">
        <div style={{display:'grid', gridTemplateColumns:'260px 1fr 320px', gap:16}}>
          <div className="card card--pad0">
            <div className="card__head card__head--sticky">
              <div className="card__title"><h3 className="h3">Listings</h3></div>
            </div>
            <div>
              {window.MARKET_CELLS.map(c => (
                <button key={c.sym} onClick={()=>setSel(c.sym)}
                  style={{display:'block', width:'100%', textAlign:'left', padding:'12px 16px',
                    borderBottom:'1px solid var(--border)',
                    background: sel===c.sym ? 'var(--bg-muted)' : 'transparent'}}>
                  <div className="row row--sb">
                    <span className="bold">{c.sym}</span>
                    <span className={`num text-sm ${c.ch>=0?'pos':'neg'}`}>{(c.ch>=0?'+':'')+(c.ch*100/c.last).toFixed(2)}%</span>
                  </div>
                  <div className="muted text-sm" style={{marginTop:2}}>{c.name}</div>
                  <div className="row row--sb" style={{marginTop:6}}>
                    <span className="mono text-sm muted">last {c.last.toFixed(3)}</span>
                    <span className="mono text-sm muted">vol {c.vol}</span>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <div className="stack">
            <div className="card">
              <CardHead title={`${cell.sym} · price history`} eyebrow="30 days · private AMM · Uniswap v4 hook" help />
              <PriceChart />
              <div className="row" style={{gap:6, marginTop:8, justifyContent:'flex-end'}}>
                {['1D','1W','1M','3M','YTD','All'].map((t,i)=>(
                  <button key={t} className={`btn btn--sm ${i===2?'':'btn--ghost'}`}>{t}</button>
                ))}
              </div>
            </div>

            <div className="grid grid--2">
              <div className="card">
                <CardHead title="Order book" eyebrow="Identity-gated" />
                <div className="book">
                  <div className="book__col">
                    <div className="book__row" style={{color:'var(--text-3)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>
                      <span>Price</span><span style={{textAlign:'right'}}>Size</span><span style={{textAlign:'right'}}>Total</span>
                    </div>
                    {window.ORDERBOOK.bids.map((r,i) => (
                      <div key={i} className="book__row book__row--bid">
                        <div className="fill" style={{width: (r.t/80000*100)+'%'}}/>
                        <span className="pos bold">{r.p.toFixed(3)}</span>
                        <span style={{textAlign:'right'}}>{fmtNum(r.s)}</span>
                        <span style={{textAlign:'right', color:'var(--text-3)'}}>{fmtNum(r.t)}</span>
                      </div>
                    ))}
                  </div>
                  <div className="book__col" style={{borderLeft:'1px solid var(--border)'}}>
                    <div className="book__row" style={{color:'var(--text-3)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>
                      <span>Price</span><span style={{textAlign:'right'}}>Size</span><span style={{textAlign:'right'}}>Total</span>
                    </div>
                    {window.ORDERBOOK.asks.map((r,i) => (
                      <div key={i} className="book__row book__row--ask">
                        <div className="fill" style={{width: (r.t/80000*100)+'%'}}/>
                        <span className="neg bold">{r.p.toFixed(3)}</span>
                        <span style={{textAlign:'right'}}>{fmtNum(r.s)}</span>
                        <span style={{textAlign:'right', color:'var(--text-3)'}}>{fmtNum(r.t)}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              <div className="card">
                <CardHead title="Recent fills" eyebrow="Cleared via compliance hook" />
                <table className="tbl">
                  <thead><tr><th>Time</th><th className="num">Price</th><th className="num">Size</th><th>Side</th></tr></thead>
                  <tbody>
                    {[
                      ['16:04:12', 1.205, 1800, 'buy'],
                      ['16:03:52', 1.204, 900,  'buy'],
                      ['16:03:21', 1.203, 3200, 'sell'],
                      ['16:02:48', 1.205, 1200, 'buy'],
                      ['16:02:01', 1.206, 700,  'buy'],
                      ['16:01:33', 1.203, 2400, 'sell'],
                    ].map((r,i) => (
                      <tr key={i}>
                        <td className="mono text-sm">{r[0]}</td>
                        <td className={`num ${r[3]==='buy'?'pos':'neg'}`}>{r[1].toFixed(3)}</td>
                        <td className="num">{fmtNum(r[2])}</td>
                        <td>{r[3]==='buy' ? <Pill kind="pos" dot>buy</Pill> : <Pill kind="neg" dot>sell</Pill>}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <div className="stack">
            <div className="card">
              <CardHead title="Place order" eyebrow="ERC-3643 settlement" />
              <div className="segmented" style={{marginBottom:12}}>
                <button aria-pressed="true" style={{color:'var(--pos)'}}>Buy</button>
                <button aria-pressed="false">Sell</button>
              </div>
              <div className="stack-sm">
                {[['Limit', '1.205'], ['Size', '10,000 tokens'], ['Total', '$12,050.00']].map(([k,v])=>(
                  <div key={k}>
                    <div className="eyebrow" style={{marginBottom:4}}>{k}</div>
                    <input defaultValue={v} className="mono" style={{width:'100%', padding:'10px 12px', borderRadius:6, border:'1px solid var(--border)', background:'var(--bg-muted)'}}/>
                  </div>
                ))}
              </div>
              <button className="btn btn--amber" style={{width:'100%', marginTop:14, height:38}}>Submit buy order</button>
              <div className="text-sm muted" style={{marginTop:8, textAlign:'center'}}>
                Identity check: <span className="pos bold">passes</span> · tier 3 qualified · MX·CO cleared
              </div>
            </div>
            <div className="card">
              <CardHead title="Compliance hook" eyebrow="Uniswap v4" />
              <div className="stack-sm" style={{fontSize:12}}>
                {[
                  ['Participant registry',   'Registered'],
                  ['Jurisdiction policy',    'Permitted'],
                  ['Holding-period lockup',  '0 days'],
                  ['Position limit',         '18.4% of NAV'],
                  ['Transfer tax',           '0 bps'],
                ].map(([k,v]) => (
                  <div key={k} className="row row--sb">
                    <span className="muted">{k}</span>
                    <span className="bold">{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const PriceChart = () => {
  const pts = [];
  let v = 1.18;
  for (let i = 0; i < 60; i++) {
    v += (Math.sin(i/4) + Math.cos(i/7)) * 0.005 + (Math.random()-0.5)*0.003;
    pts.push(v);
  }
  const w = 720, h = 220, pad = 24;
  const min = Math.min(...pts), max = Math.max(...pts);
  const d = pts.map((y,i) => {
    const px = pad + (i/(pts.length-1)) * (w - pad*2);
    const py = pad + (1 - (y-min)/(max-min)) * (h - pad*2);
    return (i===0 ? 'M' : 'L') + px.toFixed(1) + ' ' + py.toFixed(1);
  }).join(' ');
  const area = d + ` L ${w-pad} ${h-pad} L ${pad} ${h-pad} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{display:'block'}}>
      <defs>
        <linearGradient id="pr" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--amber)" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="var(--amber)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,0.25,0.5,0.75,1].map((p,i)=>(
        <line key={i} x1={pad} x2={w-pad} y1={pad + p*(h-pad*2)} y2={pad + p*(h-pad*2)}
              stroke="var(--border)" strokeDasharray="2 3"/>
      ))}
      <path d={area} fill="url(#pr)"/>
      <path d={d} fill="none" stroke="var(--amber)" strokeWidth="1.6"/>
      <line x1={pad} x2={w-pad} y1={pad + (1-(1.201-min)/(max-min))*(h-pad*2)} y2={pad + (1-(1.201-min)/(max-min))*(h-pad*2)}
            stroke="var(--viz-6)" strokeDasharray="4 4" opacity="0.7"/>
      <text x={w-pad-4} y={pad + (1-(1.201-min)/(max-min))*(h-pad*2) - 4} textAnchor="end"
            fontFamily="var(--font-mono)" fontSize="10" fill="var(--viz-6)">NAV 1.201</text>
    </svg>
  );
};

window.MarketplaceView = MarketplaceView;