import { Suspense, lazy } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router";
import AppLayout from "./layout/AppLayout";
import { ScrollToTop } from "./components/common/ScrollToTop";
import ProtectedRoute from "./components/auth/ProtectedRoute";
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
import LoadingStateMonitor from "./components/common/LoadingStateMonitor";

// Auth pages - loaded immediately (needed for login)
import SignIn from "./pages/AuthPages/SignIn";
import SignUp from "./pages/AuthPages/SignUp";
import NotFound from "./pages/OtherPage/NotFound";

// Lazy load all other pages - only loads when navigated to
const Home = lazy(() => import("./pages/Dashboard/Home"));

// Planner Module - Lazy loaded
const PlannerDashboard = lazy(() => import("./pages/Planner/Dashboard"));
const Keywords = lazy(() => import("./pages/Planner/Keywords"));
const Clusters = lazy(() => import("./pages/Planner/Clusters"));
const Ideas = lazy(() => import("./pages/Planner/Ideas"));
const KeywordOpportunities = lazy(() => import("./pages/Planner/KeywordOpportunities"));

// Writer Module - Lazy loaded
const WriterDashboard = lazy(() => import("./pages/Writer/Dashboard"));
const Tasks = lazy(() => import("./pages/Writer/Tasks"));
const Content = lazy(() => import("./pages/Writer/Content"));
const Drafts = lazy(() => import("./pages/Writer/Drafts"));
const Images = lazy(() => import("./pages/Writer/Images"));
const Published = lazy(() => import("./pages/Writer/Published"));

// Thinker Module - Lazy loaded
const ThinkerDashboard = lazy(() => import("./pages/Thinker/Dashboard"));
const Prompts = lazy(() => import("./pages/Thinker/Prompts"));
const AuthorProfiles = lazy(() => import("./pages/Thinker/AuthorProfiles"));
const ThinkerProfile = lazy(() => import("./pages/Thinker/Profile"));
const Strategies = lazy(() => import("./pages/Thinker/Strategies"));
const ImageTesting = lazy(() => import("./pages/Thinker/ImageTesting"));

// Billing Module - Lazy loaded
const Credits = lazy(() => import("./pages/Billing/Credits"));
const Transactions = lazy(() => import("./pages/Billing/Transactions"));
const Usage = lazy(() => import("./pages/Billing/Usage"));

// Reference Data - Lazy loaded
const SeedKeywords = lazy(() => import("./pages/Reference/SeedKeywords"));
const ReferenceIndustries = lazy(() => import("./pages/Reference/Industries"));

// Other Pages - Lazy loaded
const Analytics = lazy(() => import("./pages/Analytics"));
const Schedules = lazy(() => import("./pages/Schedules"));

// Settings - Lazy loaded
const GeneralSettings = lazy(() => import("./pages/Settings/General"));
const Users = lazy(() => import("./pages/Settings/Users"));
const Subscriptions = lazy(() => import("./pages/Settings/Subscriptions"));
const SystemSettings = lazy(() => import("./pages/Settings/System"));
const AccountSettings = lazy(() => import("./pages/Settings/Account"));
const ModuleSettings = lazy(() => import("./pages/Settings/Modules"));
const AISettings = lazy(() => import("./pages/Settings/AI"));
const Plans = lazy(() => import("./pages/Settings/Plans"));
const Industries = lazy(() => import("./pages/Settings/Industries"));
const Status = lazy(() => import("./pages/Settings/Status"));
const Integration = lazy(() => import("./pages/Settings/Integration"));
const Sites = lazy(() => import("./pages/Settings/Sites"));
const ImportExport = lazy(() => import("./pages/Settings/ImportExport"));

// Help - Lazy loaded
const Help = lazy(() => import("./pages/Help/Help"));
const Docs = lazy(() => import("./pages/Help/Docs"));
const SystemTesting = lazy(() => import("./pages/Help/SystemTesting"));
const FunctionTesting = lazy(() => import("./pages/Help/FunctionTesting"));

// Components - Lazy loaded
const Components = lazy(() => import("./pages/Components"));

// UI Elements - Lazy loaded (rarely used)
const Alerts = lazy(() => import("./pages/Settings/UiElements/Alerts"));
const Avatars = lazy(() => import("./pages/Settings/UiElements/Avatars"));
const Badges = lazy(() => import("./pages/Settings/UiElements/Badges"));
const Breadcrumb = lazy(() => import("./pages/Settings/UiElements/Breadcrumb"));
const Buttons = lazy(() => import("./pages/Settings/UiElements/Buttons"));
const ButtonsGroup = lazy(() => import("./pages/Settings/UiElements/ButtonsGroup"));
const Cards = lazy(() => import("./pages/Settings/UiElements/Cards"));
const Carousel = lazy(() => import("./pages/Settings/UiElements/Carousel"));
const Dropdowns = lazy(() => import("./pages/Settings/UiElements/Dropdowns"));
const ImagesUI = lazy(() => import("./pages/Settings/UiElements/Images"));
const Links = lazy(() => import("./pages/Settings/UiElements/Links"));
const List = lazy(() => import("./pages/Settings/UiElements/List"));
const Modals = lazy(() => import("./pages/Settings/UiElements/Modals"));
const Notifications = lazy(() => import("./pages/Settings/UiElements/Notifications"));
const Pagination = lazy(() => import("./pages/Settings/UiElements/Pagination"));
const Popovers = lazy(() => import("./pages/Settings/UiElements/Popovers"));
const PricingTable = lazy(() => import("./pages/Settings/UiElements/PricingTable"));
const Progressbar = lazy(() => import("./pages/Settings/UiElements/Progressbar"));
const Ribbons = lazy(() => import("./pages/Settings/UiElements/Ribbons"));
const Spinners = lazy(() => import("./pages/Settings/UiElements/Spinners"));
const Tabs = lazy(() => import("./pages/Settings/UiElements/Tabs"));
const Tooltips = lazy(() => import("./pages/Settings/UiElements/Tooltips"));
const Videos = lazy(() => import("./pages/Settings/UiElements/Videos"));

export default function App() {
  return (
    <>
      <GlobalErrorDisplay />
      <LoadingStateMonitor />
      <Router>
        <ScrollToTop />
        <Routes>
          {/* Auth Routes - Public */}
          <Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />

          {/* Protected Routes - Require Authentication */}
          <Route
            element={
              <ProtectedRoute>
                <AppLayout />
              </ProtectedRoute>
            }
          >
            {/* Dashboard */}
            <Route index path="/" element={
              <Suspense fallback={null}>
                <Home />
              </Suspense>
            } />

            {/* Planner Module */}
            <Route path="/planner" element={
              <Suspense fallback={null}>
                <PlannerDashboard />
              </Suspense>
            } />
            <Route path="/planner/keywords" element={
              <Suspense fallback={null}>
                <Keywords />
              </Suspense>
            } />
            <Route path="/planner/clusters" element={
              <Suspense fallback={null}>
                <Clusters />
              </Suspense>
            } />
            <Route path="/planner/ideas" element={
              <Suspense fallback={null}>
                <Ideas />
              </Suspense>
            } />

            {/* Writer Module */}
            <Route path="/writer" element={
              <Suspense fallback={null}>
                  <WriterDashboard />
                </Suspense>
            } />
            <Route path="/writer/tasks" element={
              <Suspense fallback={null}>
                  <Tasks />
                </Suspense>
            } />
            <Route path="/writer/content" element={
              <Suspense fallback={null}>
                  <Content />
                </Suspense>
            } />
            <Route path="/writer/drafts" element={<Navigate to="/writer/content" replace />} />
            <Route path="/writer/images" element={
              <Suspense fallback={null}>
                  <Images />
                </Suspense>
            } />
            <Route path="/writer/published" element={
              <Suspense fallback={null}>
                  <Published />
                </Suspense>
            } />

            {/* Thinker Module */}
            <Route path="/thinker" element={
              <Suspense fallback={null}>
                  <ThinkerDashboard />
                </Suspense>
            } />
            <Route path="/thinker/prompts" element={
              <Suspense fallback={null}>
                  <Prompts />
                </Suspense>
            } />
            <Route path="/thinker/author-profiles" element={
              <Suspense fallback={null}>
                  <AuthorProfiles />
                </Suspense>
            } />
            <Route path="/thinker/profile" element={
              <Suspense fallback={null}>
                  <ThinkerProfile />
                </Suspense>
            } />
            <Route path="/thinker/strategies" element={
              <Suspense fallback={null}>
                  <Strategies />
                </Suspense>
            } />
            <Route path="/thinker/image-testing" element={
              <Suspense fallback={null}>
                  <ImageTesting />
                </Suspense>
            } />

            {/* Billing Module */}
            <Route path="/billing/credits" element={
              <Suspense fallback={null}>
                  <Credits />
                </Suspense>
            } />
            <Route path="/billing/transactions" element={
              <Suspense fallback={null}>
                  <Transactions />
                </Suspense>
            } />
            <Route path="/billing/usage" element={
              <Suspense fallback={null}>
                  <Usage />
                </Suspense>
            } />

            {/* Reference Data */}
            <Route path="/reference/seed-keywords" element={
              <Suspense fallback={null}>
                  <SeedKeywords />
                </Suspense>
            } />
            <Route path="/planner/keyword-opportunities" element={
              <Suspense fallback={null}>
                  <KeywordOpportunities />
                </Suspense>
            } />
            <Route path="/reference/industries" element={
              <Suspense fallback={null}>
                  <ReferenceIndustries />
                </Suspense>
            } />

            {/* Other Pages */}
            <Route path="/analytics" element={
              <Suspense fallback={null}>
                  <Analytics />
                </Suspense>
            } />
            <Route path="/schedules" element={
              <Suspense fallback={null}>
                  <Schedules />
                </Suspense>
            } />

            {/* Settings */}
            <Route path="/settings" element={
              <Suspense fallback={null}>
                  <GeneralSettings />
                </Suspense>
            } />
            <Route path="/settings/users" element={
              <Suspense fallback={null}>
                  <Users />
                </Suspense>
            } />
            <Route path="/settings/subscriptions" element={
              <Suspense fallback={null}>
                  <Subscriptions />
                </Suspense>
            } />
            <Route path="/settings/system" element={
              <Suspense fallback={null}>
                  <SystemSettings />
                </Suspense>
            } />
            <Route path="/settings/account" element={
              <Suspense fallback={null}>
                  <AccountSettings />
                </Suspense>
            } />
            <Route path="/settings/modules" element={
              <Suspense fallback={null}>
                  <ModuleSettings />
                </Suspense>
            } />
            <Route path="/settings/ai" element={
              <Suspense fallback={null}>
                  <AISettings />
                </Suspense>
            } />
            <Route path="/settings/plans" element={
              <Suspense fallback={null}>
                  <Plans />
                </Suspense>
            } />
            <Route path="/settings/industries" element={
              <Suspense fallback={null}>
                  <Industries />
                </Suspense>
            } />
            <Route path="/settings/status" element={
              <Suspense fallback={null}>
                  <Status />
                </Suspense>
            } />
            <Route path="/settings/integration" element={
              <Suspense fallback={null}>
                  <Integration />
                </Suspense>
            } />
            <Route path="/settings/sites" element={
              <Suspense fallback={null}>
                  <Sites />
                </Suspense>
            } />
            <Route path="/settings/import-export" element={
              <Suspense fallback={null}>
                  <ImportExport />
                </Suspense>
            } />

            {/* Help */}
            <Route path="/help" element={
              <Suspense fallback={null}>
                  <Help />
                </Suspense>
            } />
            <Route path="/help/docs" element={
              <Suspense fallback={null}>
                  <Docs />
                </Suspense>
            } />
            <Route path="/help/system-testing" element={
              <Suspense fallback={null}>
                  <SystemTesting />
                </Suspense>
            } />
            <Route path="/help/function-testing" element={
              <Suspense fallback={null}>
                  <FunctionTesting />
                </Suspense>
            } />

            {/* UI Elements */}
            <Route path="/ui-elements/alerts" element={
              <Suspense fallback={null}>
                  <Alerts />
                </Suspense>
            } />
            <Route path="/ui-elements/avatars" element={
              <Suspense fallback={null}>
                  <Avatars />
                </Suspense>
            } />
            <Route path="/ui-elements/badges" element={
              <Suspense fallback={null}>
                  <Badges />
                </Suspense>
            } />
            <Route path="/ui-elements/breadcrumb" element={
              <Suspense fallback={null}>
                  <Breadcrumb />
                </Suspense>
            } />
            <Route path="/ui-elements/buttons" element={
              <Suspense fallback={null}>
                  <Buttons />
                </Suspense>
            } />
            <Route path="/ui-elements/buttons-group" element={
              <Suspense fallback={null}>
                  <ButtonsGroup />
                </Suspense>
            } />
            <Route path="/ui-elements/cards" element={
              <Suspense fallback={null}>
                  <Cards />
                </Suspense>
            } />
            <Route path="/ui-elements/carousel" element={
              <Suspense fallback={null}>
                  <Carousel />
                </Suspense>
            } />
            <Route path="/ui-elements/dropdowns" element={
              <Suspense fallback={null}>
                  <Dropdowns />
                </Suspense>
            } />
            <Route path="/ui-elements/images" element={
              <Suspense fallback={null}>
                  <ImagesUI />
                </Suspense>
            } />
            <Route path="/ui-elements/links" element={
              <Suspense fallback={null}>
                  <Links />
                </Suspense>
            } />
            <Route path="/ui-elements/list" element={
              <Suspense fallback={null}>
                  <List />
                </Suspense>
            } />
            <Route path="/ui-elements/modals" element={
              <Suspense fallback={null}>
                  <Modals />
                </Suspense>
            } />
            <Route path="/ui-elements/notifications" element={
              <Suspense fallback={null}>
                  <Notifications />
                </Suspense>
            } />
            <Route path="/ui-elements/pagination" element={
              <Suspense fallback={null}>
                  <Pagination />
                </Suspense>
            } />
            <Route path="/ui-elements/popovers" element={
              <Suspense fallback={null}>
                  <Popovers />
                </Suspense>
            } />
            <Route path="/ui-elements/pricing-table" element={
              <Suspense fallback={null}>
                  <PricingTable />
                </Suspense>
            } />
            <Route path="/ui-elements/progressbar" element={
              <Suspense fallback={null}>
                  <Progressbar />
                </Suspense>
            } />
            <Route path="/ui-elements/ribbons" element={
              <Suspense fallback={null}>
                  <Ribbons />
                </Suspense>
            } />
            <Route path="/ui-elements/spinners" element={
              <Suspense fallback={null}>
                  <Spinners />
                </Suspense>
            } />
            <Route path="/ui-elements/tabs" element={
              <Suspense fallback={null}>
                  <Tabs />
                </Suspense>
            } />
            <Route path="/ui-elements/tooltips" element={
              <Suspense fallback={null}>
                  <Tooltips />
                </Suspense>
            } />
            <Route path="/ui-elements/videos" element={
              <Suspense fallback={null}>
                  <Videos />
                </Suspense>
            } />
            
            {/* Components (Showcase Page) */}
            <Route path="/components" element={
              <Suspense fallback={null}>
                  <Components />
                </Suspense>
            } />
            
            {/* Redirect old notification route */}
            <Route path="/notifications" element={
              <Suspense fallback={null}>
                  <Notifications />
                </Suspense>
            } />
          </Route>

          {/* Fallback Route */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </Router>
    </>
  );
}