import { lazy, Suspense, useEffect, useState, Component, type ReactNode } from "react";
import { BrowserRouter, Routes, Route, useLocation, useParams } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import Lenis from "lenis";
import { Toaster } from "sonner";
import Header from "./components/Header";
import Footer from "./components/Footer";
import FloatingHelp from "./components/FloatingHelp";
import PageTransition from "./components/PageTransition";
import ScrollProgress from "./components/ScrollProgress";
import MeetingModal from "./components/MeetingModal";
import Home from "./pages/Home";
import SolutionPage from "./pages/SolutionPage";
import About from "./pages/About";
import Contact from "./pages/Contact";

/* Route-level code splitting: heavy / less-frequent pages load on demand. */
const MissionVision = lazy(() => import("./pages/MissionVision"));
const Approach = lazy(() => import("./pages/Approach"));
const Blog = lazy(() => import("./pages/Blog"));
const BlogPost = lazy(() => import("./pages/BlogPost"));
const Careers = lazy(() => import("./pages/Careers"));
const DigitalEngineering = lazy(() => import("./pages/DigitalEngineering"));
const Partners = lazy(() => import("./pages/Partners"));
const PartnerDetail = lazy(() => import("./pages/PartnerDetail"));
const Clients = lazy(() => import("./pages/Clients"));
const Legal = lazy(() => import("./pages/Legal"));
const Admin = lazy(() => import("./pages/Admin"));
const NotFound = lazy(() => import("./pages/NotFound"));

class ErrorBoundary extends Component<{ children: ReactNode }, { error: unknown }> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = { error: null };
  }
  static getDerivedStateFromError(error: unknown) {
    return { error };
  }
  render() {
    if (this.state.error) {
      return (
        <div className="min-h-screen bg-ink flex flex-col items-center justify-center gap-5 px-6 text-center">
          <p className="font-display font-black text-3xl text-white">Something went wrong.</p>
          <p className="text-mist/60 text-sm max-w-md">An unexpected error occurred. Please refresh the page — if it persists, contact connect@aviokan.com.</p>
          <button onClick={() => window.location.reload()} className="bg-ember text-white font-bold px-8 py-3.5 hover:bg-white hover:text-ink transition-colors">
            Refresh
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

function SmoothScroll() {
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const lenis = new Lenis({
      duration: 1.15,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
    });
    window.__lenis = lenis;
    let raf: number;
    const loop = (time: number) => {
      lenis.raf(time);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => {
      cancelAnimationFrame(raf);
      lenis.destroy();
      window.__lenis = null;
    };
  }, []);
  return null;
}

function ScrollToTop() {
  const { pathname } = useLocation();
  useEffect(() => {
    if (window.__lenis) window.__lenis.scrollTo(0, { immediate: true });
    else window.scrollTo(0, 0);
  }, [pathname]);
  return null;
}

function RouteFallback() {
  return (
    <div className="min-h-[70vh] grid place-items-center" data-testid="route-fallback" aria-live="polite">
      <span className="h-8 w-8 rounded-full border-2 border-cy/30 border-t-cy animate-spin" aria-label="Loading" />
    </div>
  );
}

function App() {
  const [social, setSocial] = useState<Record<string, string> | null>(null);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_BACKEND_URL}/api/settings`)
      .then((r) => r.json())
      .then((s) => setSocial(s.social || {}))
      .catch(() => {});
  }, []);

  return (
    <BrowserRouter>
      <ErrorBoundary>
        <a
          href="#main-content"
          className="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-[80] focus:bg-cy focus:text-[#0A1F44] focus:font-bold focus:text-sm focus:px-4 focus:py-2.5"
          data-testid="skip-to-content"
        >
          Skip to content
        </a>
        <SmoothScroll />
        <ScrollToTop />
        <Shell social={social} />
      </ErrorBoundary>
    </BrowserRouter>
  );
}

function Shell({ social }: { social: Record<string, string> | null }) {
  const { pathname } = useLocation();
  const isAdmin = pathname.startsWith("/admin");
  return (
    <>
      {!isAdmin && <Header />}
      {!isAdmin && <ScrollProgress />}
      <main id="main-content">
        <AnimatePresence mode="wait" initial={false}>
          <PageTransition key={pathname}>
            <Suspense fallback={<RouteFallback />}>
              <Routes location={{ pathname }}>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/about/mission-vision" element={<MissionVision />} />
                <Route path="/about/approach" element={<Approach />} />
                <Route path="/about/blog" element={<Blog />} />
                <Route path="/about/blog/:slug" element={<BlogPost />} />
                <Route path="/about/careers" element={<Careers />} />
                <Route path="/solutions/:slug" element={<SolutionPageWrapper />} />
                <Route path="/digital-engineering" element={<DigitalEngineering />} />
                <Route path="/partners" element={<Partners />} />
                <Route path="/partners/:slug" element={<PartnerDetail />} />
                <Route path="/clients" element={<Clients />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="/privacy-policy" element={<Legal />} />
                <Route path="/terms-conditions" element={<Legal />} />
                <Route path="/cookie-policy" element={<Legal />} />
                <Route path="/disclaimer" element={<Legal />} />
                <Route path="/admin" element={<Admin />} />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Suspense>
          </PageTransition>
        </AnimatePresence>
      </main>
      {!isAdmin && <FloatingHelp />}
      {!isAdmin && <MeetingModal />}
      {!isAdmin && <Footer social={social} />}
      <Toaster position="bottom-right" theme="dark" />
    </>
  );
}

function SolutionPageWrapper() {
  const { slug } = useParams<{ slug: string }>();
  return <SolutionPage slug={slug} />;
}

export default App;