import { Switch, Route, Router as WouterRouter } from "wouter";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import Landing from "@/pages/Landing";
import UseCases from "@/pages/UseCases";
import Demo from "@/pages/Demo";
import L1ght from "@/pages/L1ght";
import NotFound from "@/pages/not-found";
import { useEffect, useLayoutEffect } from "react";
import { useLocation } from "wouter";
import { AnimatePresence, motion, MotionConfig } from "framer-motion";

const queryClient = new QueryClient();

function ScrollToTop() {
  const [location] = useLocation();

  useLayoutEffect(() => {
    // Force a hard scroll reset on route changes so navigation between
    // long landing sections and internal pages never lands mid-page.
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    window.scrollTo(0, 0);

    const raf = requestAnimationFrame(() => {
      window.scrollTo(0, 0);
    });

    return () => cancelAnimationFrame(raf);
  }, [location]);

  useEffect(() => {
    if ("scrollRestoration" in window.history) {
      const prev = window.history.scrollRestoration;
      window.history.scrollRestoration = "manual";
      return () => {
        window.history.scrollRestoration = prev;
      };
    }
  }, []);

  return null;
}

function Router() {
  const [location] = useLocation();
  return (
    <>
      <ScrollToTop />
      <AnimatePresence mode="wait">
        <motion.div
          key={location}
          initial={{ opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: 0.22, ease: "easeInOut" }}
        >
          <Switch>
            <Route path="/" component={Landing} />
            <Route path="/use-cases" component={UseCases} />
            <Route path="/demo" component={Demo} />
            <Route path="/l1ght" component={L1ght} />
            <Route component={NotFound} />
          </Switch>
        </motion.div>
      </AnimatePresence>
    </>
  );
}

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <MotionConfig reducedMotion="user">
          <WouterRouter base={import.meta.env.BASE_URL.replace(/\/$/, "")}>
            <div className="min-h-screen bg-background text-foreground font-sans antialiased selection:bg-primary selection:text-primary-foreground dark">
              <Router />
            </div>
          </WouterRouter>
          <Toaster />
        </MotionConfig>
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;
