import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
import { Layout } from './components/Layout';
import { lazy, Suspense, useEffect } from 'react';

const HomePage = lazy(() => import('./pages/home/HomePage'));
const CloudPage = lazy(() => import('./pages/cloud/CloudPage'));
const NetworkPage = lazy(() => import('./pages/network/NetworkPage'));
const AgentsPage = lazy(() => import('./pages/agents/AgentsPage'));
const DownloadPage = lazy(() => import('./pages/download/DownloadPage'));
const ComputePage = lazy(() => import('./pages/compute/ComputePage'));
const StoragePage = lazy(() => import('./pages/storage/StoragePage'));
const GpuPage = lazy(() => import('./pages/gpu/GpuPage'));
const PodsPage = lazy(() => import('./pages/pods/PodsPage'));
const NodesPage = lazy(() => import('./pages/nodes/NodesPage'));

function ScrollToTop() {
  const { pathname, hash } = useLocation();

  useEffect(() => {
    if (hash) {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
        return;
      }
    }

    window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
  }, [pathname, hash]);

  return null;
}

function App() {
  return (
    <HashRouter>
      <ScrollToTop />
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<HomePage />} />
            <Route path="cloud" element={<CloudPage />} />
            <Route path="network" element={<NetworkPage />} />
            <Route path="agents" element={<AgentsPage />} />
            <Route path="download" element={<DownloadPage />} />
            <Route path="compute" element={<ComputePage />} />
            <Route path="storage" element={<StoragePage />} />
                        <Route path="gpu" element={<GpuPage />} />
            <Route path="pods" element={<PodsPage />} />
            <Route path="nodes" element={<NodesPage />} />
          </Route>
        </Routes>
      </Suspense>
    </HashRouter>
  )
}

export default App