import React from 'react';
import { Navigate } from 'react-router-dom';
import { useAuth } from '../context/useAuth';
import type { UserRole } from '../types';
import { RefreshCw } from 'lucide-react';

interface ProtectedRouteProps {
    children: React.ReactNode;
    allowedRoles?: UserRole[];
    requireEdit?: boolean;
    redirectTo?: string;
}

/**
 * ProtectedRoute component that restricts access based on user role
 * @param allowedRoles - Array of roles that can access the route
 * @param requireEdit - If true, only users who can edit (not guests) can access
 * @param redirectTo - Where to redirect if access is denied (default: '/')
 */
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
    children,
    allowedRoles,
    requireEdit = false,
    redirectTo = '/',
}) => {
    const { appUser, isLoading, canEdit } = useAuth();

    // Show loading state
    if (isLoading) {
        return (
            <div className="flex items-center justify-center min-h-[60vh]">
                <RefreshCw size={32} className="animate-spin text-primary" />
            </div>
        );
    }

    // Check role-based access
    if (allowedRoles && appUser && !allowedRoles.includes(appUser.role)) {
        return <Navigate to={redirectTo} replace />;
    }

    // Check edit permission
    if (requireEdit && !canEdit()) {
        return <Navigate to={redirectTo} replace />;
    }

    return <>{children}</>;
};