import { Routes, Route, Navigate } from 'react-router-dom';
import { Suspense, lazy } from 'react';

// Layout
import MainLayout from './components/layout/MainLayout';
import AuthLayout from './components/layout/AuthLayout';

// Loading component
const LoadingSpinner = () => (
  <div className="flex items-center justify-center min-h-screen">
    <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-500"></div>
  </div>
);

// Lazy load modules - Auth
const Login = lazy(() => import('./modules/auth/pages/Login'));
const Register = lazy(() => import('./modules/auth/pages/Register'));
const ForgotPassword = lazy(() => import('./modules/auth/pages/ForgotPassword'));
const AuthCallback = lazy(() => import('./modules/auth/pages/AuthCallback'));
const VerifyEmail = lazy(() => import('./modules/auth/pages/VerifyEmail'));
const ResetPassword = lazy(() => import('./modules/auth/pages/ResetPassword'));
const SecuritySettings = lazy(() => import('./modules/auth/pages/SecuritySettings'));

// Lazy load modules - Core
const Dashboard = lazy(() => import('./modules/dashboard/pages/Dashboard'));
const Trading = lazy(() => import('./modules/trading/pages/Trading'));
const MLDashboard = lazy(() => import('./modules/ml/pages/MLDashboard'));
const BacktestingDashboard = lazy(() => import('./modules/backtesting/pages/BacktestingDashboard'));
const Investment = lazy(() => import('./modules/investment/pages/Investment'));
const Settings = lazy(() => import('./modules/settings/pages/Settings'));
const Assistant = lazy(() => import('./modules/assistant/pages/Assistant'));

// Lazy load modules - Portfolio
const PortfolioDashboard = lazy(() => import('./modules/portfolio/pages/PortfolioDashboard'));
const CreatePortfolio = lazy(() => import('./modules/portfolio/pages/CreatePortfolio'));
const CreateGoal = lazy(() => import('./modules/portfolio/pages/CreateGoal'));

// Lazy load modules - Education
const Courses = lazy(() => import('./modules/education/pages/Courses'));
const CourseDetail = lazy(() => import('./modules/education/pages/CourseDetail'));
const MyLearning = lazy(() => import('./modules/education/pages/MyLearning'));
const Leaderboard = lazy(() => import('./modules/education/pages/Leaderboard'));
const Lesson = lazy(() => import('./modules/education/pages/Lesson'));
const Quiz = lazy(() => import('./modules/education/pages/Quiz'));

// Lazy load modules - Payments
const Pricing = lazy(() => import('./modules/payments/pages/Pricing'));
const Billing = lazy(() => import('./modules/payments/pages/Billing'));

// Lazy load modules - Notifications
const NotificationsPage = lazy(() => import('./modules/notifications/pages/NotificationsPage'));

// Admin module (lazy loaded)
const AdminDashboard = lazy(() => import('./modules/admin/pages/AdminDashboard'));
const MLModelsPage = lazy(() => import('./modules/admin/pages/MLModelsPage'));
const AgentsPage = lazy(() => import('./modules/admin/pages/AgentsPage'));
const PredictionsPage = lazy(() => import('./modules/admin/pages/PredictionsPage'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        {/* Auth routes */}
        <Route element={<AuthLayout />}>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/verify-email" element={<VerifyEmail />} />
          <Route path="/reset-password" element={<ResetPassword />} />
        </Route>

        {/* OAuth callback (no layout) */}
        <Route path="/auth/callback" element={<AuthCallback />} />

        {/* Education - Full screen pages (no main layout) */}
        <Route path="/education/courses/:courseSlug/lesson/:lessonId" element={<Lesson />} />
        <Route path="/education/courses/:courseSlug/lesson/:lessonId/quiz" element={<Quiz />} />

        {/* Protected routes */}
        <Route element={<MainLayout />}>
          {/* Dashboard */}
          <Route path="/dashboard" element={<Dashboard />} />

          {/* Trading */}
          <Route path="/trading" element={<Trading />} />
          <Route path="/ml-dashboard" element={<MLDashboard />} />
          <Route path="/backtesting" element={<BacktestingDashboard />} />
          <Route path="/investment" element={<Investment />} />

          {/* Portfolio Manager */}
          <Route path="/portfolio" element={<PortfolioDashboard />} />
          <Route path="/portfolio/new" element={<CreatePortfolio />} />
          <Route path="/portfolio/goals/new" element={<CreateGoal />} />

          {/* Education */}
          <Route path="/education/courses" element={<Courses />} />
          <Route path="/education/courses/:slug" element={<CourseDetail />} />
          <Route path="/education/my-learning" element={<MyLearning />} />
          <Route path="/education/leaderboard" element={<Leaderboard />} />
          {/* Legacy routes - redirect to new paths */}
          <Route path="/courses" element={<Navigate to="/education/courses" replace />} />
          <Route path="/courses/:slug" element={<Navigate to="/education/courses/:slug" replace />} />

          {/* Payments */}
          <Route path="/pricing" element={<Pricing />} />
          <Route path="/billing" element={<Billing />} />

          {/* Settings */}
          <Route path="/settings" element={<Settings />} />
          <Route path="/settings/security" element={<SecuritySettings />} />
          <Route path="/settings/billing" element={<Billing />} />
          <Route path="/settings/notifications" element={<NotificationsPage />} />

          {/* Notifications */}
          <Route path="/notifications" element={<NotificationsPage />} />

          {/* Assistant */}
          <Route path="/assistant" element={<Assistant />} />

          {/* Admin */}
          <Route path="/admin" element={<AdminDashboard />} />
          <Route path="/admin/models" element={<MLModelsPage />} />
          <Route path="/admin/agents" element={<AgentsPage />} />
          <Route path="/admin/predictions" element={<PredictionsPage />} />
        </Route>

        {/* Redirects */}
        <Route path="/" element={<Navigate to="/dashboard" replace />} />
        <Route path="*" element={<Navigate to="/dashboard" replace />} />
      </Routes>
    </Suspense>
  );
}

export default App;