import { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './styles/fonts.css';
import './styles/tokens.css';
import './styles/app.css';
import './styles/landing.css';
import { ThemeProvider } from './theme/ThemeProvider';
import { I18nProvider } from './i18n/I18nProvider';
import { Landing } from './Landing';
import { Workspace } from './App';
import { Admin } from './Admin';
import { ProfilePage } from './ProfilePage';
import { PhotosPage } from './PhotosPage';
import { Library } from './Library';
import { scanSession } from './engine/library';
import { go } from './nav';
import { InstallPrompt } from './ui/InstallPrompt';
import { OfflineBar } from './ui/OfflineBar';
import { installTracking } from './track';

// Six routes, no router: the landing page, the workspace, the strip moderation
// screen, the member's own profile, the member's photo folder and the local
// catalogue of folders on the visitor's own disk. nginx serves index.html for
// all of them (SPA fallback), so this is a pathname check.
function pick(route: string) {
  return route.startsWith('/app') ? (
    <Workspace />
  ) : route.startsWith('/admin') ? (
    <Admin />
  ) : route.startsWith('/photos') ? (
    <PhotosPage />
  ) : route.startsWith('/library') ? (
    <Library />
  ) : route.startsWith('/profile') ? (
    <ProfilePage />
  ) : (
    <Landing />
  );
}

function Shell() {
  const [route, setRoute] = useState(() => window.location.pathname + window.location.search);

  useEffect(() => {
    const onClick = (e: MouseEvent) => {
      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
      const target = e.target as Element | null;
      const link = target?.closest?.('a');
      if (!(link instanceof HTMLAnchorElement)) return;
      if (link.target || link.hasAttribute('download')) return;
      const url = new URL(link.href, window.location.href);
      const here = window.location.pathname + window.location.search;
      if (url.origin !== window.location.origin || url.hash) return;
      if (url.pathname + url.search === here) return;
      e.preventDefault();
      go(url.pathname + url.search);
    };
    const onPop = () => setRoute(window.location.pathname + window.location.search);
    document.addEventListener('click', onClick);
    window.addEventListener('popstate', onPop);
    return () => {
      document.removeEventListener('click', onClick);
      window.removeEventListener('popstate', onPop);
    };
  }, []);

  const isApp = route.startsWith('/app');
  const isLibrary = route.startsWith('/library');
  const isOther = !isApp && !isLibrary;

  return (
    <>
      <div style={{ display: isApp ? 'block' : 'none', height: '100%' }}>
        <Workspace />
      </div>
      <div style={{ display: isLibrary ? 'block' : 'none', height: '100%' }}>
        <Library />
      </div>
      {isOther ? (
        route.startsWith('/admin') ? (
          <Admin />
        ) : route.startsWith('/photos') ? (
          <PhotosPage />
        ) : route.startsWith('/profile') ? (
          <ProfilePage />
        ) : (
          <Landing />
        )
      ) : null}
    </>
  );
}

const root = document.getElementById('root');
if (!root) throw new Error('#root missing');

// The traffic counter records this page and then any click on a `data-key`
// control, for the life of the page.
installTracking();

// No StrictMode: it double-invokes effects, which would load CanvasKit twice and
// run the render pipeline twice on every mount. The install offer hangs off the
// i18n provider because its copy comes from the dictionaries.
createRoot(root).render(
  <ThemeProvider>
    <I18nProvider>
      <Shell />
      <InstallPrompt />
      <OfflineBar />
    </I18nProvider>
  </ThemeProvider>
);

// Service worker, production only: in dev it would answer the browser with the
// last build's shell instead of vite's modules. Registered after `load` so its
// precache does not race the studio's own 20MB of wasm for the connection, and a
// browser that refuses it (private mode, a plain-http origin) just loses the
// offline shell — nothing else depends on it.
if (import.meta.env.PROD && 'serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').catch(() => {});
  });
}