/* global React, ReactDOM, Sidebar, TopBar, Button, Ic, VS,
   LoginScreen, Dashboard, MeasurementsScreen, SessionDetailScreen,
   ComputersScreen, ChartsScreen, ConfigScreen */

function App() {
  const [authed, setAuthed] = React.useState(() => !!VS.getToken());
  const [screen, setScreen] = React.useState(() => localStorage.getItem("vib.screen") || "dashboard");
  const [session, setSession] = React.useState(null);
  const [dark, setDark] = React.useState(() => localStorage.getItem("vib.dark") === "1");
  const [collapsed, setCollapsed] = React.useState(false);

  React.useEffect(() => { localStorage.setItem("vib.screen", screen); }, [screen]);
  React.useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
    localStorage.setItem("vib.dark", dark ? "1" : "0");
  }, [dark]);

  React.useEffect(() => {
    const onLogout = () => { setAuthed(false); setSession(null); };
    window.addEventListener("vs:logout", onLogout);
    return () => window.removeEventListener("vs:logout", onLogout);
  }, []);

  if (!authed) {
    return <LoginScreen onLogin={() => setAuthed(true)} />;
  }

  const openSession = (machine_id, machine_name, session_date) => {
    setScreen("measurements");
    setSession({ machine_id, machine_name, session_date });
  };

  let content;
  let breadcrumb;

  if (screen === "dashboard") {
    content = <Dashboard onOpenRecent={(r) => openSession(r.machine_id, r.machine_name, r.session_date)} />;
    breadcrumb = <Crumb label="Dashboard" />;
  } else if (screen === "measurements" && session) {
    content = <SessionDetailScreen
      machineId={session.machine_id}
      machineName={session.machine_name}
      sessionDate={session.session_date}
      onBack={() => setSession(null)}
    />;
    breadcrumb = <Crumb label="Pomiary · szczegóły sesji" />;
  } else if (screen === "measurements") {
    content = <MeasurementsScreen
      onOpenSession={({ machine_id, machine_name, session_date }) => openSession(machine_id, machine_name, session_date)}
    />;
    breadcrumb = <Crumb label="Pomiary" />;
  } else if (screen === "computers") {
    content = <ComputersScreen />;
    breadcrumb = <Crumb label="Komputery" />;
  } else if (screen === "charts") {
    content = <ChartsScreen />;
    breadcrumb = <Crumb label="Wykresy" />;
  } else if (screen === "config") {
    content = <ConfigScreen />;
    breadcrumb = <Crumb label="Konfiguracja" />;
  } else {
    content = <div style={{ padding: 48, textAlign: "center", color: "var(--fg-muted)", fontSize: 13 }}>
      <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 500, color: "var(--fg)" }}>Nieznana sekcja</div>
      <div>Wybierz widok z lewej.</div>
    </div>;
    breadcrumb = <Crumb label={screen} />;
  }

  const rightActions = (
    <>
      <Button size="md" icon={dark ? <Ic.sun size={13} /> : <Ic.moon size={13} />} onClick={() => setDark(!dark)}>
        {dark ? "Light" : "Dark"}
      </Button>
      <Button size="md" variant="ghost" onClick={() => { VS.clearAuth(); setAuthed(false); }}>Wyloguj</Button>
    </>
  );

  return (
    <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
      <Sidebar
        screen={screen}
        setScreen={(s) => { setScreen(s); setSession(null); }}
        collapsed={collapsed}
      />
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
        <TopBar breadcrumb={breadcrumb} right={rightActions} />
        <div style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}>
          {content}
        </div>
      </div>
    </div>
  );
}

function Crumb({ label }) {
  return <span style={{ fontSize: 13, fontWeight: 500, letterSpacing: "-0.01em" }}>{label}</span>;
}

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