/**
 * Approver Performance Page - Refactored Version
 * 
 * This is a refactored version that uses modular components, hooks, and utilities.
 */

import { useSearchParams } from 'react-router-dom';

// Components
import { ApproverPerformanceEmpty } from './components/ApproverPerformanceEmpty';
import { ApproverPerformanceHeader } from './components/ApproverPerformanceHeader';
import { ApproverPerformanceStatsCards } from './components/ApproverPerformanceStatsCards';
import { ApproverPerformanceActionsStats } from './components/ApproverPerformanceActionsStats';
import { ApproverPerformanceFilters } from './components/ApproverPerformanceFilters';
import { ApproverPerformanceRequestList } from './components/ApproverPerformanceRequestList';

// Hooks
import { useApproverPerformanceFilters } from './hooks/useApproverPerformanceFilters';
import { useApproverPerformanceData } from './hooks/useApproverPerformanceData';

const itemsPerPage = 10;

export function ApproverPerformance() {
  const [searchParams] = useSearchParams();
  
  // Get approver ID and name from URL params
  const approverId = searchParams.get('approverId') || '';
  const approverName = searchParams.get('approverName') || 'Unknown Approver';
  
  // Filters hook
  const filters = useApproverPerformanceFilters();
  
  // Data hook
  const data = useApproverPerformanceData({
    approverId,
    dateRange: filters.dateRange,
    customStartDate: filters.customStartDate,
    customEndDate: filters.customEndDate,
    statusFilter: filters.statusFilter,
    priorityFilter: filters.priorityFilter,
    slaComplianceFilter: filters.slaComplianceFilter,
    searchTerm: filters.searchTerm,
    itemsPerPage
  });
  
  // All stats come from backend (data.approverStats) - no frontend calculation needed
  
  if (!approverId) {
    return <ApproverPerformanceEmpty />;
  }
  
  return (
    <div className="space-y-4 sm:space-y-6 max-w-7xl mx-auto" data-testid="approver-performance-page">
        {/* Header */}
        <ApproverPerformanceHeader
          approverName={approverName}
          refreshing={data.refreshing}
          onRefresh={data.handleRefresh}
        />
        
        {/* Approver Performance Overview Cards */}
        {data.approverStats && (
          <ApproverPerformanceStatsCards
            approverStats={data.approverStats}
          />
        )}
        
        {/* Filtered Request Stats - Approver's Actions */}
        {data.approverStats && (
          <ApproverPerformanceActionsStats
            approverName={approverName}
            approverStats={data.approverStats}
            dateRange={filters.dateRange}
            customStartDate={filters.customStartDate}
            customEndDate={filters.customEndDate}
          />
        )}
        
        {/* Filters */}
        <ApproverPerformanceFilters
          searchTerm={filters.searchTerm}
          statusFilter={filters.statusFilter}
          priorityFilter={filters.priorityFilter}
          slaComplianceFilter={filters.slaComplianceFilter}
          dateRange={filters.dateRange}
          customStartDate={filters.customStartDate}
          customEndDate={filters.customEndDate}
          showCustomDatePicker={filters.showCustomDatePicker}
          tempCustomStartDate={filters.tempCustomStartDate}
          tempCustomEndDate={filters.tempCustomEndDate}
          onSearchChange={filters.setSearchTerm}
          onStatusChange={filters.setStatusFilter}
          onPriorityChange={filters.setPriorityFilter}
          onSlaComplianceChange={filters.setSlaComplianceFilter}
          onDateRangeChange={filters.handleDateRangeChange}
          onShowCustomDatePickerChange={filters.setShowCustomDatePicker}
          onTempStartDateChange={filters.setTempCustomStartDate}
          onTempEndDateChange={filters.setTempCustomEndDate}
          onApplyCustomDate={filters.handleApplyCustomDate}
          onClearFilters={filters.clearFilters}
        />
        
        {/* Requests List */}
        <ApproverPerformanceRequestList
          requests={data.requests}
          loading={data.loading}
          approverName={approverName}
          currentPage={data.currentPage}
          totalPages={data.totalPages}
          totalRecords={data.totalRecords}
          itemsPerPage={itemsPerPage}
          onPageChange={data.handlePageChange}
        />
    </div>
  );
}

