// ============================================================
// WC26 — Fixtures (ตารางแข่งจริงจาก wc_line_sweeps · 72+ นัด)
// ============================================================
function FixtureRow({ f, nav }) {
  const target = f.status === "live" ? "live" : f.status === "settled" ? "summary" : "prematch";
  const tracking = !!((WC.HEALTH || {}).conns || {})[f.id];
  return (
    <div className={"fixture-row clickable"} onClick={() => nav(target, f.id)}
         style={{ display: "grid", gridTemplateColumns: "70px minmax(220px, 1.6fr) 1fr 130px 110px", gap: 12, alignItems: "center", padding: "12px 16px", borderBottom: "1px solid var(--line)" }}>
      <div>
        <div className="bc-mono" style={{ fontSize: 13, fontWeight: 600 }}>{f.time}</div>
        <div style={{ fontSize: 10.5, color: "var(--ink-3)" }}>local</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
        <TeamBadge code={f.home} size={26} />
        <span className="bc-display" style={{ fontSize: 17, whiteSpace: "nowrap" }}>
          {(WC.TEAMS[f.home] || { name: f.home }).name}
          {f.score ? <span className="bc-mono" style={{ margin: "0 8px", fontSize: 14, background: "var(--chrome)", color: "#fff", padding: "2px 7px", borderRadius: 4 }}>{f.score[0]}–{f.score[1]}</span>
                   : <span style={{ color: "var(--ink-3)", margin: "0 8px", fontWeight: 600 }}>v</span>}
          {(WC.TEAMS[f.away] || { name: f.away }).name}
        </span>
        <TeamBadge code={f.away} size={26} />
        <span style={{ fontSize: 11, color: "var(--ink-3)", whiteSpace: "nowrap" }} className="fx-venue">
          {f.liq ? "liq " + fmtMoney(f.liq) : ""}
        </span>
      </div>
      <div style={{ display: "flex", gap: 5, justifyContent: "flex-start" }} className="fx-odds">
        {f.status === "settled" && f.report ? (
          <span className={"bc-num " + pnlClass(f.report.netPnl)} style={{ fontWeight: 600, fontSize: 14 }}>
            {fmtMoneyFull(f.report.netPnl, true)} · {f.report.rounds} rounds
          </span>
        ) : [["1", f.odds.home], ["X", f.odds.draw], ["2", f.odds.away]].map(([k, p]) => (
          <span key={k} className="bc-mono" style={{ fontSize: 12, padding: "4px 8px", background: "var(--panel-2)", border: "1px solid var(--line)", borderRadius: 5, whiteSpace: "nowrap" }}>
            <span style={{ color: "var(--ink-3)", marginRight: 4, fontFamily: "var(--display)", fontWeight: 700 }}>{k}</span>{fmtCents0(p)}
          </span>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        {tracking
          ? <span className="bc-chip green">● Recording</span>
          : <span className="bc-label" style={{ fontSize: 10.5 }}>{f.status === "settled" ? "done" : "sweep 1h"}</span>}
      </div>
      <div style={{ textAlign: "right" }}><StatusPill status={f.status} /></div>
    </div>
  );
}

function FixturesScreen({ nav }) {
  useStore();
  const FX = WC.FIXTURES || [];
  const byDate = [];
  FX.forEach((f) => {
    let g = byDate.find((x) => x.date === f.date);
    if (!g) { g = { date: f.date, items: [] }; byDate.push(g); }
    g.items.push(f);
  });
  const tracked = Object.keys((WC.HEALTH || {}).conns || {});
  const totalLiq = FX.reduce((s, f) => s + (f.liq || 0), 0);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <div className="panel" style={{ padding: "14px 18px", display: "flex", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
        <Stat label="Fixtures" value={FX.length} sub="from Polymarket · live data" />
        <Stat label="Recording now" value={tracked.length} sub="ใน window kickoff−36h → +4h" tone="up" />
        <Stat label="Total liquidity" value={fmtMoney(totalLiq)} sub="all match moneylines" />
        <div style={{ flex: 1 }}></div>
        <ThaiHint>arm/budget รายนัดจะเปิดใช้พร้อม wc-trader (Phase 1) · คลิกแถวเพื่อดู order book และราคา</ThaiHint>
      </div>
      {byDate.map((g) => (
        <div className="panel" key={g.date} style={{ overflow: "hidden" }}>
          <div className="panel-head" style={{ background: "var(--panel-2)" }}>
            <span className="panel-title">{g.date}</span>
            <span className="bc-chip">{g.items.length} matches</span>
          </div>
          <div>
            {g.items.map((f) => <FixtureRow key={f.id} f={f} nav={nav} />)}
          </div>
        </div>
      ))}
      {!FX.length ? <div className="panel"><Phase1Note>กำลังรอ sweep แรกจาก recorder…</Phase1Note></div> : null}
    </div>
  );
}

Object.assign(window, { FixturesScreen });