import { lazy, Suspense, useEffect, useState } from "react";
import { connectEvents, get, setUnauthorizedHandler } from "./api";
import { useT } from "./i18n";
import { navigate, useRoute } from "./router";
import { applyEvent, loadSessions, resync, setState } from "./store";
import type { Info } from "./types";
import { Sidebar } from "./components/Sidebar";
import { Login } from "./components/Login";
import { ChatView } from "./components/ChatView";
import { NewSession } from "./components/NewSession";
import { Settings } from "./components/Settings";
import { Stats } from "./components/Stats";
import { Images } from "./components/Images";
import { Spinner, useTitleActivity } from "./components/Activity";

// The file manager (editor, git) is loaded on demand to keep the chat small.
const Files = lazy(() => import("./components/Files").then((m) => ({ default: m.Files })));

export function App() {
  const t = useT();
  const route = useRoute();
  const [info, setInfo] = useState<Info>();
  const [error, setError] = useState<string>();
  const [menuOpen, setMenuOpen] = useState(false);
  useTitleActivity();

  const refresh = async () => {
    try {
      const i = await get<Info>("/info");
      setState(() => ({ me: i.user }));
      if (i.user) await loadSessions();
      setInfo(i);
    } catch (e: any) {
      setError(e.message);
    }
  };

  useEffect(() => {
    setUnauthorizedHandler(() => setInfo((i) => (i ? { ...i, user: null } : i)));
    void refresh();
  }, []);

  const signedIn = !!info?.user;
  useEffect(() => {
    if (!signedIn) return;
    return connectEvents({
      onEvent: applyEvent,
      onOpen: () => {
        setState(() => ({ connected: true }));
        void resync().catch(() => undefined);
      },
      onClose: () => setState(() => ({ connected: false })),
    });
  }, [signedIn]);

  // Close the mobile menu on navigation.
  useEffect(() => setMenuOpen(false), [route.join("/")]);

  if (error) return <div className="empty">{error}</div>;
  if (!info) return <div className="empty">{t("common.loading")}</div>;
  if (!info.user) return <Login info={info} onSuccess={refresh} />;

  const [section, arg] = route;
  let content;
  if (section === "s" && arg) content = <ChatView key={arg} sessionId={arg} onMenu={() => setMenuOpen(true)} />;
  else if (section === "settings") content = <Settings tab={arg} onMenu={() => setMenuOpen(true)} />;
  else if (section === "stats") content = <Stats onMenu={() => setMenuOpen(true)} />;
  else if (section === "images") content = <Images onMenu={() => setMenuOpen(true)} />;
  else if (section === "files")
    content = (
      <Suspense fallback={<div className="empty"><Spinner /></div>}>
        <Files onMenu={() => setMenuOpen(true)} />
      </Suspense>
    );
  else content = <NewSession onMenu={() => setMenuOpen(true)} onCreated={(id) => navigate(`/s/${id}`)} />;

  return (
    <div className="app">
      {menuOpen && <div className="backdrop" onClick={() => setMenuOpen(false)} />}
      <Sidebar open={menuOpen} activeId={section === "s" ? arg : undefined} section={section ?? ""} />
      <main className="main">{content}</main>
    </div>
  );
}