import { useEffect } from 'react';
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
import { ThemeProvider, CssBaseline } from '@mui/material';
import theme from './theme/theme';
import { AppsProvider } from './context/AppsContext';

import Home from './pages/Home';
import Download from './pages/Download';
import FAQ from './pages/FAQ';
import Apps from './pages/Apps';
import Buy from './pages/Buy';
import GettingStarted from './pages/GettingStarted';
import Build from './pages/Build';

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

  useEffect(() => {
    // Check for scrollTo query parameter (used for anchor-like behavior with HashRouter)
    const params = new URLSearchParams(location.search);
    const scrollTo = params.get('scrollTo');
    
    if (scrollTo) {
      // Retry mechanism to wait for element to be rendered
      const scrollToElement = (retries = 0) => {
        const element = document.getElementById(scrollTo);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        } else if (retries < 10) {
          // Retry up to 10 times with 100ms interval
          setTimeout(() => scrollToElement(retries + 1), 100);
        }
      };
      // Initial delay for page render
      setTimeout(() => scrollToElement(), 300);
    } else {
      // Otherwise scroll to top
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }, [location.pathname, location.search]);

  return null;
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppsProvider>
        <HashRouter>
          <ScrollToTop />
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/getting-started" element={<GettingStarted />} />
            <Route path="https://huggingface.co/docs/reachy_mini/" element={<Build />} />
            <Route path="/download" element={<Download />} />
            <Route path="https://huggingface.co/docs/reachy_mini/troubleshooting" element={<FAQ />} />
            <Route path="/apps" element={<Apps />} />
            <Route path="/buy" element={<Buy />} />
          </Routes>
        </HashRouter>
      </AppsProvider>
    </ThemeProvider>
  );
}