/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import React, { useEffect, Suspense } from 'react';
import { HelmetProvider } from 'react-helmet-async';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';

import './index.css';

import LandingPage from './components/LandingPage';
import CookieConsent from './components/CookieConsent';
import { LanguageProvider } from './src/i18n/LanguageContext';
import GeoRedirect from './src/i18n/GeoRedirect';
import LanguageRoute from './src/i18n/LanguageRoute';

// Lazy-loaded route components for code splitting
const Login = React.lazy(() => import('./components/Login'));
const Generator = React.lazy(() => import('./components/Generator'));
const AdminPanel = React.lazy(() => import('./components/AdminPanel'));
const UserSettings = React.lazy(() => import('./components/UserSettings'));
const LegalPages = React.lazy(() => import('./components/LegalPages'));
const ContactPage = React.lazy(() => import('./components/ContactPage'));
const BlogListPage = React.lazy(() => import('./components/BlogListPage'));
const BlogPost = React.lazy(() => import('./components/BlogPost'));
const NotFoundPage = React.lazy(() => import('./components/NotFoundPage'));
const DemoGenerator = React.lazy(() => import('./components/DemoGenerator'));
const GscCallback = React.lazy(() => import('./components/GscCallback'));
const GscDashboard = React.lazy(() => import('./components/GscDashboard'));
const FeaturePage = React.lazy(() => import('./components/FeaturePage'));
const FeaturesListPage = React.lazy(() => import('./components/FeaturesListPage'));
// const ChatWidget = React.lazy(() => import('./components/ChatWidget'));

function LoadingFallback() {
  return (
    <div style={{
      height: '100vh',
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: '#000',
      color: '#fff',
      fontFamily: 'var(--font-mono)',
      fontSize: '1rem',
      letterSpacing: '0.1em',
      textTransform: 'uppercase'
    }}>
      <div style={{
        width: 24, height: 24,
        border: '2px solid rgba(255,255,255,0.2)',
        borderTop: '2px solid #fff',
        borderRadius: '50%',
        animation: 'spin 0.8s linear infinite',
        marginRight: 12
      }} />
      Načítání...
    </div>
  );
}

function App() {
  useEffect(() => {
    // Skip mouse tracking on touch devices (mobile) to save CPU
    if ('ontouchstart' in window || navigator.maxTouchPoints > 0) return;

    let ticking = false;
    const handleMouseMove = (e: MouseEvent) => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const x = (e.clientX / window.innerWidth) * 100;
        const y = (e.clientY / window.innerHeight) * 100;
        document.documentElement.style.setProperty('--mouse-x', `${x}%`);
        document.documentElement.style.setProperty('--mouse-y', `${y}%`);
        ticking = false;
      });
    };
    window.addEventListener('mousemove', handleMouseMove, { passive: true });
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <HelmetProvider>
    <LanguageProvider>
      <Router>
        <Suspense fallback={<LoadingFallback />}>
          <Routes>
            {/* Root → detect language and redirect */}
            <Route path="/" element={<GeoRedirect />} />

            {/* Language-prefixed routes */}
            <Route path="/:lang" element={<LanguageRoute />}>
              <Route index element={<LandingPage />} />
              <Route path="login" element={<Login />} />
              <Route path="app" element={<Generator />} />
              <Route path="demo" element={<DemoGenerator />} />
              <Route path="admin" element={<AdminPanel />} />
              <Route path="settings" element={<UserSettings />} />
              <Route path="terms" element={<LegalPages type="terms" />} />
              <Route path="cookies" element={<LegalPages type="cookies" />} />
              <Route path="gdpr" element={<LegalPages type="gdpr" />} />
              <Route path="contact" element={<ContactPage />} />
              <Route path="blog" element={<BlogListPage />} />
              <Route path="blog/:slug" element={<BlogPost />} />
              <Route path="features" element={<FeaturesListPage />} />
              <Route path="features/:feature" element={<FeaturePage />} />
              <Route path="dashboard/gsc" element={<GscDashboard />} />
              <Route path="*" element={<NotFoundPage />} />
            </Route>

            {/* OAuth callback — fixed path, no language prefix */}
            <Route path="/auth/gsc/callback" element={<GscCallback />} />

            {/* Legacy routes without prefix → redirect to /en/ */}
            <Route path="/login" element={<Navigate to="/en/login" replace />} />
            <Route path="/app" element={<Navigate to="/en/app" replace />} />
            <Route path="/demo" element={<Navigate to="/en/demo" replace />} />
            <Route path="/admin" element={<Navigate to="/en/admin" replace />} />
            <Route path="/settings" element={<Navigate to="/en/settings" replace />} />
            <Route path="/terms" element={<Navigate to="/en/terms" replace />} />
            <Route path="/cookies" element={<Navigate to="/en/cookies" replace />} />
            <Route path="/gdpr" element={<Navigate to="/en/gdpr" replace />} />
            <Route path="/contact" element={<Navigate to="/en/contact" replace />} />
            <Route path="/blog" element={<Navigate to="/en/blog" replace />} />
            <Route path="/blog/:slug" element={<Navigate to="/en/blog" replace />} />
            <Route path="/dashboard/gsc" element={<Navigate to="/en/dashboard/gsc" replace />} />
            <Route path="/features/:feature" element={<Navigate to="/en/features/:feature" replace />} />

            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </Suspense>
        <CookieConsent />
        {/* ChatWidget disabled — re-enable when ready */}
      </Router>
    </LanguageProvider>
    </HelmetProvider>
  );
}

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<React.StrictMode><App /></React.StrictMode>);
}