import React, { useEffect, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import Navbar from './components/layout/Navbar';
import Hero from './components/layout/Hero';
import Footer from './components/layout/Footer';
import FeaturesSection from './components/home/FeaturesSection';
import TestimonialsSection from './components/home/TestimonialsSection';
import CTASection from './components/home/CTASection';
import FAQSection from './components/home/FAQSection';
import Loading from './components/common/Loading';
import { getFirebaseAuthInfo } from './services/userService';
import { ThemeProvider } from './contexts/ThemeContext';
import { NotificationProvider } from './contexts/NotificationContext';
import { PointsProvider } from './contexts/PointsContext';
import { ProgressProvider } from './contexts/ProgressContext';
import NotificationToast from './components/notification/NotificationToast';
import PointsChangeDetector from './components/points/PointsChangeDetector';
import ApiOperationWrapper from './utils/api/wrapper';
import { Link } from 'react-router-dom';

// Lazy load components
const VideoDownloader = React.lazy(() => import('./components/workspace/VideoDownloader'));
const Login = React.lazy(() => import('./components/auth/Login'));
const Demo = React.lazy(() => import('./components/Demo'));
const GetStarted = React.lazy(() => import('./components/GetStarted'));
const SubscriptionSimple = React.lazy(() => import('./components/subscription/SubscriptionSimple'));
const ProtectedRoute = React.lazy(() => import('./components/auth/ProtectedRoute'));
const EmailVerification = React.lazy(() => import('./components/auth/EmailVerification'));
const AuthDebug = React.lazy(() => import('./components/auth/AuthDebug'));
const Workspace = React.lazy(() => import('./components/workspace/index'));
const ProjectEditor = React.lazy(() => import('./components/project-editor/index'));
const CheckOutStripe = React.lazy(() => import('./components/payment/CheckOutStripe'));
const SubscriptionSuccess = React.lazy(() => import('./pages/SubscriptionSuccess'));
const SubscriptionCancel = React.lazy(() => import('./pages/SubscriptionCancel'));
const TermsOfService = React.lazy(() => import('./pages/TermsOfService'));
const PrivacyPolicy = React.lazy(() => import('./pages/PrivacyPolicy'));
const RefundPolicy = React.lazy(() => import('./pages/RefundPolicy'));
const About = React.lazy(() => import('./pages/About'));
const Contact = React.lazy(() => import('./pages/Contact'));
const SubscriptionManagement = React.lazy(() => import('./components/subscription/SubscriptionManagement'));
const PointsCenter = React.lazy(() => import('./components/points/PointsCenter'));

// Home component to display the landing page content
const Home = () => {
  // Lazy-load the component wrapper
  const LazyComponentWrapper = React.lazy(() => import('./components/common/LazyComponent').then(m => ({ default: m.LazyComponent })));

  return (
    <>
      {/* Hero is above the fold, render immediately */}
      <Hero />

      {/* Below-the-fold sections: lazy load when entering viewport */}
      <Suspense fallback={<div className="h-screen" />}>
        <LazyComponentWrapper fallback={<div className="h-96 animate-pulse bg-gray-100 dark:bg-gray-800" />}>
          <FeaturesSection />
        </LazyComponentWrapper>

        <LazyComponentWrapper fallback={<div className="h-96 animate-pulse bg-gray-100 dark:bg-gray-800" />}>
          <TestimonialsSection />
        </LazyComponentWrapper>

        <LazyComponentWrapper fallback={<div className="h-64 animate-pulse bg-gray-100 dark:bg-gray-800" />}>
          <CTASection />
        </LazyComponentWrapper>

        <LazyComponentWrapper fallback={<div className="h-96 animate-pulse bg-gray-100 dark:bg-gray-800" />}>
          <SubscriptionSimple />
        </LazyComponentWrapper>

        <LazyComponentWrapper fallback={<div className="h-96 animate-pulse bg-gray-100 dark:bg-gray-800" />}>
          <FAQSection />
        </LazyComponentWrapper>
      </Suspense>
    </>
  );
};

// Layout component for consistent UI across protected routes
const MainLayout = ({ children, hideFooter = false }: { children: React.ReactNode, hideFooter?: boolean }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      {!hideFooter && <Footer />}
    </>
  );
};

// Workspace layout that hides the footer
const WorkspaceLayoutWithNavbar = ({ children }: { children: React.ReactNode }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
};

// 创建一个使用翻译的成功页面组件
const PointsPurchaseSuccessPage = () => {
  const { t } = useTranslation('common');

  return (
    <MainLayout>
      <div className="max-w-lg mx-auto mt-16 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
        <h1 className="text-2xl font-bold text-center mb-4">{t('points_center.payment_success')}</h1>
        <p className="text-center mb-6">{t('points_center.points_purchase_successful')}</p>
        <div className="flex justify-center">
          <Link to="/points" className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
            {t('points_center.return_to_points_center')}
          </Link>
        </div>
      </div>
    </MainLayout>
  );
};

// 创建一个使用翻译的取消页面组件
const PointsPurchaseCancelPage = () => {
  const { t } = useTranslation('common');

  return (
    <MainLayout>
      <div className="max-w-lg mx-auto mt-16 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
        <h1 className="text-2xl font-bold text-center mb-4">{t('points_center.payment_cancelled')}</h1>
        <p className="text-center mb-6">{t('points_center.cancel_points_purchase_warning')}</p>
        <div className="flex justify-center">
          <Link to="/points" className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
            {t('points_center.return_to_points_center')}
          </Link>
        </div>
      </div>
    </MainLayout>
  );
};


function App() {
  // 移除阻塞式初始化，改为后台异步检查（仅用于开发调试）
  useEffect(() => {
    // 非阻塞式检查，仅在开发环境下输出日志
    if (import.meta.env.DEV) {
      getFirebaseAuthInfo()
        .then(authInfo => {
          if (authInfo.project_id !== 'rescene-ai') {
            console.warn('[App Debug] Project ID mismatch: Frontend uses "rescene-ai" but backend returned:', authInfo.project_id);
          }
        })
        .catch(error => {
          console.warn('[App Debug] Failed to get Firebase auth info (non-blocking):', error);
        });
    }
  }, []);

  return (
    <ThemeProvider>
      <NotificationProvider>
        <PointsProvider>
          <Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
            <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-primary)]">
              <Suspense fallback={<Loading />}>
                <Routes>
                  {/* Public routes */}
                  <Route
                    path="/login"
                    element={<Login />}
                  />

                  {/* Email verification route */}
                  <Route
                    path="/verify-email"
                    element={<EmailVerification />}
                  />

                  {/* Routes with Navbar and Footer */}
                  <Route path="/" element={<MainLayout><Home /></MainLayout>} />
                  <Route path="/demo" element={<MainLayout><Demo /></MainLayout>} />
                  <Route path="/get-started" element={<MainLayout><GetStarted /></MainLayout>} />
                  <Route
                    path="/learning-center"
                    element={<Navigate to="/#learning-center" replace />}
                  />

                  {/* Legal and Information Pages */}
                  <Route path="/terms-of-service" element={<MainLayout><TermsOfService /></MainLayout>} />
                  <Route path="/privacy-policy" element={<MainLayout><PrivacyPolicy /></MainLayout>} />
                  <Route path="/refund-policy" element={<MainLayout><RefundPolicy /></MainLayout>} />
                  <Route path="/about" element={<MainLayout><About /></MainLayout>} />
                  <Route path="/contact" element={<MainLayout><Contact /></MainLayout>} />

                  {/* 订阅管理路由 */}
                  <Route
                    path="/subscription-management"
                    element={
                      <MainLayout>
                        <SubscriptionManagement />
                      </MainLayout>
                    }
                  />

                  {/* Debug route */}
                  <Route path="/auth-debug" element={<MainLayout><AuthDebug /></MainLayout>} />

                  {/* Protected routes (require authentication) */}
                  <Route
                    path="/workspace"
                    element={
                      <ProtectedRoute>
                        <WorkspaceLayoutWithNavbar><Workspace /></WorkspaceLayoutWithNavbar>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/workspace/projects"
                    element={
                      <ProtectedRoute>
                        <WorkspaceLayoutWithNavbar><Workspace /></WorkspaceLayoutWithNavbar>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/workspace/exported"
                    element={
                      <ProtectedRoute>
                        <WorkspaceLayoutWithNavbar><Workspace /></WorkspaceLayoutWithNavbar>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/workspace/new-project"
                    element={
                      <ProtectedRoute>
                        <ProgressProvider>
                          <ProjectEditor />
                        </ProgressProvider>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/workspace/edit-project/:projectId"
                    element={
                      <ProtectedRoute>
                        <ProgressProvider>
                          <ProjectEditor />
                        </ProgressProvider>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/workspace/project/:projectId"
                    element={
                      <ProtectedRoute>
                        <ProgressProvider>
                          <ProjectEditor />
                        </ProgressProvider>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/subscription"
                    element={<Navigate to="/#subscription" replace />}
                  />
                  <Route
                    path="/workspace/video-downloader"
                    element={
                      <ProtectedRoute>
                        <WorkspaceLayoutWithNavbar>
                          <VideoDownloader />
                        </WorkspaceLayoutWithNavbar>
                      </ProtectedRoute>
                    }
                  />

                  {/* Checkout route */}
                  <Route path="/check_out" element={<MainLayout><CheckOutStripe /></MainLayout>} />
                  <Route path="/subscription/success" element={<SubscriptionSuccess />} />
                  <Route path="/subscription/cancel" element={<SubscriptionCancel />} />

                  {/* Points Center Route */}
                  <Route
                    path="/points"
                    element={
                      <ProtectedRoute>
                        <MainLayout>
                          <ApiOperationWrapper>
                            <PointsCenter />
                          </ApiOperationWrapper>
                        </MainLayout>
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/points/success"
                    element={
                      <ProtectedRoute>
                        <PointsPurchaseSuccessPage />
                      </ProtectedRoute>
                    }
                  />
                  <Route
                    path="/points/cancel"
                    element={
                      <ProtectedRoute>
                        <PointsPurchaseCancelPage />
                      </ProtectedRoute>
                    }
                  />

                  {/* Fallback route for any unmatched paths */}
                  <Route path="*" element={<Navigate to="/" />} />
                </Routes>
              </Suspense>
              <NotificationToast />
              <PointsChangeDetector />
            </div>
          </Router>
        </PointsProvider>
      </NotificationProvider>
    </ThemeProvider>
  );
}

export default App;