import React, { useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Login from './features/auth/Login';
import ForgotPassword from './features/auth/ForgotPassword';
import AppLayout from './features/layouts/AppLayout';
import AdminDashboard from './features/dashboard/AdminDashboard';
import ClientDashboard from './features/dashboard/ClientDashboard';
import VendorDashboard from './features/dashboard/VendorDashboard';
import ProtectedRoute from './features/layouts/ProtectedRoute';
import { getDashboardPath } from './services/firestoreService';
import type { RootState } from './store/store';

/**
 * AppRoutes Component
 * Defines the main routing structure of the application.
 * Groups routes by Layout (Public vs App).
 * Implements role-based redirection after login.
 */
const AppRoutes: React.FC = () => {
  return (
    <Router>
      <Routes>
        {/* Public Routes */}
        <Route
          path="/login"
          element={
              <Login />
          }
        />
        <Route
          path="/forgot-password"
          element={
              <ForgotPassword />
          }
        />
        {/* Authenticated Routes */}
        <Route element={<AppLayout />}>
          {/* Dashboard Redirect Logic - redirects to user's correct dashboard based on role */}
          <Route path="/" element={<RoleDashboardRedirect />} />

          {/* Protected Dashboard Routes */}
          <Route
            path="/dashboard/admin"
            element={
              <ProtectedRoute
                allowedRoles={['admin']}
                redirectTo="/dashboard/client"
              >
                <AdminDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/client"
            element={
              <ProtectedRoute
                allowedRoles={['client']}
                redirectTo="/dashboard/client"
              >
                <ClientDashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/dashboard/vendor"
            element={
              <ProtectedRoute
                allowedRoles={['vendor']}
                redirectTo="/dashboard/client"
              >
                <VendorDashboard />
              </ProtectedRoute>
            }
          />
        </Route>
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  );
};

/**
 * RoleDashboardRedirect Component
 * Dynamically redirects users to their appropriate dashboard based on their role
 */
const RoleDashboardRedirect: React.FC = () => {
  const { isAuthenticated, user } = useSelector((state: RootState) => state.auth);
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login', { replace: true });
      return;
    }

    if (user?.userRole) {
      const dashboardPath = getDashboardPath(user.userRole);
      navigate(dashboardPath, { replace: true });
    }
  }, [isAuthenticated, user?.userRole, navigate]);

  return null;
};

export default AppRoutes;