import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Header from './components/Header';
import Footer from './components/Footer';
import NotFound from './pages/NotFound';
import Login from './pages/Login';
import PrivateRoute from './components/PrivateRoute';

const DevTools = lazy(() => import('./pages/DevTools'));
const ImageTools = lazy(() => import('./pages/ImageTools'));
const Blog = lazy(() => import('./pages/Blog'));
const AIProduct = lazy(() => import('./pages/AIProduct'));
const Translator = lazy(() => import('./pages/Translator'));
const DocumentTranslator = lazy(() => import('./pages/DocumentTranslator'));

const JsonFormatter = lazy(() => import('./components/JsonFormatter'));
const MarkdownToImage = lazy(() => import('./components/MarkdownToImage'));
const UrlEnDecode = lazy(() => import('./components/UrlEnDecode'));
const About = lazy(() => import('./pages/About'));
const OpenAITimeline = lazy(() => import('./components/OpenAITimeline'));
const PricingCharts  = lazy(() => import('./components/PricingCharts'));
const HandwriteGen  = lazy(() => import('./components/HandwriteGen'));
const ImageBase64Converter  = lazy(() => import('./components/ImageBase64Converter'));
const QuoteCard = lazy(() => import('./components/QuoteCard'));
const LatexToImage = lazy(() => import('./components/LatexToImage'));
const TextDiff = lazy(() => import('./components/TextDiff'));
const SubtitleGenerator = lazy(() => import('./components/SubtitleGenerator'));
const ImageCompressor = lazy(() => import('./components/ImageCompressor'));
const ImageWatermark = lazy(() => import('./components/ImageWatermark'));
const TextBehindImage = lazy(() => import('./components/TextBehindImage'));
const BackgroundRemover = lazy(() => import('./components/BackgroundRemover'));
const IDPhotoMaker = lazy(() => import('./components/IDPhotoMaker'));
const AnthropicTimeline = lazy(() => import('./components/AnthropicTimeline'));
const DrugsList = lazy(() => import('./components/DrugsList'));
const DeepSeekTimeline = lazy(() => import('./components/DeepSeekTimeline'));
const WechatFormatter = lazy(() => import('./components/WechatFormatter'));
const ImageAnnotator = lazy(() => import('./components/ImageAnnotator'));
const AITimelinePage = lazy(() => import('./pages/AITimelinePage'));
const PerpetualCalendar = lazy(() => import('./components/PerpetualCalendar'));

function App() {
  return (
    <div className="app-container min-h-screen flex flex-col">
      <Header />
      <div className="flex-grow">
        <div className="content-wrapper">
          <main>
            <Suspense fallback={<div>Loading...</div>}>
              <Routes>
                <Route path="/login" element={<Login />} />
                <Route
                  path="/"
                  element={
                    <PrivateRoute>
                      <Home />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/about"
                  element={
                    <PrivateRoute>
                      <About />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/dev-tools"
                  element={
                    <PrivateRoute>
                      <DevTools />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/image-tools"
                  element={
                    <PrivateRoute>
                      <ImageTools />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/ai-products"
                  element={
                    <PrivateRoute>
                      <AIProduct />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/blog"
                  element={
                    <PrivateRoute>
                      <Blog />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/translator"
                  element={
                    <PrivateRoute>
                      <Translator />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/document-translator"
                  element={
                    <PrivateRoute>
                      <DocumentTranslator />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/markdown-to-image"
                  element={
                    <PrivateRoute>
                      <MarkdownToImage />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/json-formatter"
                  element={
                    <PrivateRoute>
                      <JsonFormatter />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/url-encode-and-decode"
                  element={
                    <PrivateRoute>
                      <UrlEnDecode />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/openai-timeline"
                  element={
                    <PrivateRoute>
                      <OpenAITimeline />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/anthropic-timeline"
                  element={
                    <PrivateRoute>
                      <AnthropicTimeline />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/llm-model-price"
                  element={
                    <PrivateRoute>
                      <PricingCharts />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/drugs-list"
                  element={
                    <PrivateRoute>
                      <DrugsList />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/handwriting"
                  element={
                    <PrivateRoute>
                      <HandwriteGen />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/image-base64"
                  element={
                    <PrivateRoute>
                      <ImageBase64Converter />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/quote-card"
                  element={
                    <PrivateRoute>
                      <QuoteCard />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/latex-to-image"
                  element={
                    <PrivateRoute>
                      <LatexToImage />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/text-diff"
                  element={
                    <PrivateRoute>
                      <TextDiff />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/subtitle-to-image"
                  element={
                    <PrivateRoute>
                      <SubtitleGenerator />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/image-compressor"
                  element={
                    <PrivateRoute>
                      <ImageCompressor />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/image-watermark"
                  element={
                    <PrivateRoute>
                      <ImageWatermark />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/text-behind-image"
                  element={
                    <PrivateRoute>
                      <TextBehindImage />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/background-remover"
                  element={
                    <PrivateRoute>
                      <BackgroundRemover />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/id-photo-maker"
                  element={
                    <PrivateRoute>
                      <IDPhotoMaker />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/deepseek-timeline"
                  element={
                    <PrivateRoute>
                      <DeepSeekTimeline />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/wechat-formatter"
                  element={
                    <PrivateRoute>
                      <WechatFormatter />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/image-annotator"
                  element={
                    <PrivateRoute>
                      <ImageAnnotator />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/ai-timeline"
                  element={
                    <PrivateRoute>
                      <AITimelinePage />
                    </PrivateRoute>
                  }
                />
                <Route
                  path="/perpetual-calendar"
                  element={
                    <PrivateRoute>
                      <PerpetualCalendar />
                    </PrivateRoute>
                  }
                />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Suspense>
          </main>
        </div>
      </div>
      <Footer />
    </div>
  );
}

export default App;
