/* TTS Forum — app shell with two tabs: Q&A and Community Board. */
const { Logo, Button, Input } = window.TTSTechnicalTradeSchoolDesignSystem_281306;

function ForumApp() {
  const mobile = useForumMobile();
  const [tab, setTab] = React.useState("qa");           // "qa" | "board"
  const [qaRoute, setQaRoute] = React.useState("home");  // home | question | ask
  const [qid, setQid] = React.useState(null);
  const [activeCat, setActiveCat] = React.useState("all");
  const [bRoute, setBRoute] = React.useState("boards");  // boards | board | thread | newthread
  const [boardId, setBoardId] = React.useState(null);
  const [tid, setTid] = React.useState(null);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  // Q&A nav
  const goQa = (r, id) => { setQaRoute(r); if (id != null) setQid(id); window.scrollTo(0, 0); };
  // Board nav
  const goB = (r, id) => {
    setBRoute(r);
    if (r === "board") setBoardId(id);
    if (r === "thread") setTid(id);
    window.scrollTo(0, 0);
  };

  const switchTab = (t) => { setTab(t); window.scrollTo(0, 0); };

  let view;
  if (tab === "qa") {
    if (qaRoute === "question") view = <QuestionView go={goQa} qid={qid} mobile={mobile} />;
    else if (qaRoute === "ask") view = <AskForm go={goQa} mobile={mobile} />;
    else view = <ForumHome go={goQa} mobile={mobile} activeCat={activeCat} setActiveCat={setActiveCat} />;
  } else {
    if (bRoute === "board") view = <BoardThreads go={goB} boardId={boardId} mobile={mobile} />;
    else if (bRoute === "thread") view = <ThreadView go={goB} tid={tid} mobile={mobile} />;
    else if (bRoute === "newthread") view = <NewThread go={goB} mobile={mobile} />;
    else view = <BoardIndex go={goB} mobile={mobile} />;
  }

  const showHero = (tab === "qa" && qaRoute === "home") || (tab === "board" && bRoute === "boards");
  const tabBtn = (id, label, icon) => {
    const on = tab === id;
    return (
      <button onClick={() => switchTab(id)} style={{
        display: "inline-flex", alignItems: "center", gap: 8, border: "none", background: "transparent", cursor: "pointer",
        padding: "0 4px", height: 46, color: on ? "var(--text-primary)" : "var(--text-secondary)",
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 700,
        borderBottom: on ? "2px solid var(--color-ember-500)" : "2px solid transparent",
      }}>
        <FIcon name={icon} size={16} color={on ? "var(--color-ember-500)" : "currentColor"} />{label}
      </button>
    );
  };

  return (
    <div style={{ minHeight: "100vh", background: "var(--bg-page)" }}>
      <header style={{ position: "sticky", top: 0, zIndex: 40, background: "rgba(250,248,243,0.92)", backdropFilter: "blur(10px)", borderBottom: "1px solid var(--color-line)" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 20px", height: 64, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14 }}>
          <a href="../marketing/index.html" title="TTS home" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
            <Logo size={30} assetBase="../../assets" />
            {!mobile && <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-ember-600)", borderLeft: "1px solid var(--color-line)", paddingLeft: 12 }}>Forum</span>}
          </a>
          {!mobile && (
            <div style={{ flex: 1, maxWidth: 380, margin: "0 24px" }}>
              <Input placeholder={tab === "qa" ? "Search questions…" : "Search the board…"} leftIcon={<FIcon name="search" size={18} />} />
            </div>
          )}
          <Button size="sm" onClick={() => (tab === "qa" ? goQa("ask") : goB("newthread"))} leftIcon={<FIcon name="plus" size={16} />}>
            {mobile ? (tab === "qa" ? "Ask" : "Post") : (tab === "qa" ? "Ask a question" : "New thread")}
          </Button>
        </div>
        {/* tab bar */}
        <div style={{ borderTop: "1px solid var(--color-line)" }}>
          <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 20px", display: "flex", gap: 22 }}>
            {tabBtn("qa", "Q&A", "help-circle")}
            {tabBtn("board", "Community Board", "messages-square")}
          </div>
        </div>
      </header>

      {showHero && (
        <div className="tts-blueprint" style={{ background: "var(--color-ink)", color: "#fff" }}>
          <div style={{ maxWidth: 1180, margin: "0 auto", padding: mobile ? "26px 16px" : "36px 20px" }}>
            <span className="tts-kicker" style={{ color: "var(--color-ember-400)" }}>{tab === "qa" ? "Technical forum · Q&A" : "Technical forum · Community board"}</span>
            <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 26 : 38, letterSpacing: "-0.02em", color: "#fff", margin: "12px 0 6px", maxWidth: 680 }}>
              {tab === "qa" ? "Ask the trade. Answer the trade." : "The trade help board."}
            </h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: mobile ? 14 : 16, color: "var(--color-mist)", margin: "0 0 22px", maxWidth: 560, lineHeight: 1.55 }}>
              {tab === "qa"
                ? "Focused questions with a best answer — answered by peers and TTS instructors."
                : "Open discussion by trade — general talk, tools, job-site stories, and code. Built by trade pros, for new learners."}
            </p>
            <div style={{ display: "flex", gap: mobile ? 22 : 48, flexWrap: "wrap" }}>
              {(tab === "qa"
                ? [["questions", "Questions"], ["answers", "Answers"], ["solved", "Solved"], ["members", "Members"]]
                : [["threads", "Threads"], ["posts", "Posts"], ["online", "Online now"], ["members", "Members"]]
              ).map(([k, l]) => {
                const src = tab === "qa" ? window.TTS_FORUM.stats : window.TTS_BOARD.stats;
                return (
                  <div key={k}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: mobile ? 22 : 28, color: "#fff", lineHeight: 1 }}>{src[k]}</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--color-mist)", marginTop: 6 }}>{l}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {view}
    </div>
  );
}

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