import { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import '../scss/App.scss';
import Navbar from '../components/layout/Navigation';
import Footer from '../components/layout/Footer';
import HomePage from '../pages/HomePage';
import LandingPage from '../pages/LandingPage';
import ImprintPage from '../pages/ImprintPage';
import PrivacyPolicy from '../pages/PrivacyPolicy';
import BackToTopButton from '../components/BackToTopButton';
import { getLanguageFromPath, useLanguage } from '../contexts/LanguageContext';
import type { Theme } from '../data/types';

/** Syncs the LanguageContext whenever the URL prefix (/de/ or /en/) changes. */
function LanguageSyncer() {
  const { setLanguage, language } = useLanguage();
  const location = useLocation();

  useEffect(() => {
    const urlLang = getLanguageFromPath(location.pathname);
    if (urlLang && urlLang !== language) {
      setLanguage(urlLang);
    }
  }, [location.pathname, language, setLanguage]);

  return null;
}

function AppShell({ theme, setTheme }: Readonly<{ theme: Theme; setTheme: React.Dispatch<React.SetStateAction<Theme>>; }>) {
  const location = useLocation();

  useEffect(() => {
    const hash = location.hash.substring(1);
    if (hash) {
      setTimeout(() => {
        const element = document.getElementById(hash);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }, 100);
    }
  }, [location.hash]);

  return (
    <div className="app">
      <a href="#main-content" className="skip-link">Skip to main content</a>
      <LanguageSyncer />
      <Navbar theme={theme} setTheme={setTheme} />
      <main id="main-content" className="app__main">
        <Routes>
          {/* Root redirects → German (primary market) */}
          <Route path="/" element={<Navigate to="/de/" replace />} />
          <Route path="/technical" element={<Navigate to="/de/technical" replace />} />

          {/* German routes */}
          <Route path="/de/" element={<LandingPage />} />
          <Route path="/de/technical" element={<HomePage />} />

          {/* English routes */}
          <Route path="/en/" element={<LandingPage />} />
          <Route path="/en/technical" element={<HomePage />} />

          {/* Shared pages (noindex, language-independent) */}
          <Route path="/imprint" element={<ImprintPage />} />
          <Route path="/privacy-policy" element={<PrivacyPolicy />} />
        </Routes>
      </main>
      <Footer />
      <BackToTopButton />
    </div>
  );
}

function AppRouter() {
  const [theme, setTheme] = useState<Theme>('light');

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') as Theme | null;
    if (savedTheme) {
      setTheme(savedTheme);
    }
  }, []);

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <Router>
      <AppShell theme={theme} setTheme={setTheme} />
    </Router>
  );
}

export default AppRouter;
