/**
 * @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';

// Observability — error tracking + product analytics
import { initSentry, SentryErrorBoundary } from './src/observability/sentry';
import { initPosthog } from './src/observability/posthog';

// Fire observability init as early as possible. Both modules no-op if their
// env vars are missing (dev + untrusted builds stay quiet).
initSentry();
initPosthog();

// 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'));
// New admin system (Phase 0/1/2/3) — replaces simple AdminPanel with nested RBAC routes
const AdminLayout = React.lazy(() => import('./components/admin/AdminLayout'));
const AdminDashboard = React.lazy(() => import('./components/admin/AdminDashboard'));
const AdminUsers = React.lazy(() => import('./components/admin/AdminUsers'));
const AdminRoleManagement = React.lazy(() => import('./components/admin/AdminRoleManagement'));
const AdminAuditLog = React.lazy(() => import('./components/admin/AdminAuditLog'));
const AdminBilling = React.lazy(() => import('./components/admin/AdminBilling'));
const AdminMessages = React.lazy(() => import('./components/admin/AdminMessages'));
const AdminAnalytics = React.lazy(() => import('./components/admin/AdminAnalytics'));
const AdminContent = React.lazy(() => import('./components/admin/AdminContent'));
const AdminPlaceholder = React.lazy(() => import('./components/admin/AdminPlaceholder'));
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 AuditPage = React.lazy(() => import('./components/AuditPage'));
// 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 />} />

              {/* Legacy admin (master prompts, blog CRUD, live chat) — kept as fallback until Phase 2/3 migrates its features */}
              <Route path="admin/legacy" element={<AdminPanel />} />

              {/* New RBAC admin — nested routing with granular permissions */}
              <Route path="admin" element={<AdminLayout />}>
                <Route index element={<AdminDashboard />} />
                <Route path="users" element={<AdminUsers />} />
                <Route path="roles" element={<AdminRoleManagement />} />
                <Route path="audit" element={<AdminAuditLog />} />
                <Route path="billing" element={<AdminBilling />} />
                <Route path="content" element={<AdminContent />} />
                <Route path="messages" element={<AdminMessages />} />
                <Route path="analytics" element={<AdminAnalytics />} />
                <Route
                  path="support"
                  element={
                    <AdminPlaceholder
                      title="Live Support"
                      phase="Phase 2"
                      description="Live chat s uživateli. Aktuálně dostupný v legacy admin panelu — migrace do nového UI je plánovaná na Phase 2.1 (po Product Hunt launchi)."
                      features={[
                        'Real-time live chat s uživateli',
                        'Seznam aktivních a uzavřených konverzací',
                        'Eskalace z AI bota na lidskou podporu',
                      ]}
                      legacyHref="../admin/legacy"
                      legacyLabel="Otevřít legacy admin pro live chat"
                    />
                  }
                />
                <Route path="*" element={<AdminDashboard />} />
              </Route>

              <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="refund" element={<LegalPages type="refund" />} />
              <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="audit" element={<AuditPage />} />
              <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="/audit" element={<Navigate to="/en/audit" replace />} />

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

function ErrorFallback() {
  return (
    <div style={{
      height: '100vh',
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: '#000',
      color: '#fff',
      fontFamily: 'var(--font-mono)',
      padding: '2rem',
      textAlign: 'center',
    }}>
      <div style={{ maxWidth: 480 }}>
        <div style={{ fontSize: '3rem', marginBottom: '1.5rem', letterSpacing: '0.1em' }}>Σ</div>
        <h1 style={{ fontSize: '1.25rem', textTransform: 'uppercase', letterSpacing: '0.15em', marginBottom: '1rem' }}>
          Something broke
        </h1>
        <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.9rem', marginBottom: '1.5rem', lineHeight: 1.6 }}>
          SEOKRATES hit an unexpected error. Our team has been notified. Refresh to try again.
        </p>
        <button
          onClick={() => window.location.reload()}
          style={{
            padding: '12px 32px',
            background: '#fff',
            color: '#000',
            border: 'none',
            fontFamily: 'var(--font-mono)',
            fontSize: '0.85rem',
            fontWeight: 600,
            letterSpacing: '0.1em',
            textTransform: 'uppercase',
            cursor: 'pointer',
          }}
        >
          Refresh
        </button>
      </div>
    </div>
  );
}

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