import { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
import { PageLayout } from '@/components/layout/PageLayout';
import { Dashboard } from '@/pages/Dashboard';
import { OpenRequests } from '@/pages/OpenRequests';
import { ClosedRequests } from '@/pages/ClosedRequests';
import { RequestDetail } from '@/pages/RequestDetail';
import { SharedSummaries } from '@/pages/SharedSummaries/SharedSummaries';
import { SharedSummaryDetail } from '@/pages/SharedSummaries/SharedSummaryDetail';
import { WorkNotes } from '@/pages/WorkNotes';
import { CreateRequest } from '@/pages/CreateRequest';
import { ClaimManagementWizard } from '@/dealer-claim/components/request-creation/ClaimManagementWizard';
import { DealerDashboard } from '@/dealer-claim/pages/Dashboard';
import { MyRequests } from '@/pages/MyRequests';
import { Requests } from '@/pages/Requests/Requests';
import { UserAllRequests } from '@/pages/Requests/UserAllRequests';
import { useAuth, hasManagementAccess } from '@/contexts/AuthContext';
import { ApproverPerformance } from '@/pages/ApproverPerformance/ApproverPerformance';
import { Profile } from '@/pages/Profile';
import { Settings } from '@/pages/Settings';
import { Notifications } from '@/pages/Notifications';
import { DetailedReports } from '@/pages/DetailedReports';
import { Admin } from '@/pages/Admin';
import { ApprovalActionModal } from '@/components/modals/ApprovalActionModal';
import { Toaster } from '@/components/ui/sonner';
import { toast } from 'sonner';
import { CUSTOM_REQUEST_DATABASE } from '@/utils/customRequestDatabase';
import { AuthCallback } from '@/pages/Auth/AuthCallback';
import { createClaimRequest } from '@/services/dealerClaimApi';
import { ManagerSelectionModal } from '@/components/modals/ManagerSelectionModal';
import { TokenManager } from '@/utils/tokenManager';

interface AppProps {
  onLogout?: () => void;
}

// Component to conditionally render Admin or User All Requests screen
// This ensures that when navigating from the sidebar, the correct screen is shown based on user role
function RequestsRoute({ onViewRequest }: { onViewRequest: (requestId: string) => void }) {
  const { user } = useAuth();
  const isAdmin = hasManagementAccess(user);
  
  // Render separate screens based on user role
  // Admin/Management users see all organization requests
  // Regular users see only their participant requests (approver/spectator, NOT initiator)
  if (isAdmin) {
    return <Requests onViewRequest={onViewRequest} />;
  } else {
    return <UserAllRequests onViewRequest={onViewRequest} />;
  }
}

// Component to conditionally render Dashboard or DealerDashboard based on user job title
function DashboardRoute({ onNavigate, onNewRequest }: { onNavigate?: (page: string) => void; onNewRequest?: () => void }) {
  const [isDealer, setIsDealer] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    try {
      const userData = TokenManager.getUserData();
      setIsDealer(userData?.jobTitle === 'Dealer');
    } catch (error) {
      console.error('[App] Error checking dealer status:', error);
      setIsDealer(false);
    } finally {
      setIsLoading(false);
    }
  }, []);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="flex flex-col items-center gap-4">
          <div className="w-8 h-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
          <p className="text-muted-foreground">Loading...</p>
        </div>
      </div>
    );
  }

  // Render dealer-specific dashboard if user is a dealer
  if (isDealer) {
    return <DealerDashboard onNavigate={onNavigate} onNewRequest={onNewRequest} />;
  }

  // Render regular dashboard for all other users
  return <Dashboard onNavigate={onNavigate} onNewRequest={onNewRequest} />;
}

// Main Application Routes Component
function AppRoutes({ onLogout }: AppProps) {
  const navigate = useNavigate();
  const [approvalAction, setApprovalAction] = useState<'approve' | 'reject' | null>(null);
  const [dynamicRequests, setDynamicRequests] = useState<any[]>([]);
  const [selectedRequestId, setSelectedRequestId] = useState<string>('');
  const [selectedRequestTitle, setSelectedRequestTitle] = useState<string>('');
  const [managerModalOpen, setManagerModalOpen] = useState(false);
  const [managerModalData, setManagerModalData] = useState<{
    errorType: 'NO_MANAGER_FOUND' | 'MULTIPLE_MANAGERS_FOUND';
    managers?: Array<{
      userId: string;
      email: string;
      displayName: string;
      firstName?: string;
      lastName?: string;
      department?: string;
    }>;
    message?: string;
    pendingClaimData?: any;
  } | null>(null);

  // Retrieve dynamic requests from localStorage on mount
  useEffect(() => {
    const storedRequests = localStorage.getItem('dynamicRequests');
    if (storedRequests) {
      try {
        const parsed = JSON.parse(storedRequests);
        setDynamicRequests(parsed);
      } catch (error) {
        console.error('Error parsing dynamic requests:', error);
      }
    }
  }, []);

  // Sync dynamic requests to localStorage whenever they change
  useEffect(() => {
    if (dynamicRequests.length > 0) {
      localStorage.setItem('dynamicRequests', JSON.stringify(dynamicRequests));
    }
  }, [dynamicRequests]);

  const handleNavigate = (page: string) => {
    // Handle special routes
    if (page === 'profile') {
      navigate('/profile');
      return;
    }
    if (page === 'settings') {
      navigate('/settings');
      return;
    }
    // If page already starts with '/', use it directly (e.g., '/requests?status=approved')
    // Otherwise, add leading slash (e.g., 'open-requests' -> '/open-requests')
    if (page.startsWith('/')) {
      navigate(page);
    } else {
      navigate(`/${page}`);
    }
  };

  const handleViewRequest = async (requestId: string, requestTitle?: string, status?: string, request?: any) => {
    setSelectedRequestId(requestId);
    setSelectedRequestTitle(requestTitle || 'Unknown Request');
    
    // Use global navigation utility for consistent routing
    const { navigateToRequest } = await import('@/utils/requestNavigation');
    navigateToRequest({
      requestId,
      requestTitle,
      status,
      request,
      navigate,
    });
  };

  const handleBack = () => {
    navigate(-1);
  };

  const handleNewRequest = () => {
    navigate('/new-request');
  };

  const handleNewRequestSubmit = (requestData: any) => {
    // Check if this is a template selection (from Existing Template button)
    if (requestData.templateType) {
      // Navigate to the specific template wizard
      if (requestData.templateType === 'claim-management') {
        navigate('/claim-management');
      }
      return;
    }
    
    // Regular custom request submission
    // Generate unique ID for the new custom request
    const requestId = `RE-REQ-2024-${String(Object.keys(CUSTOM_REQUEST_DATABASE).length + dynamicRequests.length + 1).padStart(3, '0')}`;
    
    // Create full custom request object
    const newCustomRequest = {
      id: requestId,
      title: requestData.title,
      description: requestData.description || '',
      category: requestData.category || 'General',
      subcategory: requestData.subcategory || '',
      status: 'pending',
      priority: requestData.priority || 'standard',
      amount: requestData.budget || 'N/A',
      slaProgress: 0,
      slaRemaining: '5 days',
      slaEndDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }),
      currentStep: 1,
      totalSteps: requestData.approvers?.length || 1,
      currentApprover: requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email?.split('@')[0] || 'Pending Assignment',
      approverLevel: `1 of ${requestData.approvers?.length || 1}`,
      template: 'custom',
      initiator: {
        name: 'Current User',
        role: requestData.initiatorRole || 'Employee',
        department: requestData.department || 'General',
        email: 'current.user@royalenfield.com',
        phone: '+91 98765 43290',
        avatar: 'CU'
      },
      department: requestData.department || 'General',
      createdAt: new Date().toLocaleDateString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric',
        hour12: true 
      }),
      updatedAt: new Date().toLocaleDateString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric',
        hour12: true 
      }),
      dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
      submittedDate: new Date().toISOString(),
      estimatedCompletion: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
      conclusionRemark: '',
      approvalFlow: (requestData.approvers || []).filter((a: any) => a).map((approver: any, index: number) => {
        // Extract name from email if name is not available
        const approverName = approver?.name || approver?.email?.split('@')[0] || `Approver ${index + 1}`;
        const approverEmail = approver?.email || '';
        
        return {
          step: index + 1,
          approver: `${approverName}${approverEmail ? ` (${approverEmail})` : ''}`,
          role: approver?.role || `Level ${approver?.level || index + 1} Approver`,
          status: index === 0 ? 'pending' : 'waiting',
          tatHours: approver?.tat ? (typeof approver.tat === 'string' ? parseInt(approver.tat) : approver.tat) : 48,
          elapsedHours: index === 0 ? 0 : 0,
          assignedAt: index === 0 ? new Date().toISOString() : null,
          comment: null,
          timestamp: null
        };
      }),
      documents: [],
      spectators: (requestData.spectators || [])
        .filter((s: any) => s && (s.name || s.email))
        .map((spectator: any) => {
          const name = spectator?.name || spectator?.email?.split('@')[0] || 'Observer';
          return {
            name: name,
            role: spectator?.role || spectator?.department || 'Observer',
            avatar: name.split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2) || 'OB'
          };
        }),
      auditTrail: [
        { 
          type: 'created', 
          action: 'Request Created', 
          details: `Custom request "${requestData.title}" created`, 
          user: 'Current User', 
          timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
        },
        { 
          type: 'assignment', 
          action: 'Assigned to Approver', 
          details: `Request assigned to ${requestData.approvers?.[0]?.name || requestData.approvers?.[0]?.email || 'first approver'}`, 
          user: 'System', 
          timestamp: new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
        }
      ],
      tags: requestData.tags || ['custom-request']
    };
    
    // Add to dynamic requests
    setDynamicRequests([...dynamicRequests, newCustomRequest]);
    
    navigate('/my-requests');
    toast.success('Request Submitted Successfully!', {
      description: `Your request "${requestData.title}" (${requestId}) has been created and sent for approval.`,
      duration: 5000,
    });
  };

  const handleApprovalSubmit = (action: 'approve' | 'reject', _comment: string) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (action === 'approve') {
          toast.success('Request Approved', {
            description: 'The request has been approved and forwarded to the next step.',
            duration: 5000,
          });
        } else {
          toast.error('Request Rejected', {
            description: 'The request has been rejected and returned to the initiator.',
            duration: 5000,
          });
        }
        
        setApprovalAction(null);
        resolve(true);
      }, 1000);
    });
  };

  const handleCloseApprovalModal = () => {
    setApprovalAction(null);
  };

  const handleClaimManagementSubmit = async (claimData: any, _selectedManagerEmail?: string) => {
    try {
      // Prepare payload for API
      const payload = {
        activityName: claimData.activityName,
        activityType: claimData.activityType,
        dealerCode: claimData.dealerCode,
        dealerName: claimData.dealerName,
        dealerEmail: claimData.dealerEmail || undefined,
        dealerPhone: claimData.dealerPhone || undefined,
        dealerAddress: claimData.dealerAddress || undefined,
        activityDate: claimData.activityDate ? new Date(claimData.activityDate).toISOString() : undefined,
        location: claimData.location,
        requestDescription: claimData.requestDescription,
        periodStartDate: claimData.periodStartDate ? new Date(claimData.periodStartDate).toISOString() : undefined,
        periodEndDate: claimData.periodEndDate ? new Date(claimData.periodEndDate).toISOString() : undefined,
        estimatedBudget: claimData.estimatedBudget || undefined,
        approvers: claimData.approvers || [], // Pass approvers array
      };

      // Call API to create claim request
      const response = await createClaimRequest(payload);
      
      // Validate response - ensure request was actually created successfully
      if (!response || !response.request) {
        throw new Error('Invalid response from server: Request object not found');
      }

      const createdRequest = response.request;

      // Validate that we have at least one identifier (requestNumber or requestId)
      if (!createdRequest.requestNumber && !createdRequest.requestId) {
        throw new Error('Invalid response from server: Request identifier not found');
      }

      // Close manager modal if open
      setManagerModalOpen(false);
      setManagerModalData(null);

      // Only show success toast if request was actually created successfully
      toast.success('Claim Request Submitted', {
        description: 'Your claim management request has been created successfully.',
      });

      // Navigate to the created request detail page using requestNumber
      if (createdRequest.requestNumber) {
        navigate(`/request/${createdRequest.requestNumber}`);
      } else if (createdRequest.requestId) {
        // Fallback to requestId if requestNumber is not available
        navigate(`/request/${createdRequest.requestId}`);
      } else {
        // This should not happen due to validation above, but just in case
        navigate('/my-requests');
      }
    } catch (error: any) {
      console.error('[App] Error creating claim request:', error);
      
      // Check for manager-related errors
      const errorData = error?.response?.data;
      const errorCode = errorData?.code || errorData?.error?.code;
      
      if (errorCode === 'NO_MANAGER_FOUND') {
        // Show modal for no manager found
        setManagerModalData({
          errorType: 'NO_MANAGER_FOUND',
          message: errorData?.message || errorData?.error?.message || 'No reporting manager found. Please ensure your manager is correctly configured in the system.',
          pendingClaimData: claimData,
        });
        setManagerModalOpen(true);
        return;
      }
      
      if (errorCode === 'MULTIPLE_MANAGERS_FOUND') {
        // Show modal with manager list for selection
        const managers = errorData?.managers || errorData?.error?.managers || [];
        setManagerModalData({
          errorType: 'MULTIPLE_MANAGERS_FOUND',
          managers: managers,
          message: errorData?.message || errorData?.error?.message || 'Multiple managers found. Please select one.',
          pendingClaimData: claimData,
        });
        setManagerModalOpen(true);
        return;
      }
      
      // Other errors - show toast
      const errorMessage = error?.response?.data?.message || error?.message || 'Failed to create claim request';
      toast.error('Failed to Submit Claim Request', {
        description: errorMessage,
      });
    }
    
    // Keep the old code below for backward compatibility (local storage fallback)
    // This can be removed once API integration is fully tested
    /*
    // Generate unique ID for the new claim request
    const requestId = `RE-REQ-2024-CM-${String(dynamicRequests.length + 2).padStart(3, '0')}`;
    
    // Create full request object
    const newRequest = {
      id: requestId,
      title: `${claimData.activityName} - Claim Request`,
      description: claimData.requestDescription,
      category: 'Dealer Operations',
      subcategory: 'Claim Management',
      status: 'pending',
      priority: 'standard',
      amount: 'TBD',
      slaProgress: 0,
      slaRemaining: '7 days',
      slaEndDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
      currentStep: 1,
      totalSteps: 8,
      templateType: 'claim-management',
      templateName: 'Claim Management',
      initiator: {
        name: 'Current User',
        role: 'Regional Marketing Coordinator',
        department: 'Marketing',
        email: 'current.user@royalenfield.com',
        phone: '+91 98765 43290',
        avatar: 'CU'
      },
      department: 'Marketing',
      createdAt: new Date().toLocaleString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric',
        hour12: true 
      }),
      updatedAt: new Date().toLocaleString('en-US', { 
        month: 'short', 
        day: 'numeric', 
        year: 'numeric', 
        hour: 'numeric', 
        minute: 'numeric',
        hour12: true 
      }),
      dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
      conclusionRemark: '',
      claimDetails: {
        activityName: claimData.activityName,
        activityType: claimData.activityType,
        activityDate: claimData.activityDate ? new Date(claimData.activityDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '',
        location: claimData.location,
        dealerCode: claimData.dealerCode,
        dealerName: claimData.dealerName,
        dealerEmail: claimData.dealerEmail || 'N/A',
        dealerPhone: claimData.dealerPhone || 'N/A',
        dealerAddress: claimData.dealerAddress || 'N/A',
        requestDescription: claimData.requestDescription,
        estimatedBudget: claimData.estimatedBudget || 'TBD',
        periodStart: claimData.periodStartDate ? new Date(claimData.periodStartDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '',
        periodEnd: claimData.periodEndDate ? new Date(claimData.periodEndDate).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : ''
      },
      approvalFlow: claimData.workflowSteps || [
        {
          step: 1,
          approver: `${claimData.dealerName} (Dealer)`,
          role: 'Dealer - Document Upload',
          status: 'pending',
          tatHours: 72,
          elapsedHours: 0,
          assignedAt: new Date().toISOString(),
          comment: null,
          timestamp: null,
          description: 'Dealer uploads proposal document, cost breakup, timeline for closure, and other supporting documents'
        },
        {
          step: 2,
          approver: 'Current User (Initiator)',
          role: 'Initiator Evaluation',
          status: 'waiting',
          tatHours: 48,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Initiator reviews dealer documents and approves or requests modifications'
        },
        {
          step: 3,
          approver: 'System Auto-Process',
          role: 'IO Confirmation',
          status: 'waiting',
          tatHours: 1,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Automatic IO (Internal Order) confirmation generated upon initiator approval'
        },
        {
          step: 4,
          approver: 'Rajesh Kumar',
          role: 'Department Lead Approval',
          status: 'waiting',
          tatHours: 72,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Department head approves and blocks budget in IO for this activity'
        },
        {
          step: 5,
          approver: `${claimData.dealerName} (Dealer)`,
          role: 'Dealer - Completion Documents',
          status: 'waiting',
          tatHours: 120,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Dealer submits activity completion documents and description'
        },
        {
          step: 6,
          approver: 'Current User (Initiator)',
          role: 'Initiator Verification',
          status: 'waiting',
          tatHours: 48,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Initiator verifies completion documents and can modify approved amount'
        },
        {
          step: 7,
          approver: 'System Auto-Process',
          role: 'E-Invoice Generation',
          status: 'waiting',
          tatHours: 1,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Auto-generate e-invoice based on final approved amount'
        },
        {
          step: 8,
          approver: 'Finance Team',
          role: 'Credit Note Issuance',
          status: 'waiting',
          tatHours: 48,
          elapsedHours: 0,
          assignedAt: null,
          comment: null,
          timestamp: null,
          description: 'Finance team issues credit note to dealer'
        }
      ],
      documents: [],
      spectators: [],
      auditTrail: [
        { 
          type: 'created', 
          action: 'Request Created', 
          details: `Claim request for ${claimData.activityName} created`, 
          user: 'Current User', 
          timestamp: new Date().toLocaleString('en-US', { 
            month: 'short', 
            day: 'numeric', 
            year: 'numeric', 
            hour: 'numeric', 
            minute: 'numeric',
            hour12: true 
          })
        }
      ],
      tags: ['claim-management', 'new-request', claimData.activityType?.toLowerCase().replace(/\s+/g, '-')]
    };
    
    // Add to dynamic requests
    setDynamicRequests(prev => [...prev, newRequest]);
    
    // Also add to REQUEST_DATABASE for immediate viewing
    (REQUEST_DATABASE as any)[requestId] = newRequest;
    
    toast.success('Claim Request Submitted', {
      description: 'Your claim management request has been created successfully.',
    });
    navigate('/my-requests');
    */
  };

  return (
    <div className="min-h-screen h-screen flex flex-col overflow-hidden bg-background">
      <Routes>
        {/* Auth Callback - Unified callback for both OKTA and Tanflow */}
        <Route 
          path="/login/callback" 
          element={<AuthCallback />} 
        />
        
        {/* Dashboard - Conditionally renders DealerDashboard or regular Dashboard */}
        <Route 
          path="/" 
          element={
            <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
            </PageLayout>
          } 
        />
        
        <Route 
          path="/dashboard" 
          element={
            <PageLayout currentPage="dashboard" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <DashboardRoute onNavigate={handleNavigate} onNewRequest={handleNewRequest} />
            </PageLayout>
          } 
        />

        {/* Open Requests */}
        <Route 
          path="/open-requests" 
          element={
            <PageLayout currentPage="open-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <OpenRequests onViewRequest={handleViewRequest} />
            </PageLayout>
          } 
        />

        {/* Closed Requests */}
        <Route 
          path="/closed-requests" 
          element={
            <PageLayout currentPage="closed-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <ClosedRequests onViewRequest={handleViewRequest} />
            </PageLayout>
          } 
        />

        {/* Shared Summaries */}
        <Route 
          path="/shared-summaries" 
          element={
            <PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <SharedSummaries />
            </PageLayout>
          } 
        />

        {/* Shared Summary Detail */}
        <Route 
          path="/shared-summaries/:sharedSummaryId" 
          element={
            <PageLayout currentPage="shared-summaries" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <SharedSummaryDetail />
            </PageLayout>
          } 
        />

        {/* My Requests */}
        <Route 
          path="/my-requests" 
          element={
            <PageLayout currentPage="my-requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <MyRequests onViewRequest={handleViewRequest} dynamicRequests={dynamicRequests} />
            </PageLayout>
          } 
        />

        {/* Requests - Separate screens for Admin and Regular Users */}
        <Route 
          path="/requests" 
          element={
            <PageLayout currentPage="requests" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <RequestsRoute onViewRequest={handleViewRequest} />
            </PageLayout>
          } 
        />

        {/* Approver Performance - Detailed Performance Analysis */}
        <Route 
          path="/approver-performance" 
          element={
            <PageLayout currentPage="approver-performance" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <ApproverPerformance />
            </PageLayout>
          } 
        />

        {/* Request Detail - requestId will be read from URL params */}
        <Route 
          path="/request/:requestId" 
          element={
            <PageLayout currentPage="request-detail" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <RequestDetail 
                requestId="" 
                onBack={handleBack}
                dynamicRequests={dynamicRequests}
              />
            </PageLayout>
          } 
        />

        {/* Work Notes - Dedicated Full-Screen Page */}
        <Route 
          path="/work-notes/:requestId" 
          element={<WorkNotes />} 
        />

        {/* New Request (Custom) */}
        <Route 
          path="/new-request" 
          element={
            <CreateRequest
              onBack={handleBack}
              onSubmit={handleNewRequestSubmit}
            />
          } 
        />

        {/* Edit Draft Request */}
        <Route 
          path="/edit-request/:requestId" 
          element={
            <CreateRequest
              onBack={handleBack}
              onSubmit={handleNewRequestSubmit}
              requestId={undefined} // Will be read from URL params
              isEditMode={true}
            />
          } 
        />

        {/* Claim Management Wizard */}
        <Route 
          path="/claim-management" 
          element={
            <ClaimManagementWizard
              onBack={handleBack}
              onSubmit={handleClaimManagementSubmit}
            />
          } 
        />

        {/* Profile */}
        <Route 
          path="/profile" 
          element={
            <PageLayout currentPage="profile" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <Profile />
            </PageLayout>
          } 
        />

        {/* Settings */}
        <Route 
          path="/settings" 
          element={
            <PageLayout currentPage="settings" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <Settings />
            </PageLayout>
          } 
        />

        {/* Notifications */}
        <Route 
          path="/notifications" 
          element={
            <PageLayout currentPage="notifications" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <Notifications onNavigate={handleNavigate} />
            </PageLayout>
          } 
        />

        {/* Detailed Reports */}
        <Route 
          path="/detailed-reports" 
          element={
            <PageLayout currentPage="detailed-reports" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <DetailedReports />
            </PageLayout>
          } 
        />

        {/* Admin Control Panel */}
        <Route 
          path="/admin" 
          element={
            <PageLayout currentPage="admin" onNavigate={handleNavigate} onNewRequest={handleNewRequest} onLogout={onLogout}>
              <Admin />
            </PageLayout>
          } 
        />
      </Routes>

      <Toaster 
        position="top-right"
        toastOptions={{
          style: {
            background: 'var(--card)',
            color: 'var(--card-foreground)',
            border: '1px solid var(--border)',
          },
        }}
      />

      {/* Manager Selection Modal */}
      <ManagerSelectionModal
        open={managerModalOpen}
        onClose={() => {
          setManagerModalOpen(false);
          setManagerModalData(null);
        }}
        onSelect={async (managerEmail: string) => {
          if (managerModalData?.pendingClaimData) {
            // Retry creating claim request with selected manager
            // The pendingClaimData contains all the form data from the wizard
            // This preserves the entire submission state while waiting for manager selection
            await handleClaimManagementSubmit(managerModalData.pendingClaimData, managerEmail);
          }
        }}
        managers={managerModalData?.managers}
        errorType={managerModalData?.errorType || 'NO_MANAGER_FOUND'}
        message={managerModalData?.message}
        isLoading={false} // Will be set to true during retry if needed
      />

      {/* Approval Action Modal */}
      {approvalAction && (
        <ApprovalActionModal
          isOpen={!!approvalAction}
          onClose={handleCloseApprovalModal}
          action={approvalAction}
          requestId={selectedRequestId}
          requestTitle={selectedRequestTitle}
          onSubmit={handleApprovalSubmit}
        />
      )}
    </div>
  );
}

// Main App Component with Router
interface MainAppProps {
  onLogout?: () => void;
}

export default function App(props?: MainAppProps) {
  const { onLogout } = props || {};
  
  return (
    <BrowserRouter>
      <AppRoutes onLogout={onLogout} />
    </BrowserRouter>
  );
}