/* TargiApp — root: routing logowanie → app, header, przełączanie widoków */
function Header({ view, setView, user }) {
  const store = useStore();
  return (
    <div className="hdr">
      <div className="hdr-top">
        <div className="brand">
          <div className="eps-mark">EPS</div>
          <div className="brand-name">Targi<span className="accent">App</span></div>
          <div className="brand-divider"></div>
          <div className="brand-tag">{store.state.fair.name}</div>
        </div>
        <div className="hdr-spacer"></div>
        <div className="hdr-user">
          <div className="user-block">
            <div className="user-name">{store.fullName(user)}</div>
            <div className="user-role">{user.isAdmin ? "Administrator" : "Pracownik"}</div>
          </div>
          <Avatar name={store.fullName(user)} size={38} />
          <button className="btn-logout" onClick={() => store.logout()}>Wyloguj</button>
        </div>
      </div>
      <div className="tabbar">
        <button className={"tab" + (view === "harmonogram" ? " active" : "")} onClick={() => setView("harmonogram")}>
          📅 Harmonogram
        </button>
        <button className={"tab" + (view === "opinie" ? " active" : "")} onClick={() => setView("opinie")}>
          💬 Opinie
        </button>
        {user.isAdmin ? (
          <button className={"tab" + (view === "uzytkownicy" ? " active" : "")} onClick={() => setView("uzytkownicy")}>
            👥 Użytkownicy <span className="pill">{store.state.people.length}</span>
          </button>
        ) : null}
      </div>
    </div>
  );
}

function App() {
  const store = useStore();
  const [view, setView] = useState("harmonogram");
  const user = store.currentUser();

  if (!user) return <LoginScreen />;

  if (store.state.ready === false) return (
    <div className="login-wrap"><div className="login-card" style={{ textAlign: "center", color: "var(--ink-2)" }}>Ładowanie danych…</div></div>
  );

  const activeView = view === "uzytkownicy" && !user.isAdmin ? "harmonogram" : view;

  return (
    <div className="app">
      <Header view={activeView} setView={setView} user={user} />
      <div className="page">
        {activeView === "uzytkownicy" ? <AdminPage /> : activeView === "opinie" ? <FeedbackPage /> : <SchedulePage />}
      </div>
    </div>
  );
}

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