// app.jsx — Root: tabs + view switch
function App() {
  const { state, setActiveTab } = useStore();
  const { activeTab } = state;

  return (
    <div className="app">
      <TopBar activeTab={activeTab} onTab={setActiveTab} />
      <main className="app-main">
        {activeTab === "setup" ? <SetupView /> : <PlannerView />}
      </main>
    </div>
  );
}

function TopBar({ activeTab, onTab }) {
  const { state } = useStore();
  const { match, players, formation } = state;
  const canPlan = match.homeTeam && players.length > 0 && formation.length > 0;
  return (
    <header className="topbar">
      <div className="brand">
        <div className="brand-mark">
          <span className="bm-1" />
          <span className="bm-2" />
        </div>
        <div className="brand-text">
          <div className="brand-title">WISSEL<span className="brand-dim">PLANNER</span></div>
        </div>
      </div>
      <nav className="tabs" role="tablist">
        <button
          role="tab"
          aria-selected={activeTab === "setup"}
          className={"tab " + (activeTab === "setup" ? "on" : "")}
          onClick={() => onTab("setup")}
        >
          Planner
        </button>
        <button
          role="tab"
          aria-selected={activeTab === "planner"}
          className={"tab " + (activeTab === "planner" ? "on" : "") + (!canPlan ? " disabled" : "")}
          onClick={() => canPlan && onTab("planner")}
          disabled={!canPlan}
        >
          Gameplan
        </button>
      </nav>
      <div className="top-actions">
        {activeTab === "planner" && canPlan && <ShareImageButton />}
      </div>
    </header>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <StoreProvider>
    <App />
  </StoreProvider>
);