import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
import { AlertCircle, TrendingUp, Users, Zap } from 'lucide-react';

interface ErrorSummary {
  error_type: string | null;
  occurrence_count: number | null;
  affected_users: number | null;
  avg_duration_ms: number | null;
}

interface ErrorAnalyticsProps {
  errorSummary: ErrorSummary[] | undefined;
}

export function ErrorAnalytics({ errorSummary }: ErrorAnalyticsProps) {
  if (!errorSummary || errorSummary.length === 0) {
    return null;
  }

  const totalErrors = errorSummary.reduce((sum, item) => sum + (item.occurrence_count || 0), 0);
  const totalAffectedUsers = errorSummary.reduce((sum, item) => sum + (item.affected_users || 0), 0);
  const avgDuration = errorSummary.reduce((sum, item) => sum + (item.avg_duration_ms || 0), 0) / errorSummary.length;

  const topErrors = errorSummary.slice(0, 5);

  return (
    <div className="grid gap-4 md:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Total Errors</CardTitle>
          <AlertCircle className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{totalErrors}</div>
          <p className="text-xs text-muted-foreground">Last 30 days</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Error Types</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{errorSummary.length}</div>
          <p className="text-xs text-muted-foreground">Unique error types</p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Affected Users</CardTitle>
          <Users className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{totalAffectedUsers}</div>
          <p className="text-xs text-muted-foreground">Users impacted</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 Duration</CardTitle>
          <Zap className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{Math.round(avgDuration)}ms</div>
          <p className="text-xs text-muted-foreground">Before error occurs</p>
        </CardContent>
      </Card>

      <Card className="col-span-full">
        <CardHeader>
          <CardTitle>Top 5 Errors</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={topErrors}>
              <XAxis dataKey="error_type" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="occurrence_count" fill="hsl(var(--destructive))" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}