/* eslint-disable */
// Trade log — streaming list of trades from all drivers with code filter.

function WrTradeLog({ drivers }) {
  const [filter, setFilter] = React.useState("all");

  // Flatten + sort by time desc.
  const trades = [];
  for (const d of drivers) for (const t of d.trades) trades.push({ d, t });
  trades.sort((a, b) => b.t[0].localeCompare(a.t[0]));

  return (
    <section className="wr-panel" data-screen-label="WR Trade Log">
      <div className="wr-panel__head">
        <div className="wr-panel__t">Trade <em>log</em> · per 5m bar</div>
        <div className="wr-panel__meta">
          <div className="wr-filter">
            <button className={filter === "all" ? "on" : ""} onClick={() => setFilter("all")}>ALL</button>
            {drivers.map(d => (
              <button key={d.code}
                      className={filter === d.code ? "on" : ""}
                      onClick={() => setFilter(d.code)}
                      style={filter === d.code ? { background: d.color, borderColor: d.color, color: "#000" } : {}}>
                {d.code}
              </button>
            ))}
          </div>
          <span className="wr-panel__live">streaming</span>
        </div>
      </div>
      <div className="wr-trades-wrap">
        {trades.filter(({ d }) => filter === "all" || filter === d.code).map(({ d, t }, i) => (
          <TradeRow key={d.code + i} d={d} t={t}/>
        ))}
      </div>
    </section>
  );
}

function TradeRow({ d, t }) {
  const [time, verb, px, pts, type, why] = t;
  let verbClass = "";
  if (type === "open")  verbClass = "in";
  if (type === "win")   verbClass = "out";
  if (type === "lose")  verbClass = "stop";
  if (type === "watch") verbClass = "watch";
  if (type === "hold")  verbClass = "hold";
  if (type === "flat")  verbClass = "flat";
  if (type === "pit")   verbClass = "pit";

  let ptsCls = "", ptsDisp = pts;
  if (type === "open")        { ptsCls = "open"; ptsDisp = "—"; }
  else if (type === "pit")    { ptsCls = "open"; ptsDisp = "—"; }
  else if (type === "flat")   { ptsCls = "open"; ptsDisp = "—"; }
  else if (type === "lose")   { ptsCls = "r";    ptsDisp = pts + " pt"; }
  else if (type === "win")    { ptsDisp = pts + " pt"; }
  else if (type === "watch")  { ptsCls = "open"; ptsDisp = "—"; }
  else if (type === "hold")   { ptsCls = "hold"; ptsDisp = "—"; }
  else                        { ptsCls = "open"; ptsDisp = "(CLOSED)"; }

  // Trailing cyan icon — restates the row's state in iconic form.
  let icon = "", iconCls = "";
  if (type === "pit")   { icon = "◆ 進站換胎"; }
  else if (type === "watch") { icon = "⌛ 觀察中"; }
  else if (type === "hold")  { icon = "◆ 持倉"; iconCls = "dim"; }
  else if (type === "flat")  { icon = "— 不進場"; iconCls = "muted"; }
  else if (type === "open")  { icon = "▸ 進場"; }

  return (
    <div className={"wr-trade " + (type === "hold" ? "hold" : "")}>
      <span className="wr-trade__t">{time}</span>
      <span className="wr-trade__who" style={{ background: d.color, color: (d.color === "#FF6B9D" || d.color === "#5B8FFF" || d.color === "#B388FF") ? "#fff" : "#000" }}>{d.code}</span>
      <span className={"wr-trade__verb " + verbClass}>{verb}</span>
      <span className="wr-trade__why">{why}</span>
      <span className="wr-trade__px">{px}</span>
      <span className={"wr-trade__pts " + ptsCls}>{ptsDisp}</span>
      <span className={"wr-trade__icon " + iconCls}>{icon}</span>
    </div>
  );
}

window.WrTradeLog = WrTradeLog;