import React, { Suspense, lazy, useState } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
const Analytics = lazy(() => import('@vercel/analytics/react').then(mod => ({ default: mod.Analytics })));
import { AuthProvider, useAuth } from './context/AuthContext';
import { SettingsProvider } from './context/SettingsContext';
import { FilterProvider } from './context/FilterContext';
const StatusBar = lazy(() => import('./components/layout/StatusBar'));
const SpeedInsights = lazy(() => import('@vercel/speed-insights/react').then(mod => ({ default: mod.SpeedInsights })));
const ChatWidget = lazy(() => import('./components/chat/ChatWidget'));
const ScrollProgressButton = lazy(() => import('./components/common/ScrollProgressButton'));
const ContactPanel = lazy(() => import('./components/contact/ContactPanel'));
const FooterControl = lazy(() => import('./components/layout/FooterControl'));

// Pages
const PortfolioPage = lazy(() => import('./pages/PortfolioPage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const SandboxPage = lazy(() => import('./pages/SandboxPage'));
const LinksPage = lazy(() => import('./pages/LinksPage'));
const DocumentsPage = lazy(() => import('./pages/DocumentsPage'));
const RealEstatePage = lazy(() => import('./pages/RealEstatePage'));
const SecureConnectionPage = lazy(() => import('./pages/SecureConnectionPage'));
const ContactPage = lazy(() => import('./pages/ContactPage'));
const FractalBlueprintPage = lazy(() => import('./pages/FractalBlueprintPage'));
const TechnicalMatrixPage = lazy(() => import('./pages/TechnicalMatrixPage'));
const ProfessionalTrajectoryPage = lazy(() => import('./pages/ProfessionalTrajectoryPage'));
const LeadershipBooksPage = lazy(() => import('./pages/LeadershipBooksPage'));
const BusinessesPage = lazy(() => import('./pages/BusinessesPage'));
const BlogPage = lazy(() => import('./pages/BlogPage'));
const BlogPostPage = lazy(() => import('./pages/BlogPostPage'));
const PoliciesPage = lazy(() => import('./pages/PoliciesPage'));
const PolicyDetailPage = lazy(() => import('./pages/PoliciesPage'));
const SpeakingPage = lazy(() => import('./pages/SpeakingPage'));
const ConsultingPage = lazy(() => import('./pages/ConsultingPage'));
const NewsletterPage = lazy(() => import('./pages/NewsletterPage'));
const DownloadsPage = lazy(() => import('./pages/DownloadsPage'));
const DownloadLandingPage = lazy(() => import('./pages/DownloadLandingPage'));
const TipJarPage = lazy(() => import('./pages/TipJarPage'));
const WorkshopsPage = lazy(() => import('./pages/WorkshopsPage'));
const QuickQuestionsPage = lazy(() => import('./pages/QuickQuestionsPage'));
const WaitlistPage = lazy(() => import('./pages/WaitlistPage'));
const SponsorPage = lazy(() => import('./pages/SponsorPage'));
const AdminLoginPage = lazy(() => import('./pages/admin/AdminLoginPage'));
const AdminDashboard = lazy(() => import('./pages/admin/AdminDashboard'));
const ToolsPage = lazy(() => import('./pages/ToolsPage'));
const GamesPage = lazy(() => import('./pages/GamesPage'));
const ComicsPage = lazy(() => import('./pages/ComicsPage'));
const CartoonsPage = lazy(() => import('./pages/CartoonsPage'));
const CartoonSeriesPage = lazy(() => import('./pages/cartoons/CartoonSeriesPage'));
const CartoonEpisodePage = lazy(() => import('./pages/cartoons/CartoonEpisodePage'));
const MortgageCalculatorPage = lazy(() => import('./pages/tools/MortgageCalculator'));
const EquityAlphaAnalyzerPage = lazy(() => import('./pages/tools/EquityAlphaAnalyzer'));

const ContactPanelWrapper = () => {
  const location = useLocation();
  if (!location || location.pathname.startsWith('/admin')) {return null;}
  return <ContactPanel />;
};

const FooterControlWrapper = () => {
  const location = useLocation();
  if (!location || location.pathname.startsWith('/admin') || location.pathname === '/') { return null; }
  return (
    <div className="px-6 py-32 max-w-7xl mx-auto text-center">
      <FooterControl />
    </div>
  );
};

// Protected Route Component
const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, isAdmin } = useAuth();
  if (!isAuthenticated || !isAdmin) {
    return <Navigate to="/admin/login" replace />;
  }
  return children;
};

// ScrollToTop on route change
const ScrollToTop = () => {
  const { pathname } = useLocation();

  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

const App = () => {
  const [velocity, setVelocity] = useState(0);

  return (
    <Router>
      <ScrollToTop />
      <AuthProvider>
        <SettingsProvider>
          <FilterProvider>
            <a
              href="#main-content"
              className="sr-only focus:not-sr-only focus:fixed focus:top-10 focus:left-4 focus:z-[200] focus:px-4 focus:py-2 focus:bg-cyber-indigo focus:text-white focus:font-mono focus:text-xs focus:rounded focus:outline-none"
            >
              SKIP_TO_CONTENT
            </a>
            <Suspense fallback={null}>
              <StatusBar velocity={velocity} />
            </Suspense>
            <Suspense fallback={null}>
              <Analytics />
            </Suspense>
            <Suspense fallback={
              <div className="min-h-screen bg-[#050505] flex items-center justify-center font-mono">
                <div className="flex flex-col items-center gap-4">
                  <div className="w-12 h-12 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
                  <div className="text-indigo-500 uppercase tracking-[0.3em] text-[0.625rem] motion-safe:animate-pulse">Initializing_OS...</div>
                </div>
              </div>
            }>
              <main id="main-content">
                <Routes>
                  {/* Public Routes */}
                  <Route path="/" element={<PortfolioPage onVelocityChange={setVelocity} />} />
                  <Route path="/about" element={<AboutPage />} />
                  <Route path="/sandbox" element={<SandboxPage />} />
                  <Route path="/links" element={<LinksPage />} />
                  <Route path="/documents" element={<DocumentsPage />} />
                  <Route path="/software/fractal-blueprint" element={<FractalBlueprintPage />} />
                  <Route path="/software/technical-matrix" element={<TechnicalMatrixPage />} />
                  <Route path="/software/professional-trajectory" element={<ProfessionalTrajectoryPage />} />
                  <Route path="/leadership/books" element={<LeadershipBooksPage />} />
                  <Route path="/businesses" element={<BusinessesPage />} />
                <Route path="/speaking" element={<SpeakingPage />} />
                <Route path="/consulting" element={<ConsultingPage />} />
                <Route path="/newsletter" element={<NewsletterPage />} />
                <Route path="/downloads" element={<DownloadsPage />} />
                <Route path="/downloads/:slug" element={<DownloadLandingPage />} />
                <Route path="/tip-jar" element={<TipJarPage />} />
                <Route path="/workshops" element={<WorkshopsPage />} />
                <Route path="/quick-question" element={<QuickQuestionsPage />} />
                <Route path="/waitlist" element={<WaitlistPage />} />
                <Route path="/sponsor" element={<SponsorPage />} />
                <Route path="/tools" element={<ToolsPage />} />
                <Route path="/games" element={<GamesPage />} />
                <Route path="/comics" element={<ComicsPage />} />
                <Route path="/comics/:slug" element={<ComicsPage />} />
                <Route path="/cartoons" element={<CartoonsPage />} />
                <Route path="/cartoons/:seriesSlug" element={<CartoonSeriesPage />} />
                <Route path="/cartoons/:seriesSlug/:seasonSlug" element={<CartoonSeriesPage />} />
                <Route path="/cartoons/:seriesSlug/:seasonSlug/:episodeSlug" element={<CartoonEpisodePage />} />
                <Route path="/tools/mortgage-calculator" element={<MortgageCalculatorPage />} />
                <Route path="/tools/equity-alpha-analyzer" element={<EquityAlphaAnalyzerPage />} />
                  <Route path="/blog" element={<BlogPage />} />
                  <Route path="/blog/:slug" element={<BlogPostPage />} />
                  <Route path="/policies" element={<PoliciesPage />} />
                  <Route path="/policies/:slug" element={<PolicyDetailPage />} />
                  <Route path="/real-estate/ai-consulting" element={<RealEstatePage audience="ai" />} />
                  <Route path="/real-estate" element={<RealEstatePage />} />
                  <Route path="/secure-connection" element={<SecureConnectionPage />} />
                  <Route path="/contact" element={<ContactPage />} />

                {/* Admin Routes */}
                <Route path="/admin/login" element={<AdminLoginPage />} />
                <Route
                  path="/admin"
                  element={
                    <ProtectedRoute>
                      <AdminDashboard />
                    </ProtectedRoute>
                  }
                />
                <Route
                  path="/admin/*"
                  element={
                    <ProtectedRoute>
                      <AdminDashboard />
                    </ProtectedRoute>
                  }
                />

                {/* Fallback */}
                <Route path="*" element={<Navigate to="/" replace />} />
              </Routes>
              </main>
            </Suspense>
            <Suspense fallback={null}>
              <FooterControlWrapper />
            </Suspense>
            <Suspense fallback={null}>
              <ContactPanelWrapper />
            </Suspense>
            <Suspense fallback={null}>
              <ScrollProgressButton />
            </Suspense>
            <Suspense fallback={null}>
              <ChatWidget />
            </Suspense>
          </FilterProvider>
        </SettingsProvider>
      </AuthProvider>
      <Suspense fallback={null}>
        <SpeedInsights />
      </Suspense>
    </Router>
  );
};

export default App;