/**
 * Approver Performance Overview Stats Cards Component
 */

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { CheckCircle, Clock, Target, Timer } from 'lucide-react';
import type { ApproverPerformance } from '@/services/dashboard.service';

interface ApproverPerformanceStatsCardsProps {
  approverStats: ApproverPerformance;
}

export function ApproverPerformanceStatsCards({
  approverStats
}: ApproverPerformanceStatsCardsProps) {

  const tatCompliance = approverStats?.tatCompliancePercent ?? 0;

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" data-testid="approver-stats-cards">
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium text-gray-600">TAT Compliance</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="text-3xl font-bold text-gray-900">
              {tatCompliance}%
            </div>
            <div className={`p-2 rounded-lg ${
              tatCompliance >= 95 ? 'bg-green-100' :
              tatCompliance >= 90 ? 'bg-blue-100' :
              tatCompliance >= 85 ? 'bg-orange-100' : 'bg-red-100'
            }`}>
              <Target className={`w-5 h-5 ${
                tatCompliance >= 95 ? 'text-green-600' :
                tatCompliance >= 90 ? 'text-blue-600' :
                tatCompliance >= 85 ? 'text-orange-600' : 'text-red-600'
              }`} />
            </div>
          </div>
          <Progress 
            value={tatCompliance} 
            className="mt-2 h-2"
          />
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium text-gray-600">Total Approved</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="text-3xl font-bold text-gray-900">
              {approverStats.totalApproved}
            </div>
            <div className="p-2 bg-blue-100 rounded-lg">
              <CheckCircle className="w-5 h-5 text-blue-600" />
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-1">Requests handled</p>
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium text-gray-600">Avg Response Time</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="text-3xl font-bold text-gray-900">
              {approverStats.avgResponseHours.toFixed(1)}h
            </div>
            <div className="p-2 bg-purple-100 rounded-lg">
              <Timer className="w-5 h-5 text-purple-600" />
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-1">
            {approverStats.avgResponseHours < 24 
              ? `${(approverStats.avgResponseHours / 8).toFixed(1)} working days`
              : `${(approverStats.avgResponseHours / 24).toFixed(1)} days`
            }
          </p>
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium text-gray-600">Pending Actions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="text-3xl font-bold text-gray-900">
              {approverStats.pendingCount}
            </div>
            <div className="p-2 bg-orange-100 rounded-lg">
              <Clock className="w-5 h-5 text-orange-600" />
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-1">Awaiting approval</p>
        </CardContent>
      </Card>
    </div>
  );
}

