/**
 * Approver's Actions Statistics Component
 */

import { CheckCircle, XCircle, Clock, FileText, Users, Target, Award, AlertCircle, BarChart3, Archive } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import type { ApproverPerformance, DateRange } from '@/services/dashboard.service';
import { formatDateRangeText } from '@/pages/Dashboard/utils/dateRangeFormatter';

interface ApproverPerformanceActionsStatsProps {
  approverName: string;
  approverStats: ApproverPerformance;
  dateRange?: DateRange;
  customStartDate?: Date;
  customEndDate?: Date;
}

export function ApproverPerformanceActionsStats({
  approverName,
  approverStats,
  dateRange = 'all',
  customStartDate,
  customEndDate
}: ApproverPerformanceActionsStatsProps) {
  return (
    <Card data-testid="approver-actions-stats">
      <CardHeader>
        <CardTitle>Approver's Actions</CardTitle>
        <CardDescription>
          Statistics for all requests by {approverName} {dateRange && dateRange !== 'all' ? formatDateRangeText(dateRange, customStartDate, customEndDate, '') : '(all time)'}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {/* Approver's Actions - What the approver actually did */}
        <div className="mb-6">
          <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
            <Users className="w-4 h-4" />
            Approver's Actions
          </h4>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
              <div className="flex items-center justify-between mb-2">
                <CheckCircle className="w-5 h-5 text-green-600" />
                <span className="text-xs text-green-600 font-medium">
                  {approverStats && (approverStats.approvedCount + approverStats.rejectedCount) > 0 
                    ? `${Math.round((approverStats.approvedCount / (approverStats.approvedCount + approverStats.rejectedCount)) * 100)}%` 
                    : '0%'}
                </span>
              </div>
              <div className="text-2xl font-bold text-green-700">{approverStats?.approvedCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">Approved by Approver</div>
            </div>
            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
              <div className="flex items-center justify-between mb-2">
                <XCircle className="w-5 h-5 text-red-600" />
                <span className="text-xs text-red-600 font-medium">
                  {approverStats && (approverStats.approvedCount + approverStats.rejectedCount) > 0 
                    ? `${Math.round((approverStats.rejectedCount / (approverStats.approvedCount + approverStats.rejectedCount)) * 100)}%` 
                    : '0%'}
                </span>
              </div>
              <div className="text-2xl font-bold text-red-700">{approverStats?.rejectedCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">Rejected by Approver</div>
            </div>
            <div className="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
              <div className="flex items-center justify-between mb-2">
                <Clock className="w-5 h-5 text-yellow-600" />
              </div>
              <div className="text-2xl font-bold text-yellow-700">{approverStats?.pendingCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">Pending Actions</div>
            </div>
            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
              <div className="flex items-center justify-between mb-2">
                <Archive className="w-5 h-5 text-gray-600" />
              </div>
              <div className="text-2xl font-bold text-gray-700">{approverStats?.closedCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">Closed Requests</div>
            </div>
            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
              <div className="flex items-center justify-between mb-2">
                <FileText className="w-5 h-5 text-blue-600" />
              </div>
              <div className="text-2xl font-bold text-blue-700">{approverStats?.totalApproved || 0}</div>
              <div className="text-xs text-gray-600 mt-1">Total Requests</div>
            </div>
          </div>
        </div>
        
        {/* TAT Compliance Stats */}
        <div className="mb-6 pt-4 border-t">
          <h4 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-2">
            <Target className="w-4 h-4" />
            TAT Compliance
          </h4>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            <div className="p-4 bg-green-50 rounded-lg border border-green-200">
              <div className="flex items-center justify-between mb-2">
                <Award className="w-5 h-5 text-green-600" />
                <span className="text-xs text-green-600 font-medium">
                  {approverStats?.tatCompliancePercent !== undefined ? `${approverStats.tatCompliancePercent}%` : 'N/A'}
                </span>
              </div>
              <div className="text-2xl font-bold text-green-700">{approverStats?.withinTatCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">TAT Compliant</div>
            </div>
            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
              <div className="flex items-center justify-between mb-2">
                <AlertCircle className="w-5 h-5 text-red-600" />
              </div>
              <div className="text-2xl font-bold text-red-700">{approverStats?.breachedCount || 0}</div>
              <div className="text-xs text-gray-600 mt-1">TAT Breached</div>
            </div>
            <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
              <div className="flex items-center justify-between mb-2">
                <BarChart3 className="w-5 h-5 text-purple-600" />
              </div>
              <div className="text-2xl font-bold text-purple-700">{approverStats ? (approverStats.approvedCount + approverStats.rejectedCount) : 0}</div>
              <div className="text-xs text-gray-600 mt-1">Completed Actions</div>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

