/* eslint-disable */
// Scoreboard hero — the 4-cell live-state banner.

function WrScoreboard({ realized = 317, liveTotal, drivers }) {
  const bar = 67, totalBars = 80, lap = 142;
  const fleetNet = "+5", longCnt = 4, shortCnt = 1, flatCnt = 3;
  const live = Math.round(liveTotal == null ? realized : liveTotal);
  const liveCls = live >= 0 ? "wr-sb__v--g" : "wr-sb__v--r";
  const liveSign = live >= 0 ? "+" : "";

  return (
    <section className="wr-sb" data-screen-label="WR Scoreboard">
      <div className="wr-sb__grid">
        <div className="wr-sb__cell wr-sb__cell--hero">
          <div>
            <div className="wr-sb__stamp">▎ Live · 5m bar {bar} / {totalBars} · Lap {lap}</div>
            <div className="wr-sb__heading" style={{ marginTop: 14 }}>
              Eight drivers,<br/><em>one paddock.</em>
            </div>
            <div className="wr-sb__desc" style={{ marginTop: 10 }}>
              Every 5 minutes we settle one K-bar. Eight algorithmic drivers enter,
              exit, and book points in public. Tap any card for that driver's private war room.
            </div>
          </div>
          <div>
            <div className="wr-sb__lbl">▎ 即時損益 · Fleet live PnL <span className="tag tag--live">live</span></div>
            <div style={{ display: "flex", gap: 18, alignItems: "baseline" }}>
              <span className={"wr-sb__v " + liveCls} style={{ fontSize: 48, fontVariantNumeric: "tabular-nums" }}>
                {liveSign}{live}<sup className={live >= 0 ? "g" : "g"} style={{ color: live >= 0 ? "var(--nx-green)" : "var(--nx-red)" }}>pt</sup>
              </span>
              <span style={{
                fontFamily: "var(--nx-font-mono)", fontSize: 10,
                color: "var(--nx-muted)", letterSpacing: ".14em", textTransform: "uppercase",
              }}>realized <b style={{ color: "var(--nx-ink-2)", fontWeight: 700 }}>+{realized}</b> · unreal incl.</span>
            </div>
            <div className="wr-sb__sub">
              Realized + Unrealized · {drivers.length} drivers · updated every tick
            </div>
          </div>
        </div>

        <div className="wr-sb__cell">
          <div className="wr-sb__lbl">▎ Reference price <span className="tag tag--live">tick</span></div>
          <div className="wr-sb__v wr-sb__v--amb">22,418<sup>+184</sup></div>
          <div className="wr-sb__sub">TXFEAH7 · 5m bar forming · vol <b>12,847</b></div>
        </div>

        <div className="wr-sb__cell">
          <div className="wr-sb__lbl">▎ Fleet position <span className="wr-sb__lbl tag" style={{ background:"var(--nx-bg-3)", color:"var(--nx-ink-2)", marginBottom:0, padding:"2px 6px", fontSize:9 }}>live</span></div>
          <div className="wr-sb__v wr-sb__v--g">{fleetNet} <sup className="g">LONG</sup></div>
          <div className="wr-sb__sub">net of {drivers.length} drivers · {longCnt} long · {shortCnt} short · {flatCnt} flat</div>
        </div>

        <div className="wr-sb__cell">
          <div className="wr-sb__lbl">▎ Session P&amp;L <span className="wr-sb__lbl tag" style={{ background:"var(--nx-bg-3)", color:"var(--nx-ink-2)", marginBottom:0, padding:"2px 6px", fontSize:9 }}>since 08:45</span></div>
          <div className="wr-sb__v wr-sb__v--g">+1.84<sup className="g" style={{ fontSize: 18 }}>%</sup></div>
          <div className="wr-sb__sub">24 trades · 17W / 7L · combined points only</div>
        </div>
      </div>
    </section>
  );
}

function WrSyncBar({ progress = 42, nextBar = "14:35:00", nextIn = "04:18" }) {
  return (
    <section className="wr-sync" data-screen-label="WR Sync">
      <span className="wr-sync__lab">5-min sync</span>
      <span className="wr-sync__meta">bar #67 of 80</span>
      <div className="wr-sync__bar"><i style={{ width: progress + "%" }}/></div>
      <span className="wr-sync__nxt">next close <b>{nextBar}</b> · in <b>{nextIn}</b></span>
    </section>
  );
}

window.WrScoreboard = WrScoreboard;
window.WrSyncBar    = WrSyncBar;