import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Clock, CheckCircle, Users } from 'lucide-react';
import { useModerationQueue } from '@/hooks/useModerationQueue';

export function QueueStatsDashboard() {
  const { queueStats } = useModerationQueue();

  if (!queueStats) {
    return null;
  }

  const getSLAStatus = (avgWaitHours: number) => {
    if (avgWaitHours < 24) return 'good';
    if (avgWaitHours < 48) return 'warning';
    return 'critical';
  };

  const slaStatus = getSLAStatus(queueStats.avgWaitHours);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Pending Queue</CardTitle>
          <Users className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{queueStats.pendingCount}</div>
          <p className="text-xs text-muted-foreground mt-1">
            Total submissions waiting
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Assigned to Me</CardTitle>
          <CheckCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{queueStats.assignedToMe}</div>
          <p className="text-xs text-muted-foreground mt-1">
            Currently locked by you
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Avg Wait Time</CardTitle>
          <Clock className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-2">
            <div className="text-2xl font-bold">
              {queueStats.avgWaitHours.toFixed(1)}h
            </div>
            {slaStatus === 'warning' && (
              <Badge variant="outline" className="bg-warning/10 text-warning border-warning/20">
                Warning
              </Badge>
            )}
            {slaStatus === 'critical' && (
              <Badge variant="destructive">Critical</Badge>
            )}
          </div>
          <p className="text-xs text-muted-foreground mt-1">
            Average time in queue
          </p>
        </CardContent>
      </Card>
    </div>
  );
}