/**
 * Data Completeness Summary Component
 * 
 * Displays high-level overview cards for data completeness metrics
 */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Database, AlertCircle, CheckCircle2, TrendingUp } from 'lucide-react';
import type { CompletenessSummary } from '@/types/data-completeness';

interface CompletenessSummaryProps {
  summary: CompletenessSummary;
}

export function CompletenessSummary({ summary }: CompletenessSummaryProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg: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 Entities</CardTitle>
          <Database className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{summary.total_entities.toLocaleString()}</div>
          <p className="text-xs text-muted-foreground">
            Parks: {summary.by_entity_type.parks} | Rides: {summary.by_entity_type.rides}
          </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 Completeness</CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{summary.avg_completeness_score?.toFixed(1) || 0}%</div>
          <Progress value={summary.avg_completeness_score || 0} className="mt-2" />
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">Below 50%</CardTitle>
          <AlertCircle className="h-4 w-4 text-destructive" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-destructive">
            {summary.entities_below_50}
          </div>
          <p className="text-xs text-muted-foreground">
            {((summary.entities_below_50 / summary.total_entities) * 100).toFixed(1)}% of total
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">100% Complete</CardTitle>
          <CheckCircle2 className="h-4 w-4 text-green-600" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-green-600">
            {summary.entities_100_complete}
          </div>
          <p className="text-xs text-muted-foreground">
            {((summary.entities_100_complete / summary.total_entities) * 100).toFixed(1)}% of total
          </p>
        </CardContent>
      </Card>
    </div>
  );
}