import { Suspense, lazy, useEffect } from "react";
import { 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 AdminRoute from "./components/auth/AdminRoute";
import GlobalErrorDisplay from "./components/common/GlobalErrorDisplay";
import LoadingStateMonitor from "./components/common/LoadingStateMonitor";
import { PageProvider } from "./context/PageContext";
import { useAuthStore } from "./store/authStore";
import { useModuleStore } from "./store/moduleStore";

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

// Legal pages - Public
const Terms = lazy(() => import("./pages/legal/Terms"));
const Privacy = lazy(() => import("./pages/legal/Privacy"));

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

// 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 Approved = lazy(() => import("./pages/Writer/Approved"));

// Automation Module - Lazy loaded
const AutomationPage = lazy(() => import("./pages/Automation/AutomationPage"));

// 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"));
const CreditsAndBilling = lazy(() => import("./pages/Settings/CreditsAndBilling"));
const PurchaseCreditsPage = lazy(() => import("./pages/account/PurchaseCreditsPage"));
const PlansAndBillingPage = lazy(() => import("./pages/account/PlansAndBillingPage"));
const AccountSettingsPage = lazy(() => import("./pages/account/AccountSettingsPage"));
// TeamManagementPage - Now integrated as tab in AccountSettingsPage
const UsageAnalyticsPage = lazy(() => import("./pages/account/UsageAnalyticsPage"));
const ContentSettingsPage = lazy(() => import("./pages/account/ContentSettingsPage"));
const NotificationsPage = lazy(() => import("./pages/account/NotificationsPage"));

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

// Settings - Lazy loaded
const GeneralSettings = lazy(() => import("./pages/Settings/General"));
// ProfileSettingsPage - Now integrated as tab in AccountSettingsPage
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 AISettings = lazy(() => import("./pages/Settings/AI"));
const Plans = lazy(() => import("./pages/Settings/Plans"));
const Industries = lazy(() => import("./pages/Settings/Industries"));
const Integration = lazy(() => import("./pages/Settings/Integration"));
const Publishing = lazy(() => import("./pages/Settings/Publishing"));
const Sites = lazy(() => import("./pages/Settings/Sites"));
// ImportExport - Removed from UI, individual pages have their own import/export

// Sites - Lazy loaded
const SiteList = lazy(() => import("./pages/Sites/List"));
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"));
const PublishingQueue = lazy(() => import("./pages/Sites/PublishingQueue"));

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

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



export default function App() {
  const { isAuthenticated } = useAuthStore();
  const { loadModuleSettings } = useModuleStore();

  // Load global module settings immediately on mount (public endpoint, no auth required)
  useEffect(() => {
    loadModuleSettings();
  }, [loadModuleSettings]);

  return (
    <PageProvider>
      <GlobalErrorDisplay />
      <LoadingStateMonitor />
      <HelmetProvider>
        <ScrollToTop />
        {/* CRITICAL FIX: Move Suspense OUTSIDE Routes to prevent Router context loss during HMR */}
        <Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div className="text-lg">Loading...</div></div>}>
        <Routes>
          {/* Auth Routes - Public */}
          <Route path="/signin" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/payment" element={<Payment />} />
          
          {/* Legal Pages - Public */}
          <Route path="/terms" element={<Terms />} />
          <Route path="/privacy" element={<Privacy />} />

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

            {/* Planner Module - Redirect dashboard to keywords */}
            <Route path="/planner" element={<Navigate to="/planner/keywords" replace />} />
            <Route path="/planner/keywords" element={<Keywords />} />
            <Route path="/planner/clusters" element={<Clusters />} />
            <Route path="/planner/clusters/:id" element={<ClusterDetail />} />
            <Route path="/planner/ideas" element={<Ideas />} />

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

            {/* Automation Module */}
            <Route path="/automation" element={<AutomationPage />} />

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

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

            {/* Thinker Module - Admin Only (Prompts & AI Configuration) */}
            <Route path="/thinker" element={<AdminRoute><Navigate to="/thinker/prompts" replace /></AdminRoute>} />
            <Route path="/thinker/prompts" element={<AdminRoute><Prompts /></AdminRoute>} />
            <Route path="/thinker/author-profiles" element={<AdminRoute><AuthorProfiles /></AdminRoute>} />
            <Route path="/thinker/profile" element={<AdminRoute><ThinkerProfile /></AdminRoute>} />
            <Route path="/thinker/strategies" element={<AdminRoute><Strategies /></AdminRoute>} />
            <Route path="/thinker/image-testing" element={<AdminRoute><ImageTesting /></AdminRoute>} />

            {/* Billing Module */}
            <Route path="/billing" element={<Navigate to="/billing/overview" replace />} />
            <Route path="/billing/overview" element={<CreditsAndBilling />} />
            <Route path="/billing/credits" element={<Credits />} />
            <Route path="/billing/transactions" element={<Transactions />} />
            <Route path="/billing/usage" element={<Usage />} />

            {/* Account Section - Billing & Management Pages */}
            {/* Notifications */}
            <Route path="/account/notifications" element={<NotificationsPage />} />
            
            {/* Account Settings - with sub-routes for sidebar navigation */}
            <Route path="/account/settings" element={<AccountSettingsPage />} />
            <Route path="/account/settings/profile" element={<AccountSettingsPage />} />
            <Route path="/account/settings/team" element={<AccountSettingsPage />} />
            {/* Legacy redirect - Team is now a tab in Account Settings */}
            <Route path="/account/team" element={<Navigate to="/account/settings/team" replace />} />
            
            {/* Plans & Billing - with sub-routes for sidebar navigation */}
            <Route path="/account/plans" element={<PlansAndBillingPage />} />
            <Route path="/account/plans/upgrade" element={<PlansAndBillingPage />} />
            <Route path="/account/plans/history" element={<PlansAndBillingPage />} />
            <Route path="/account/purchase-credits" element={<PurchaseCreditsPage />} />
            
            {/* Usage - with sub-routes for sidebar navigation */}
            <Route path="/account/usage" element={<UsageAnalyticsPage />} />
            <Route path="/account/usage/credits" element={<UsageAnalyticsPage />} />
            <Route path="/account/usage/activity" element={<UsageAnalyticsPage />} />
            
            {/* Content Settings - with sub-routes for sidebar navigation */}
            <Route path="/account/content-settings" element={<ContentSettingsPage />} />
            <Route path="/account/content-settings/publishing" element={<ContentSettingsPage />} />
            <Route path="/account/content-settings/images" element={<ContentSettingsPage />} />
            
            {/* Reference Data */}
            <Route path="/reference/seed-keywords" element={<SeedKeywords />} />
            <Route path="/reference/industries" element={<ReferenceIndustries />} />

            {/* Setup Pages */}
            <Route path="/setup/add-keywords" element={<IndustriesSectorsKeywords />} />
            {/* Legacy redirect */}
            <Route path="/setup/industries-sectors-keywords" element={<Navigate to="/setup/add-keywords" replace />} />

            {/* Settings */}
            {/* Legacy redirect - Profile is now a tab in Account Settings */}
            <Route path="/settings/profile" element={<Navigate to="/account/settings" replace />} />
            <Route path="/settings" element={<GeneralSettings />} />
            <Route path="/settings/users" element={<Users />} />
            <Route path="/settings/subscriptions" element={<Subscriptions />} />
            <Route path="/settings/system" element={<SystemSettings />} />
            <Route path="/settings/account" element={<AccountSettings />} />
            <Route path="/settings/ai" element={<AISettings />} />
            <Route path="/settings/plans" element={<Plans />} />
            <Route path="/settings/industries" element={<Industries />} />
            {/* AI Models Settings - Admin Only */}
            <Route path="/settings/integration" element={<AdminRoute><Integration /></AdminRoute>} />
            <Route path="/settings/publishing" element={<Publishing />} />
            <Route path="/settings/sites" element={<Sites />} />
            {/* Legacy redirect - Import/Export removed, redirect to dashboard */}
            <Route path="/settings/import-export" element={<Navigate to="/" replace />} />

            {/* Sites Management */}
            <Route path="/sites" element={<SiteList />} />
            <Route path="/sites/:id" element={<SiteDashboard />} />
            <Route path="/sites/:id/pages" element={<PageManager />} />
            <Route path="/sites/:id/pages/new" element={<PageManager />} />
            <Route path="/sites/:id/pages/:pageId/edit" element={<PageManager />} />
            <Route path="/sites/:id/content" element={<SiteContent />} />
            <Route path="/sites/:id/settings" element={<SiteSettings />} />
            <Route path="/sites/:id/sync" element={<SyncDashboard />} />
            <Route path="/sites/:id/deploy" element={<DeploymentPanel />} />
            <Route path="/sites/:id/publishing-queue" element={<PublishingQueue />} />
            <Route path="/sites/:id/posts/:postId" element={<PostEditor />} />
            <Route path="/sites/:id/posts/:postId/edit" element={<PostEditor />} />


            {/* Help */}
            <Route path="/help" element={<Help />} />
            
            {/* Components (Showcase Page) */}
            <Route path="/components" element={<Components />} />
          </Route>

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