/* eslint-disable */
// Driver tile + grid.

function WrDriverTile({ driver, liveDelta = 0, onClick }) {
  const d = driver;
  const textOnBg = (d.color === "#FF6B9D" || d.color === "#5B8FFF" || d.color === "#B388FF") ? "#fff" : "#000";
  const realCls = d.realized.startsWith("+") ? "" : "r";
  const realDisp = d.realized === "+0" ? "BETA" : d.realized + " pt";
  const unrealCls = d.unreal === "—" ? "" : (d.unreal.startsWith("+") ? "g" : "r");

  // Live PnL = base (realized + unreal) + jittering delta.
  const base = window.basePnl(d);
  const live = base + liveDelta;
  const liveCls = d.realized === "+0" && d.unreal === "—" ? "b" : (live >= 0 ? "" : "r");
  const liveDisp = d.realized === "+0" && d.unreal === "—" ? "BETA" : window.fmtPt(live);

  return (
    <div className="wr-tile" onClick={onClick}>
      <div className="wr-tile__top">
        <div className="wr-tile__left">
          <span className="wr-tile__id" style={{ background: d.color, color: textOnBg }}>{d.code}</span>
          <div className="wr-tile__nm">
            {d.name}
            <span className="sub">№ 0{d.no} · {d.est}</span>
          </div>
        </div>
        <span className={"wr-tile__stat wr-tile__stat--" + d.side}>{window.WR_SIDE_LABEL[d.side]}</span>
      </div>
      <div className="wr-tile__desc">{d.desc}</div>
      <div className="wr-tile__mid">
        <div><div className="l">Entry</div><div className="v">{d.entry}</div></div>
        <div><div className="l">Unreal</div><div className={"v " + unrealCls}>{d.unreal}</div></div>
      </div>
      <div className="wr-tile__live">
        <span className="l">▎ 即時損益 · Live</span>
        <span className={"v " + liveCls}>{liveDisp}</span>
      </div>
      <div className="wr-tile__scored">
        <span className="l">▎ Today realized</span>
        <span className={"v " + (d.realized === "+0" ? "beta" : realCls)}>{realDisp}</span>
      </div>
      <div className="wr-tile__hint">▸ Open war room</div>
    </div>
  );
}

function WrDriverGrid({ drivers, liveDeltas, onPick }) {
  return (
    <section className="wr-tiles" data-screen-label="WR Driver Tiles">
      {drivers.map(d => (
        <WrDriverTile key={d.code} driver={d}
                      liveDelta={(liveDeltas && liveDeltas[d.code]) || 0}
                      onClick={() => onPick && onPick(d)}/>
      ))}
    </section>
  );
}

window.WrDriverTile = WrDriverTile;
window.WrDriverGrid = WrDriverGrid;