// ============================================================
// WC26 — app shell + nav (live Firestore edition)
// ============================================================
const NAV_KEY = "wc26_nav_v1";
const SCREENS = [
  ["dashboard", "Dashboard"],
  ["fixtures", "Fixtures"],
  ["prematch", "Pre-match"],
  ["live", "Live"],
  ["summary", "Summary"],
];

function useTheme() {
  const [dark, setDark] = React.useState(() => document.documentElement.classList.contains("dark"));
  const toggle = () => {
    const next = !document.documentElement.classList.contains("dark");
    document.documentElement.classList.toggle("dark", next);
    try { localStorage.setItem("wc26_theme", next ? "dark" : "light"); } catch (e) {}
    setDark(next);
  };
  return [dark, toggle];
}

function App() {
  useStore();
  const [dark, toggleTheme] = useTheme();
  const [route, setRoute] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(NAV_KEY)) || { screen: "dashboard", fid: null }; }
    catch (e) { return { screen: "dashboard", fid: null }; }
  });
  const nav = (screen, fid) => {
    const r = { screen, fid: fid || null };
    setRoute(r);
    localStorage.setItem(NAV_KEY, JSON.stringify(r));
    window.scrollTo(0, 0);
  };

  // bot mode: until wc-trader exists, derive from controls + recorder health
  const c = WC.CONTROLS || {};
  const botMode = c.killSwitch ? "killed" : (c.mode === "paused" ? "paused" : "recording");

  const screen = route.screen;
  return (
    <div>
      <header style={{ background: "var(--chrome)", color: "#fff", position: "sticky", top: 0, zIndex: 50, boxShadow: "0 2px 12px rgba(0,0,0,.18)" }}>
        <div style={{ maxWidth: 1440, margin: "0 auto", padding: "0 24px", display: "flex", alignItems: "stretch", height: 56, gap: 8 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginRight: 12 }}>
            <img src="/favicon.svg" alt="" width="30" height="30" style={{ flex: "none", display: "block" }} />
            <span className="bc-display" style={{ fontSize: 19, whiteSpace: "nowrap" }}>WC26 <span style={{ color: "var(--pitch)" }}>Bot Trader</span></span>
          </div>
          <nav style={{ display: "flex", alignItems: "stretch", overflowX: "auto" }} className="hide-scroll">
            {SCREENS.map(([id, label]) => (
              <button key={id} className={"nav-tab " + (screen === id ? "active" : "")}
                      onClick={() => nav(id, id === "live" ? null : route.fid)}>
                {label}
                {id === "live" && (WC.FIXTURES || []).some((f) => f.status === "live")
                  ? <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 99, background: "var(--hot)", marginLeft: 6, verticalAlign: "middle" }}></span> : null}
              </button>
            ))}
          </nav>
          <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }} className="header-status">
            <button onClick={toggleTheme} title={dark ? "Light mode" : "Dark mode"} aria-label="toggle dark mode"
                    style={{ background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.2)",
                             borderRadius: 6, color: "#fff", cursor: "pointer", fontSize: 14,
                             padding: "4px 9px", lineHeight: 1, transition: "background .12s ease" }}>
              {dark ? "☀️" : "🌙"}
            </button>
            <span className="bc-label" style={{ color: "rgba(255,255,255,.55)", fontSize: 10.5 }}>Mode</span>
            <span className={"bc-chip " + (botMode === "recording" ? "blue" : botMode === "paused" ? "gold" : "live")}>
              {botMode === "recording" ? "Recording" : botMode === "paused" ? "Paused" : "Killed"}
            </span>
            {Auth.user ? (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span className="bc-chip green">{Auth.isOwner ? "👑 " : ""}{Auth.name || "tg"}</span>
                <button className="btn btn-ghost btn-sm" style={{ padding: "3px 8px", fontSize: 10.5 }}
                        onClick={() => signOutTg()}>ออก</button>
              </span>
            ) : null}
          </div>
        </div>
      </header>

      <main className="app-shell">
        {screen === "dashboard" ? <DashboardScreen nav={nav} botMode={botMode} /> : null}
        {screen === "fixtures" ? <FixturesScreen nav={nav} /> : null}
        {screen === "prematch" ? <PrematchScreen nav={nav} fixtureId={route.fid} /> : null}
        {screen === "live" ? <LiveScreen nav={nav} fixtureId={route.fid} /> : null}
        {screen === "summary" ? <SummaryScreen nav={nav} fixtureId={route.fid} /> : null}
      </main>

      {/* Ticker ปิดไว้ตามคำขอ (ลายตา) — เปิดคืนได้โดยใส่ <Ticker /> กลับ */}
    </div>
  );
}

// ---------- Telegram login screen ----------
function LoginScreen() {
  useStore();
  const [, force] = React.useState(0);
  const ref = React.useRef(null);
  const botName = (WC.CONTROLS || {}).tgBotName;
  React.useEffect(() => {
    if (!botName || !ref.current) return;
    ref.current.innerHTML = "";
    const s = document.createElement("script");
    s.src = "https://telegram.org/js/telegram-widget.js?22";
    s.setAttribute("data-telegram-login", botName);
    s.setAttribute("data-size", "large");
    s.setAttribute("data-onauth", "onTelegramAuth(user)");
    s.setAttribute("data-request-access", "write");
    s.async = true;
    ref.current.appendChild(s);
  }, [botName]);
  return (
    <div style={{ minHeight: "70vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div className="panel" style={{ maxWidth: 420, width: "100%", padding: 28, textAlign: "center" }}>
        <img src="/favicon.svg" alt="" width="56" height="56" style={{ margin: "0 auto 12px", display: "block" }} />
        <div className="bc-display" style={{ fontSize: 26, marginBottom: 4 }}>WC26 <span style={{ color: "var(--pitch)" }}>Bot Trader</span></div>
        <ThaiHint>เข้าสู่ระบบด้วย Telegram — ปุ่มควบคุม bot (kill switch · budget) เปิดเฉพาะบัญชีที่ allowlist ไว้</ThaiHint>
        <div style={{ margin: "18px 0", display: "flex", justifyContent: "center" }}>
          {botName
            ? <div ref={ref}></div>
            : <span className="bc-chip gold">รอตั้งค่า Telegram bot (ดูขั้นตอนจาก Claude)</span>}
        </div>
        {Auth.error ? <div style={{ color: "var(--hot)", fontSize: 12.5, marginBottom: 12 }}>{Auth.error}</div> : null}
        <button className="btn btn-ghost btn-sm" onClick={() => { if (checkGate()) force((v) => v + 1); }}>
          เข้าแบบดูอย่างเดียว (passphrase)
        </button>
      </div>
    </div>
  );
}

function Root() {
  useStore();
  if (!Auth.ready) {
    return <div style={{ padding: 80, textAlign: "center", color: "var(--ink-3)", fontFamily: "var(--display)", letterSpacing: ".1em" }}>LOADING…</div>;
  }
  if (Auth.user || gateOk()) return <App />;
  return <LoginScreen />;
}

startSubscriptions();
ReactDOM.createRoot(document.getElementById("root")).render(<Root />);