import { AlertTriangle, ArrowRight, ScrollText, Shield } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Link } from 'react-router-dom';

interface NavCardProps {
  title: string;
  description: string;
  to: string;
  icon: React.ComponentType<{ className?: string }>;
  stat?: string;
  badge?: number;
}

function NavCard({ title, description, to, icon: Icon, stat, badge }: NavCardProps) {
  return (
    <Link to={to}>
      <Card className="hover:bg-accent/50 transition-colors cursor-pointer h-full">
        <CardHeader>
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="p-2 rounded-lg bg-primary/10">
                <Icon className="w-5 h-5 text-primary" />
              </div>
              <div>
                <CardTitle className="text-base flex items-center gap-2">
                  {title}
                  {badge !== undefined && badge > 0 && (
                    <Badge variant="destructive" className="text-xs">
                      {badge}
                    </Badge>
                  )}
                </CardTitle>
              </div>
            </div>
            <ArrowRight className="w-5 h-5 text-muted-foreground" />
          </div>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
        {stat && (
          <CardContent>
            <p className="text-sm text-muted-foreground">{stat}</p>
          </CardContent>
        )}
      </Card>
    </Link>
  );
}

interface MonitoringNavCardsProps {
  errorCount?: number;
  rateLimitCount?: number;
}

export function MonitoringNavCards({ errorCount, rateLimitCount }: MonitoringNavCardsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <NavCard
        title="Error Monitoring"
        description="View detailed error logs, analytics, and traces"
        to="/admin/error-monitoring"
        icon={AlertTriangle}
        stat={errorCount !== undefined ? `${errorCount} errors in last 24h` : undefined}
        badge={errorCount}
      />
      
      <NavCard
        title="Rate Limit Metrics"
        description="Monitor rate limiting, alerts, and configurations"
        to="/admin/rate-limit-metrics"
        icon={Shield}
        stat={rateLimitCount !== undefined ? `${rateLimitCount} blocks today` : undefined}
      />
      
      <NavCard
        title="System Log"
        description="View system events, audit trails, and history"
        to="/admin/system-log"
        icon={ScrollText}
      />
    </div>
  );
}