import { Suspense, lazy, useEffect } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";
import AppLayout from "./layout/AppLayout";
import { ScrollToTop } from "./components/common/ScrollToTop";
import ProtectedRoute from "./components/auth/ProtectedRoute";
import ModuleGuard from "./components/common/ModuleGuard";
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
import { useAuthStore } from "./store/authStore";

// 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 ClusterDetail = lazy(() => import("./pages/Planner/ClusterDetail"));
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 ContentView = lazy(() => import("./pages/Writer/ContentView"));
const Drafts = lazy(() => import("./pages/Writer/Drafts"));
const Images = lazy(() => import("./pages/Writer/Images"));
const Review = lazy(() => import("./pages/Writer/Review"));
const Published = lazy(() => import("./pages/Writer/Published"));

// Linker Module - Lazy loaded
const LinkerDashboard = lazy(() => import("./pages/Linker/Dashboard"));
const LinkerContentList = lazy(() => import("./pages/Linker/ContentList"));

// Optimizer Module - Lazy loaded
const OptimizerDashboard = lazy(() => import("./pages/Optimizer/Dashboard"));
const OptimizerContentSelector = lazy(() => import("./pages/Optimizer/ContentSelector"));
const AnalysisPreview = lazy(() => import("./pages/Optimizer/AnalysisPreview"));

// 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"));

// Setup Pages - Lazy loaded
const IndustriesSectorsKeywords = lazy(() => import("./pages/Setup/IndustriesSectorsKeywords"));

// Other Pages - Lazy loaded
const AutomationDashboard = lazy(() => import("./pages/Automation/Dashboard"));
const AutomationRules = lazy(() => import("./pages/Automation/Rules"));
const AutomationTasks = lazy(() => import("./pages/Automation/Tasks"));

// 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 ApiMonitor = lazy(() => import("./pages/Settings/ApiMonitor"));
const DebugStatus = lazy(() => import("./pages/Settings/DebugStatus"));
const Integration = lazy(() => import("./pages/Settings/Integration"));
const Publishing = lazy(() => import("./pages/Settings/Publishing"));
const Sites = lazy(() => import("./pages/Settings/Sites"));
const ImportExport = lazy(() => import("./pages/Settings/ImportExport"));

// Sites - Lazy loaded
const SiteList = lazy(() => import("./pages/Sites/List"));
const SiteManage = lazy(() => import("./pages/Sites/Manage"));
const SiteDashboard = lazy(() => import("./pages/Sites/Dashboard"));
const SiteContent = lazy(() => import("./pages/Sites/Content"));
const PageManager = lazy(() => import("./pages/Sites/PageManager"));
const PostEditor = lazy(() => import("./pages/Sites/PostEditor"));
const SiteSettings = lazy(() => import("./pages/Sites/Settings"));
const SyncDashboard = lazy(() => import("./pages/Sites/SyncDashboard"));
const DeploymentPanel = lazy(() => import("./pages/Sites/DeploymentPanel"));

// 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() {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
  const refreshUser = useAuthStore((state) => state.refreshUser);
  const logout = useAuthStore((state) => state.logout);

  useEffect(() => {
    if (!isAuthenticated) {
      return;
    }

    refreshUser().catch((error) => {
      console.warn('Session validation failed:', error);
      logout();
    });
  }, [isAuthenticated, refreshUser, logout]);

  return (
    <>
      <GlobalErrorDisplay />
      <LoadingStateMonitor />
      <Router>
        <HelmetProvider>
          <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 - Redirect dashboard to keywords */}
            <Route path="/planner" element={<Navigate to="/planner/keywords" replace />} />
            <Route path="/planner/keywords" element={
              <Suspense fallback={null}>
                <ModuleGuard module="planner">
                  <Keywords />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/planner/clusters" element={
              <Suspense fallback={null}>
                <ModuleGuard module="planner">
                  <Clusters />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/planner/clusters/:id" element={
              <Suspense fallback={null}>
                <ModuleGuard module="planner">
                  <ClusterDetail />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/planner/ideas" element={
              <Suspense fallback={null}>
                <ModuleGuard module="planner">
                  <Ideas />
                </ModuleGuard>
              </Suspense>
            } />

            {/* Writer Module - Redirect dashboard to tasks */}
            <Route path="/writer" element={<Navigate to="/writer/tasks" replace />} />
            <Route path="/writer/tasks" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <Tasks />
                </ModuleGuard>
              </Suspense>
            } />
            {/* Writer Content Routes - Order matters: list route must come before detail route */}
            <Route path="/writer/content" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <Content />
                </ModuleGuard>
              </Suspense>
            } />
            {/* Content detail view - matches /writer/content/:id (e.g., /writer/content/10) */}
            <Route path="/writer/content/:id" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <ContentView />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/writer/drafts" element={<Navigate to="/writer/content" replace />} />
            <Route path="/writer/images" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <Images />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/writer/review" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <Review />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/writer/published" element={
              <Suspense fallback={null}>
                <ModuleGuard module="writer">
                  <Published />
                </ModuleGuard>
              </Suspense>
            } />


            {/* Linker Module - Redirect dashboard to content */}
            <Route path="/linker" element={<Navigate to="/linker/content" replace />} />
            <Route path="/linker/content" element={
              <Suspense fallback={null}>
                <ModuleGuard module="linker">
                  <LinkerContentList />
                </ModuleGuard>
              </Suspense>
            } />

            {/* Optimizer Module - Redirect dashboard to content */}
            <Route path="/optimizer" element={<Navigate to="/optimizer/content" replace />} />
            <Route path="/optimizer/content" element={
              <Suspense fallback={null}>
                <ModuleGuard module="optimizer">
                  <OptimizerContentSelector />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/optimizer/analyze/:id" element={
              <Suspense fallback={null}>
                <ModuleGuard module="optimizer">
                  <AnalysisPreview />
                </ModuleGuard>
              </Suspense>
            } />

            {/* Thinker Module */}
            {/* Thinker Module - Redirect dashboard to prompts */}
            <Route path="/thinker" element={<Navigate to="/thinker/prompts" replace />} />
            <Route path="/thinker/prompts" element={
              <Suspense fallback={null}>
                <ModuleGuard module="thinker">
                  <Prompts />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/thinker/author-profiles" element={
              <Suspense fallback={null}>
                <ModuleGuard module="thinker">
                  <AuthorProfiles />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/thinker/profile" element={
              <Suspense fallback={null}>
                <ModuleGuard module="thinker">
                  <ThinkerProfile />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/thinker/strategies" element={
              <Suspense fallback={null}>
                <ModuleGuard module="thinker">
                  <Strategies />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/thinker/image-testing" element={
              <Suspense fallback={null}>
                <ModuleGuard module="thinker">
                  <ImageTesting />
                </ModuleGuard>
              </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>
            } />

            {/* Setup Pages */}
            <Route path="/setup/industries-sectors-keywords" element={
              <Suspense fallback={null}>
                  <IndustriesSectorsKeywords />
                </Suspense>
            } />

            {/* Automation Module - Redirect dashboard to rules */}
            <Route path="/automation" element={<Navigate to="/automation/rules" replace />} />
            <Route path="/automation/rules" element={
              <Suspense fallback={null}>
                <ModuleGuard module="automation">
                  <AutomationRules />
                </ModuleGuard>
              </Suspense>
            } />
            <Route path="/automation/tasks" element={
              <Suspense fallback={null}>
                <ModuleGuard module="automation">
                  <AutomationTasks />
                </ModuleGuard>
              </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/api-monitor" element={
              <Suspense fallback={null}>
                  <ApiMonitor />
                </Suspense>
            } />
            <Route path="/settings/debug-status" element={
              <Suspense fallback={null}>
                  <DebugStatus />
                </Suspense>
            } />
            <Route path="/settings/integration" element={
              <Suspense fallback={null}>
                  <Integration />
                </Suspense>
            } />
            <Route path="/settings/publishing" element={
              <Suspense fallback={null}>
                  <Publishing />
                </Suspense>
            } />
            <Route path="/settings/sites" element={
              <Suspense fallback={null}>
                  <Sites />
                </Suspense>
            } />
            <Route path="/settings/import-export" element={
              <Suspense fallback={null}>
                  <ImportExport />
                </Suspense>
            } />

            {/* Sites Management */}
            <Route path="/sites" element={
              <Suspense fallback={null}>
                <SiteList />
              </Suspense>
            } />
            <Route path="/sites/manage" element={
              <Suspense fallback={null}>
                <SiteManage />
              </Suspense>
            } />
            <Route path="/sites/:id" element={
              <Suspense fallback={null}>
                <SiteDashboard />
              </Suspense>
            } />
            <Route path="/sites/:id/pages" element={
              <Suspense fallback={null}>
                <PageManager />
              </Suspense>
            } />
            <Route path="/sites/:id/pages/new" element={
              <Suspense fallback={null}>
                <PageManager />
              </Suspense>
            } />
            <Route path="/sites/:id/pages/:pageId/edit" element={
              <Suspense fallback={null}>
                <PageManager />
              </Suspense>
            } />
            <Route path="/sites/:id/content" element={
              <Suspense fallback={null}>
                <SiteContent />
              </Suspense>
            } />
            <Route path="/sites/:id/settings" element={
              <Suspense fallback={null}>
                <SiteSettings />
              </Suspense>
            } />
            <Route path="/sites/:id/sync" element={
              <Suspense fallback={null}>
                <SyncDashboard />
              </Suspense>
            } />
            <Route path="/sites/:id/deploy" element={
              <Suspense fallback={null}>
                <DeploymentPanel />
              </Suspense>
            } />
            <Route path="/sites/:id/posts/:postId" element={
              <Suspense fallback={null}>
                <PostEditor />
              </Suspense>
            } />
            <Route path="/sites/:id/posts/:postId/edit" element={
              <Suspense fallback={null}>
                <PostEditor />
              </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>
        </HelmetProvider>
      </Router>
    </>
  );
}