import { createBrowserRouter, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";
import TermloansLoaderScreen from "@/components/TermloansLoaderScreen";
import ProtectedRoute from "@/components/ProtectedRoute";
import AnimatedPage from "@/Layout/AnimatedPage";
import AuthOnlyRoute from "@/components/AuthOnlyRoute";
import { TabBarLayout } from "@/Layout/TabBarLayout";

// Lazy loaded components - grouped by feature for better chunking
// Authentication pages
const Login = lazy(() => import("@/pages/NewPages/Login"));
const VerificationCode = lazy(() => import("@/pages/NewPages/VerificationCode"));
const VerifyMagicCode = lazy(() => import("@/pages/NewPages/VerifyMagicCode"));
const ForgotPassword = lazy(() => import("@/pages/NewPages/ForgotPassword"));
const RecoverPassword = lazy(() => import("@/pages/NewPages/RecoverPassword"));
const EmailVerificationAccount = lazy(() => import("@/pages/NewPages/EmailVerificationAccount"));
const GoogleCallbackPage = lazy(() => import("@/pages/NewPages/GoogleCallback"));

// Registration and onboarding pages
const CreateAccountPage = lazy(() => import("@/pages/NewPages/Forms/CreateAccount"));
const ApplyAccountPage = lazy(() => import("@/pages/NewPages/Forms/ApplyAccount"));
// const QuizAccountPage = lazy(() => import("@/pages/NewPages/Forms/QuizAccount"));
const NexusAccountPage = lazy(() => import("@/pages/NewPages/Forms/NexusAccount"));
const RegistrationPage = lazy(() => import("@/pages/NewPages/Forms/Typeform"));
const ApplyTypeFormPage = lazy(() => import("@/pages/NewPages/Forms/ApplyTypeform"));
// const QuizTypeFormPage = lazy(() => import("@/pages/NewPages/Forms/QuizTypeform"));
const NexusTypeFormPage = lazy(() => import("@/pages/NewPages/Forms/NexusTypeform"));
const MagicLinkTypeform = lazy(() => import("@/pages/NewPages/Forms/MagicLinkTypeform"));

// Banking integration pages
const PlaidPage = lazy(() => import("@/pages/NewPages/Plaid"));
const PlaidProcessingPage = lazy(() => import("@/pages/NewPages/PlaidProcessing"));

// Core application pages
const LenderRoutedPage = lazy(() => import("@/pages/NewPages/LenderRouted"));

// Main App Pages (Tab-based navigation)
const HomePage = lazy(() => import("@/pages/NewPages/Home"));
const OffersPage = lazy(() => import("@/pages/NewPages/Offers"));
const CalculatorPage = lazy(() => import("@/pages/NewPages/Calculator"));
const BankrateClonePage = lazy(() => import("@/pages/NewPages/Calculator/BankrateClone"));
const FinancingPage = lazy(() => import("@/pages/NewPages/Financing"));
const ProfilePage = lazy(() => import("@/pages/Profile/Main"));

// Error and utility pages
const NotFoundPage = lazy(() => import("@/pages/NewPages/NotFound"));
const ErrorBoundaryPage = lazy(() => import("@/pages/NewPages/ErrorBoundary"));

// Legal pages
const PrivacyPolicy = lazy(() => import("@/pages/Legal/PrivacyPolicy"));
const TermsOfService = lazy(() => import("@/pages/Legal/TermsOfService"));

// Wrapper component for lazy loaded pages with Suspense
const LazyPage = ({ children }: { children: React.ReactNode }) => (
  <Suspense fallback={<TermloansLoaderScreen />}>
    <AnimatedPage>
      {children}
    </AnimatedPage>
  </Suspense>
);

const publicRoutes = [
  {
    path: "",
    element: <Navigate to="/login" replace />,
  },
  {
    path: "/login",
    element: <LazyPage><Login /></LazyPage>,
  },
  {
    path: "/recover-password",
    element: <LazyPage><ForgotPassword /></LazyPage>,
  },
  {
    path: "/register",
    element: <LazyPage><CreateAccountPage /></LazyPage>,
  },
  {
    path: "/apply",
    element: <LazyPage><ApplyAccountPage /></LazyPage>,
  },
  // {
  //   path: "/quiz",
  //   element: <LazyPage><QuizAccountPage /></LazyPage>,
  // },
  {
    path: "/quiz",
    element: <LazyPage><NexusAccountPage /></LazyPage>,
  },
  {
    path: "/reset-password/verify",
    element: <LazyPage><VerificationCode /></LazyPage>,
  },
  {
    path: "/2fa/verify",
    element: <LazyPage><VerificationCode /></LazyPage>,
  },
  {
    path: "/verify-magic-code",
    element: <LazyPage><VerifyMagicCode /></LazyPage>,
  },
  {
    path: "/reset-password/change-password",
    element: <LazyPage><RecoverPassword /></LazyPage>,
  },
  {
    path: "/verification-account",
    element: <LazyPage><EmailVerificationAccount /></LazyPage>,
  },
  {
    path: "/registration",
    element: <AuthOnlyRoute><LazyPage><RegistrationPage /></LazyPage></AuthOnlyRoute>,
  },
  {
    path: "/apply-registration",
    element: <AuthOnlyRoute><LazyPage><ApplyTypeFormPage /></LazyPage></AuthOnlyRoute>,
  },
  // {
  //   path: "/quiz-registration",
  //   element: <AuthOnlyRoute><LazyPage><QuizTypeFormPage /></LazyPage></AuthOnlyRoute>,
  // },
  {
    path: "/quiz-registration",
    element: <AuthOnlyRoute><LazyPage><NexusTypeFormPage /></LazyPage></AuthOnlyRoute>,
  },
  {
    path: "/connect-plaid",
    element: <AuthOnlyRoute><LazyPage><PlaidPage /></LazyPage></AuthOnlyRoute>,
  },
  {
    path: "plaid-processing",
    element: <ProtectedRoute children={<LazyPage><PlaidProcessingPage /></LazyPage>} />,
  },
  {
    // Superseded by the merged lender-routed page; kept as a redirect since
    // this URL was already live in production.
    path: "request-in-progress",
    element: <Navigate to="/lender-routed" replace />,
  },
  {
    path: "lender-routed",
    element: <ProtectedRoute children={<LazyPage><LenderRoutedPage /></LazyPage>} />,
  },
  {
    path: "/google/callback",
    element: <LazyPage><GoogleCallbackPage /></LazyPage>,
  },
  {
    path: "/partner-registration",
    element: <LazyPage><MagicLinkTypeform /></LazyPage>,
  },
  // Legal pages (accessible to all users)
  {
    path: "/privacy-policy",
    element: <LazyPage><PrivacyPolicy /></LazyPage>,
  },
  {
    path: "/terms-of-service",
    element: <LazyPage><TermsOfService /></LazyPage>,
  },
  // Public calculator routes (accessible without authentication)
  {
    path: "/calculator",
    element: <LazyPage><BankrateClonePage /></LazyPage>,
  },
  {
    path: "/calculator-original",
    element: <LazyPage><CalculatorPage /></LazyPage>,
  },
];

// Protected main app routes with tab navigation
const protectedRoutes = [
  {
    path: "/",
    element: <ProtectedRoute><TabBarLayout /></ProtectedRoute>,
    children: [
      {
        path: "home",
        element: <LazyPage><HomePage /></LazyPage>,
      },
      {
        path: "offers",
        element: <LazyPage><OffersPage /></LazyPage>,
      },
      {
        path: "financing",
        element: <LazyPage><FinancingPage /></LazyPage>,
      },
      {
        path: "profile",
        element: <LazyPage><ProfilePage /></LazyPage>,
      },
    ],
  },
];

export const router = createBrowserRouter([
  ...publicRoutes,
  ...protectedRoutes,
  // Error routes
  {
    path: "/error",
    element: <LazyPage><ErrorBoundaryPage /></LazyPage>,
  },
  // 404 catch-all route (must be last)
  {
    path: "*",
    element: <LazyPage><NotFoundPage /></LazyPage>,
  },
]);