/**
 * @fileoverview React component for App.jsx
 * 
 * @module App
 */

import { lazy, Suspense, useEffect } from "react";
import { HashRouter as Router, Routes, Route, useLocation } from "react-router-dom";
import "./App.css";
import HomePage from "./pages/HomePage/HomePage";
import LabPython from "./pages/LabPython/LabPython";
import ScrollToTop from "./components/ScrollToTop";
import { trackPageView } from "./services/plausible";

const Playground = lazy(() => import("./pages/Playground/Playground"));
const About = lazy(() => import("./pages/About/About"));
const Faq = lazy(() => import("./pages/Faq/Faq"));
const Atividades = lazy(() => import("./pages/Atividades/Atividades"));
const Educadores = lazy(() => import("./pages/Educadores/Educadores"));
const Iniciativas = lazy(() => import("./pages/Iniciativas/Iniciativas"));
const IniciativaDetalhe = lazy(() => import("./pages/Iniciativas/IniciativaDetalhe"));
const PrimeirosPassos = lazy(() => import("./pages/PrimeirosPassos/PrimeirosPassos"));
const CategoriaLetramentoView = lazy(() => import("./pages/PrimeirosPassos/CategoriaLetramentoView"));

//Atividades
const AspiradorGame = lazy(() => import("./atividades/programacao/aspirador/AspiradorGame"));
const AutomatoGame = lazy(() => import("./atividades/programacao/automato/AutomatoGame"));
const SemaforoGame = lazy(() => import("./atividades/programacao/semaforo/SemaforoGame"));
const MoleMashGame = lazy(() => import("./atividades/programacao/mole-mash/MoleMash"));
const OrdenacaoGame = lazy(() => import("./atividades/programacao/ordenacao/OrdenacaoGame"));
const PuzzleGame = lazy(() => import("./atividades/programacao/puzzle/PuzzleGame"));
const TurtleGame = lazy(() => import("./atividades/programacao/turtle/TurtleGame"));
const CriptoGame = lazy(() => import("./atividades/programacao/cripto/CriptoGame"));

const LoadingFallback = () => (
  <div
    className="primary-gradient text-white"
    style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      height: "100vh",
      fontSize: "1.5rem",
      fontWeight: "600",
    }}
  >
    <div style={{ textAlign: "center" }}>
      <div
        style={{
          width: "50px",
          height: "50px",
          border: "4px solid rgba(255,255,255,0.3)",
          borderTop: "4px solid white",
          borderRadius: "50%",
          animation: "spin 1s linear infinite",
          margin: "0 auto 20px",
        }}
      ></div>
      Carregando...
    </div>
  </div>
);

// Separated so we can call useLocation (requires being inside Router)
function AppRoutes() {
  const location = useLocation();
  // When navigating to a letramento category, the caller passes
  // { state: { backgroundLocation: location } } so the previous page
  // keeps rendering behind the modal overlay.
  const backgroundLocation = location.state?.backgroundLocation;

  useEffect(() => {
    trackPageView(location.pathname);
  }, [location.pathname]);

  return (
    <>
      <ScrollToTop />
      {/* Main routes — rendered at the background location when a modal is open */}
      <Routes location={backgroundLocation ?? location}>
        <Route path="/" element={<HomePage />} />
        <Route path="/playground" element={<Playground />} />
        <Route path="/laboratorio" element={<Playground />} />
        <Route path="/laboratorio-python" element={<LabPython />} />
        <Route path="/sobre" element={<About />} />
        <Route path="/faq" element={<Faq />} />
        <Route path="/atividades" element={<Atividades />} />
        <Route path="/educadores" element={<Educadores />} />
        <Route path="/iniciativas" element={<Iniciativas />} />
        <Route path="/iniciativas/:id" element={<IniciativaDetalhe />} />
        <Route path="/primeiros-passos" element={<PrimeirosPassos />} />
        {/* Fallback: direct URL access without backgroundLocation */}
        <Route path="/primeiros-passos/:categoria" element={<CategoriaLetramentoView />} />
        <Route path="/atividades/programacao/aspirador" element={<AspiradorGame />} />
        <Route path="/atividades/programacao/automato" element={<AutomatoGame />} />
        <Route path="/atividades/programacao/cripto" element={<CriptoGame />} />
        <Route path="/atividades/programacao/ordenacao" element={<OrdenacaoGame />} />
        <Route path="/atividades/programacao/puzzle" element={<PuzzleGame />} />
        <Route path="/atividades/programacao/semaforo" element={<SemaforoGame />} />
        <Route path="/atividades/programacao/molemash" element={<MoleMashGame />} />
        <Route path="/atividades/programacao/turtle" element={<TurtleGame />} />
      </Routes>

      {/* Modal overlay routes — rendered on top of the background page */}
      {backgroundLocation && (
        <Routes>
          <Route path="/primeiros-passos/:categoria" element={<CategoriaLetramentoView />} />
        </Routes>
      )}
    </>
  );
}

export default function App() {
  return (
    <Router>
      <Suspense fallback={<LoadingFallback />}>
        <AppRoutes />
      </Suspense>
    </Router>
  );
}

// Note: many imports are used only via lazy() or in route elements.
// If ESLint still reports unused vars here, we prefer keeping changes minimal
// and addressing remaining warnings in targeted files.