import { lazy, Suspense } from 'react';
import { Link, Route, Routes, useLocation } from 'react-router-dom';
import SearchPage from './pages/SearchPage';
import ModPage from './pages/ModPage';
import ModHeader from './components/ModHeader';

// The full-setup view and the bgm/tabletop pages pull in the whole three.js
// stack (Scene + all mesh viewers + @tts/tabletop). Lazy-load them so that
// stack stays code-split out of the main bundle and is only fetched when one
// of those routes is actually visited.
const FullSetupPage = lazy(() => import('./pages/FullSetupPage'));
const BgmPage = lazy(() => import('./pages/BgmPage'));
const BgmPackagePage = lazy(() => import('./pages/BgmPackagePage'));
const PartsPage = lazy(() => import('./pages/PartsPage'));
const PartPage = lazy(() => import('./pages/PartPage'));
const SurfacesPage = lazy(() => import('./pages/SurfacesPage'));
const SurfacePage = lazy(() => import('./pages/SurfacePage'));
const SetupsPage = lazy(() => import('./pages/SetupsPage'));
const SetupPage = lazy(() => import('./pages/SetupPage'));

export default function App() {
  const pathname = useLocation().pathname;
  const isModRoute = pathname.startsWith('/mod/');
  // The inspector view is full-bleed/viewport-height; the setup sub-route keeps the standard centered layout.
  const isModView = /^\/mod\/[^/]+$/.test(pathname);

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      {/* For the mod route the layout is full-bleed and fills the viewport so
          the sidebar can scroll independently and the viewer gets all the space. */}
      <div className={"flex min-h-screen flex-col " + (isModView ? "h-screen" : "")}>
        <header className={"border-b border-zinc-800 " + (isModRoute ? "shrink-0" : "")}>
        {isModRoute ? (
          <ModHeader />
        ) : (
          <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
            <Link to="/" className="text-lg font-semibold tracking-tight">
              TTS Workshop
            </Link>
            <nav className="flex gap-4 text-sm text-zinc-400">
              <Link to="/" className="hover:text-zinc-100">
                Search
              </Link>
              <Link to="/bgm" className="hover:text-zinc-100">
                BGM
              </Link>
            </nav>
          </div>
        )}
      </header>
      <main className={(isModView ? "min-h-0 flex-1" : "mx-auto max-w-5xl px-4 py-8")}>
        <Routes>
          <Route path="/" element={<SearchPage />} />
          <Route path="/mod/:id" element={<ModPage />} />
          <Route
            path="/mod/:id/setup"
            element={
              <Suspense fallback={<p className="text-sm text-zinc-400">Loading full setup…</p>}>
                <FullSetupPage />
              </Suspense>
            }
          />
          <Route path="/bgm" element={<Suspense fallback={null}><BgmPage /></Suspense>} />
          <Route path="/bgm/:id" element={<Suspense fallback={null}><BgmPackagePage /></Suspense>} />
          <Route path="/bgm/:id/parts" element={<Suspense fallback={null}><PartsPage /></Suspense>} />
          <Route path="/bgm/:id/parts/:type/:part" element={<Suspense fallback={null}><PartPage /></Suspense>} />
          <Route path="/bgm/:id/surfaces" element={<Suspense fallback={null}><SurfacesPage /></Suspense>} />
          <Route path="/bgm/:id/surfaces/:type/:surface" element={<Suspense fallback={null}><SurfacePage /></Suspense>} />
          <Route path="/bgm/:id/setups" element={<Suspense fallback={null}><SetupsPage /></Suspense>} />
          <Route path="/bgm/:id/setups/:type/:setup" element={<Suspense fallback={null}><SetupPage /></Suspense>} />
        </Routes>
      </main>
      </div>
    </div>
  );
}