/**
 * Approver Performance Report Component
 * Displays approver performance metrics with pagination
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Users, RefreshCw, Download } from 'lucide-react';
import { ApproverPerformance, DateRange } from '@/services/dashboard.service';
import { Pagination } from '@/components/common/Pagination';
import { formatHoursMinutes } from '@/utils/slaTracker';
import { getTATColorClass } from '../../utils/dashboardCalculations';

interface ApproverPerformanceReportProps {
  approverPerformance: ApproverPerformance[];
  pagination: {
    page: number;
    totalPages: number;
    totalRecords: number;
  };
  dateRange: DateRange;
  customStartDate?: Date;
  customEndDate?: Date;
  loading: boolean;
  exportingApproverPerformance: boolean;
  onPageChange: (page: number) => void;
  onExport: (dateRange: DateRange, startDate?: Date, endDate?: Date) => void;
  onNavigate?: (path: string) => void;
}

export function ApproverPerformanceReport({
  approverPerformance,
  pagination,
  dateRange,
  customStartDate,
  customEndDate,
  loading,
  exportingApproverPerformance,
  onPageChange,
  onExport,
  onNavigate,
}: ApproverPerformanceReportProps) {
  if (approverPerformance.length === 0) return null;

  return (
    <Card className="shadow-md hover:shadow-lg transition-shadow" data-testid="approver-performance-report">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="bg-yellow-50 p-2 sm:p-3 rounded-lg">
              <Users className="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600" />
            </div>
            <div>
              <CardTitle className="text-base sm:text-lg lg:text-xl">Approver Performance Report</CardTitle>
              <CardDescription className="text-xs sm:text-sm">Response time & TAT compliance tracking</CardDescription>
            </div>
          </div>
          <Button
            onClick={() => onExport(dateRange, customStartDate, customEndDate)}
            disabled={exportingApproverPerformance || loading}
            className="bg-re-green hover:bg-re-green/90 text-white shrink-0"
            size="sm"
            data-testid="export-approver-performance-button"
          >
            {exportingApproverPerformance ? (
              <>
                <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                Exporting...
              </>
            ) : (
              <>
                <Download className="w-4 h-4 mr-2" />
                Export
              </>
            )}
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {approverPerformance.map((approver, idx) => {
            const tatPercent = approver.tatCompliancePercent;

            return (
              <div
                key={idx}
                className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
                onClick={() => {
                  const params = new URLSearchParams();
                  params.set('approverId', approver.approverId);
                  params.set('approverName', approver.approverName);
                  params.set('dateRange', dateRange);
                  if (dateRange === 'custom' && customStartDate && customEndDate) {
                    params.set('startDate', customStartDate.toISOString());
                    params.set('endDate', customEndDate.toISOString());
                  }
                  onNavigate?.(`/approver-performance?${params.toString()}`);
                }}
                data-testid={`approver-item-${approver.approverId}`}
              >
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
                      {idx + 1}
                    </div>
                    <div className="min-w-0">
                      <div className="font-medium text-gray-900 truncate">{approver.approverName}</div>
                      <div className="text-xs text-gray-500">{approver.totalApproved} requests approved</div>
                    </div>
                  </div>
                  <span
                    className={`px-2 py-1 rounded text-xs font-medium ${getTATColorClass(tatPercent)} flex-shrink-0`}
                  >
                    {tatPercent}% TAT
                  </span>
                </div>
                <div className="grid grid-cols-2 gap-4 mt-3">
                  <div>
                    <div className="text-xs text-gray-500">Avg Response</div>
                    <div className="text-sm font-medium text-gray-900">
                      {formatHoursMinutes(approver.avgResponseHours)}
                    </div>
                  </div>
                  <div>
                    <div className="text-xs text-gray-500">Pending</div>
                    <div className="text-sm font-medium text-gray-900">
                      <span className="bg-gray-500 text-white px-2 py-1 rounded text-xs">
                        {approver.pendingCount}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Pagination for Approver Performance */}
        <div className="mt-4">
          <Pagination
            currentPage={pagination.page}
            totalPages={pagination.totalPages}
            totalRecords={pagination.totalRecords}
            itemsPerPage={10}
            onPageChange={onPageChange}
            itemLabel="approvers"
            testIdPrefix="dashboard-approver-pagination"
          />
        </div>
      </CardContent>
    </Card>
  );
}

