import { Activity, AlertTriangle, Clock, Database, FileText, Shield, TrendingUp, Users } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import type { SystemHealthData } from '@/hooks/useSystemHealth';
import type { ModerationHealth } from '@/hooks/admin/useModerationHealth';

interface MonitoringQuickStatsProps {
  systemHealth?: SystemHealthData;
  rateLimitStats?: { total_requests: number; blocked_requests: number; unique_ips: number };
  moderationHealth?: ModerationHealth;
}

interface StatCardProps {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: string | number;
  trend?: 'up' | 'down' | 'neutral';
  status?: 'healthy' | 'warning' | 'critical';
}

function StatCard({ icon: Icon, label, value, status = 'healthy' }: StatCardProps) {
  const statusColors = {
    healthy: 'text-green-500',
    warning: 'text-yellow-500',
    critical: 'text-red-500',
  };

  return (
    <Card>
      <CardContent className="p-4">
        <div className="flex items-center gap-3">
          <div className={`p-2 rounded-lg bg-muted ${statusColors[status]}`}>
            <Icon className="w-5 h-5" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-xs text-muted-foreground truncate">{label}</p>
            <p className="text-2xl font-bold">{value}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

export function MonitoringQuickStats({ systemHealth, rateLimitStats, moderationHealth }: MonitoringQuickStatsProps) {
  const criticalAlerts = systemHealth?.critical_alerts_count || 0;
  const highAlerts = systemHealth?.high_alerts_count || 0;
  const totalAlerts = criticalAlerts + highAlerts;
  
  const blockRate = rateLimitStats?.total_requests 
    ? ((rateLimitStats.blocked_requests / rateLimitStats.total_requests) * 100).toFixed(1)
    : '0.0';

  const queueStatus = 
    (moderationHealth?.queueLength || 0) > 50 ? 'critical' :
    (moderationHealth?.queueLength || 0) > 20 ? 'warning' : 'healthy';

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <StatCard
        icon={AlertTriangle}
        label="Active Alerts"
        value={totalAlerts}
        status={criticalAlerts > 0 ? 'critical' : highAlerts > 0 ? 'warning' : 'healthy'}
      />
      
      <StatCard
        icon={Shield}
        label="Rate Limit Block Rate"
        value={`${blockRate}%`}
        status={parseFloat(blockRate) > 5 ? 'warning' : 'healthy'}
      />
      
      <StatCard
        icon={FileText}
        label="Moderation Queue"
        value={moderationHealth?.queueLength || 0}
        status={queueStatus}
      />
      
      <StatCard
        icon={Clock}
        label="Active Locks"
        value={moderationHealth?.activeLocks || 0}
        status={(moderationHealth?.activeLocks || 0) > 5 ? 'warning' : 'healthy'}
      />
      
      <StatCard
        icon={Database}
        label="Orphaned Images"
        value={systemHealth?.orphaned_images_count || 0}
        status={(systemHealth?.orphaned_images_count || 0) > 0 ? 'warning' : 'healthy'}
      />
      
      <StatCard
        icon={Activity}
        label="Failed Webhooks"
        value={systemHealth?.failed_webhook_count || 0}
        status={(systemHealth?.failed_webhook_count || 0) > 0 ? 'warning' : 'healthy'}
      />
      
      <StatCard
        icon={Users}
        label="Unique IPs"
        value={rateLimitStats?.unique_ips || 0}
        status="healthy"
      />
      
      <StatCard
        icon={TrendingUp}
        label="Total Requests"
        value={rateLimitStats?.total_requests || 0}
        status="healthy"
      />
    </div>
  );
}