import { useEffect, Suspense, lazy } 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 { useAuth } from "@/hooks/use-auth";
import { usePostHogIdentify } from "@/hooks/use-posthog-identify";
import { BandProvider } from "@/contexts/BandContext";
import { initGA } from "./lib/analytics";
import { useAnalytics } from "./hooks/use-analytics";

// Critical pages loaded immediately (landing, login, not-found)
import Landing from "@/pages/landing";
import Login from "@/pages/login";
import NotFound from "@/pages/not-found";

// Lazy load the authenticated app shell (keeps it out of the public landing bundle)
const AppLayout = lazy(() =>
  import("@/components/layout/app-layout").then((m) => ({ default: m.AppLayout }))
);

// Lazy load authenticated pages (loaded only when needed)
const Dashboard = lazy(() => import("@/pages/dashboard"));
const GettingStarted = lazy(() => import("@/pages/getting-started"));
const OnboardingRedirect = lazy(() => import("@/components/onboarding-redirect"));
const Calendar = lazy(() => import("@/pages/calendar"));
const Setlists = lazy(() => import("@/pages/setlists"));
const SetlistEditor = lazy(() => import("@/pages/setlist-editor"));
const Songs = lazy(() => import("@/pages/songs"));
const SongDetails = lazy(() => import("@/pages/song-details"));
const Members = lazy(() => import("@/pages/members"));
const Finances = lazy(() => import("@/pages/finances"));
const Settings = lazy(() => import("@/pages/settings"));
const Subscription = lazy(() => import("@/pages/subscription"));
const EventDetails = lazy(() => import("@/pages/event-details"));
const Venues = lazy(() => import("@/pages/venues"));
const VenueDetail = lazy(() => import("@/pages/venue-detail"));

// Lazy load admin pages (heavy components)
const AdminDashboard = lazy(() => import("@/pages/admin"));
const AdminUserManagement = lazy(() => import("@/pages/admin-user-management"));

// Lazy load public content pages
const ResetPassword = lazy(() => import("@/pages/reset-password"));
const PrivacyPolicy = lazy(() => import("@/pages/privacy-policy"));
const VerificationPending = lazy(() => import("@/pages/verification-pending"));
const SmartSongAnalytics = lazy(() => import("@/pages/smart-song-analytics"));
const GreatCoverBandSetlist = lazy(() => import("@/pages/great-cover-band-setlist"));
const WhyEveryBandShouldUseBandMGT = lazy(() => import("@/pages/why-every-band-should-use-bandmgt"));
const Resources = lazy(() => import("@/pages/resources"));

// Blog pages (accessible to all users)
const Blog = lazy(() => import("@/pages/blog"));
const BlogArticle = lazy(() => import("@/pages/blog-article"));
const WhatsNew = lazy(() => import("@/pages/whats-new"));

// In-app changelog (authenticated only)
const Changelog = lazy(() => import("@/pages/changelog"));

// Optimized loading fallback component
const PageLoader = () => (
  <div className="flex items-center justify-center min-h-screen bg-white">
    <div className="flex flex-col items-center space-y-4">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
      <div className="text-sm text-gray-500">Loading...</div>
    </div>
  </div>
);

function Router() {
  const { isAuthenticated, isLoading } = useAuth();
  
  // Identify users in PostHog when authenticated
  usePostHogIdentify();
  
  // Track page views when routes change
  useAnalytics();

  if (isLoading) {
    return null; // Loading state is managed by AppLayout
  }

  if (!isAuthenticated) {
    return (
      <Suspense fallback={<PageLoader />}>
        <Switch>
          <Route path="/" component={Landing} />
          <Route path="/login" component={Login} />
          <Route path="/reset-password" component={ResetPassword} />
          <Route path="/privacy-policy" component={PrivacyPolicy} />
          <Route path="/verification-pending" component={VerificationPending} />
          <Route path="/blog" component={Blog} />
          <Route path="/blog/:slug" component={BlogArticle} />
          <Route path="/whats-new" component={WhatsNew} />
          <Route path="/resources" component={Resources} />
          <Route path="/resources/analytics/smart-song-analytics" component={SmartSongAnalytics} />
          <Route path="/resources/setlist-strategy/great-cover-band-setlist" component={GreatCoverBandSetlist} />
          <Route path="/resources/band-management/why-every-band-should-use-bandmgt" component={WhyEveryBandShouldUseBandMGT} />
          <Route path="/smart-song-analytics" component={() => { window.location.href = '/resources/analytics/smart-song-analytics'; return null; }} />
          <Route path="/what-makes-great-cover-band-setlist" component={() => { window.location.href = '/resources/setlist-strategy/great-cover-band-setlist'; return null; }} />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    );
  }

  return (
    <BandProvider>
      <Suspense fallback={<PageLoader />}>
        <AppLayout>
          <Suspense fallback={<PageLoader />}>
            <Switch>
            <Route path="/" component={OnboardingRedirect} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/getting-started" component={GettingStarted} />
            <Route path="/calendar" component={Calendar} />
            <Route path="/setlists" component={Setlists} />
            <Route path="/setlists/:id" component={SetlistEditor} />
            <Route path="/events/:id" component={EventDetails} />
            <Route path="/songs" component={Songs} />
            <Route path="/songs/:bandSongId" component={SongDetails} />
            <Route path="/bands/:bandId/songs" component={Songs} />
            <Route path="/members" component={Members} />
            <Route path="/venues" component={Venues} />
            <Route path="/venues/:id" component={VenueDetail} />
            <Route path="/finances" component={Finances} />
            <Route path="/settings" component={Settings} />
            <Route path="/subscription" component={Subscription} />
            <Route path="/blog" component={Blog} />
            <Route path="/blog/:slug" component={BlogArticle} />
            <Route path="/whats-new" component={WhatsNew} />
            <Route path="/changelog" component={Changelog} />
            <Route path="/admin" component={AdminDashboard} />
            <Route path="/admin/users" component={AdminUserManagement} />
            <Route path="/smart-song-analytics" component={SmartSongAnalytics} />
            <Route path="/what-makes-great-cover-band-setlist" component={GreatCoverBandSetlist} />
            <Route component={NotFound} />
          </Switch>
          </Suspense>
        </AppLayout>
      </Suspense>
    </BandProvider>
  );
}

function App() {
  // Defer Google Analytics initialization to improve initial page load  
  useEffect(() => {
    // Defer GA loading until after critical content is rendered
    const timeoutId = setTimeout(() => {
      if (!import.meta.env.VITE_GA_MEASUREMENT_ID) {
        console.warn('Missing required Google Analytics key: VITE_GA_MEASUREMENT_ID');
      } else {
        initGA();
      }
    }, 2000); // Load after 2 seconds to prioritize critical content

    return () => clearTimeout(timeoutId);
  }, []);

  return (
    <QueryClientProvider client={queryClient}>
      <Toaster />
      <Router />
    </QueryClientProvider>
  );
}

export default App;