import { createContext, ReactNode, useContext } from "react";
import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { AuthProvider } from "@/hooks/use-auth";
import { ErrorBoundary } from "@/components/error-boundary";
import { NotificationProvider } from "@/components/notification/notification-provider";
import { ThemeProvider } from "@/components/theme-provider";
import { LanguageProvider, useLanguage } from "@/hooks/use-language";
import { SettingsProvider } from "@/hooks/use-settings";
import { ChatBot } from "@/components/chat/chat-bot";
import { Suspense, lazy } from "react";
import { Loader2 } from "lucide-react";

// Lazy load all pages
const HomePage = lazy(() => import("@/pages/home-page"));
const AuthPage = lazy(() => import("@/pages/auth-page"));
const SpeakersPage = lazy(() => import("@/pages/speakers-page"));
const SpeakerDetailPage = lazy(() => import("@/pages/speaker-detail-page"));
const GalleryPage = lazy(() => import("@/pages/gallery-page"));
const NewsListPage = lazy(() => import("@/pages/news-page"));
const SessionsPage = lazy(() => import("@/pages/sessions-page"));
const EventsPage = lazy(() => import("@/pages/manage/events-page"));
const ManageSessionsPage = lazy(() => import("@/pages/manage/sessions-page"));
const ManageSpeakersPage = lazy(() => import("@/pages/manage/speakers-page"));
const NewsPage = lazy(() => import("@/pages/manage/news-page"));
const MediaPage = lazy(() => import("@/pages/manage/media-page"));
const UsersPage = lazy(() => import("@/pages/manage/users-page"));
const SettingsPage = lazy(() => import("@/pages/manage/settings-page"));
const QuestionsPage = lazy(() => import("@/pages/manage/questions-page"));
const StreamTestPage = lazy(() => import("@/pages/stream-test-page"));
const NotificationsPage = lazy(() => import("@/pages/manage/notifications-page"));
const ApiDocsPage = lazy(() => import("@/pages/manage/api-docs-page"));
const NotFound = lazy(() => import("@/pages/not-found"));
const PrivacyPage = lazy(() => import("@/pages/privacy-page")); // Add privacy page import

import { ProtectedRoute } from "./lib/protected-route";
import Navbar from "./components/layout/navbar";
import SessionDetailPage from "@/pages/session-detail-page";
import TranscriptionsPage from "@/pages/manage/transcriptions-page";
import PollsPage from "@/pages/manage/polls-page";
import PollSubmitPage from "@/pages/poll-submit-page";
import PollResultsPage from "@/pages/poll-results-page";
import LiveStreamsPage from "@/pages/live-streams-page";
import LiveStreamSinglePage from "@/pages/live-stream-single-page";
import NewsSinglePage from "@/pages/news-single-page";
import ActivateAccountPage from "@/pages/activate-account-page";

const LoadingFallback = () => (
  <div className="flex items-center justify-center min-h-[50vh]">
    <Loader2 className="h-8 w-8 animate-spin text-border" />
  </div>
);

function Router() {
  const { language } = useLanguage();

  return (
    <div dir={language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-background">
      <Navbar />
      <main className="container mx-auto px-4 py-8">
        <ErrorBoundary>
          <Suspense fallback={<LoadingFallback />}>
            <Switch>
              <Route path="/activate-account/:token" component={ActivateAccountPage} />
              <Route path="/auth" component={AuthPage} />
              <Route path="/privacy" component={PrivacyPage} /> {/* Add privacy route */}
              <ProtectedRoute path="/" component={HomePage} />
              <ProtectedRoute path="/speakers" component={SpeakersPage} />
              <ProtectedRoute path="/speakers/:id" component={SpeakerDetailPage} />
              <ProtectedRoute path="/gallery" component={GalleryPage} />
              <Route path="/news" component={NewsListPage} />
              <Route path="/news/:id" component={NewsSinglePage} />
              <ProtectedRoute path="/sessions" component={SessionsPage} />
              <Route path="/live-streams" component={LiveStreamsPage} />
              <Route path="/live-streams/:id" component={LiveStreamSinglePage} />
              <ProtectedRoute path="/sessions/:id" component={SessionDetailPage} />
              <ProtectedRoute path="/manage/users" component={UsersPage} />
              <ProtectedRoute path="/manage/events" component={EventsPage} />
              <ProtectedRoute path="/manage/sessions" component={ManageSessionsPage} />
              <ProtectedRoute path="/manage/speakers" component={ManageSpeakersPage} />
              <ProtectedRoute path="/manage/news" component={NewsPage} />
              <ProtectedRoute path="/manage/media" component={MediaPage} />
              <ProtectedRoute path="/manage/questions" component={QuestionsPage} />
              <ProtectedRoute path="/manage/settings" component={SettingsPage} />
              <ProtectedRoute path="/manage/transcriptions" component={TranscriptionsPage} />
              <ProtectedRoute path="/manage/polls" component={PollsPage} />
              <ProtectedRoute path="/manage/notifications" component={NotificationsPage} />
              <ProtectedRoute path="/manage/api-docs" component={ApiDocsPage} />
              <Route path="/polls/:id/submit" component={PollSubmitPage} />
              <Route path="/polls/:id/results" component={PollResultsPage} />
              <ProtectedRoute path="/stream-test" component={StreamTestPage} />
              <Route component={NotFound} />
            </Switch>
          </Suspense>
        </ErrorBoundary>
      </main>
      <ChatBot />
      <Toaster />
    </div>
  );
}

export default function App() {
  return (
    <ErrorBoundary>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider>
          <LanguageProvider>
            <SettingsProvider>
              <AuthProvider>
                <NotificationProvider>
                  <Router />
                </NotificationProvider>
              </AuthProvider>
            </SettingsProvider>
          </LanguageProvider>
        </ThemeProvider>
      </QueryClientProvider>
    </ErrorBoundary>
  );
}