frontend/src/components/ResultsCard.tsx

import { AlertTriangle } from 'lucide-react';
import { formatLabel } from '../lib/utils';
import type { ClassificationResult } from '../lib/api';

interface ResultsCardProps {
  results: ClassificationResult[] | null;
  isLoading: boolean;
  confidenceThreshold?: number; // Default 70%
}

export function ResultsCard({ results, isLoading, confidenceThreshold = 70 }: ResultsCardProps) {
  if (isLoading) {
    return (
      <div className="space-y-3">
        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card">
          <div className="h-3 w-20 shimmer-premium rounded mb-2" />
          <div className="h-6 w-40 shimmer-premium rounded" />
        </div>
        <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card space-y-2">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="space-y-1" style={{ animationDelay: `${i * 100}ms` }}>
              <div className="flex justify-between">
                <div className="h-3 w-20 shimmer-premium rounded" />
                <div className="h-3 w-10 shimmer-premium rounded" />
              </div>
              <div className="h-2 shimmer-premium rounded" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (!results || results.length === 0) {
    return (
      <div className="bg-white border border-dark-border rounded-xl p-8 text-center shadow-card">
        <p className="text-text-muted text-sm">Upload an image and click "Classify View"</p>
      </div>
    );
  }

  const topResult = results[0];
  const isLowConfidence = topResult.confidence < confidenceThreshold;

  return (
    <div className="space-y-3 animate-scale-in">
      {/* Low Confidence Warning */}
      {isLowConfidence && (
        <div className="flex items-start gap-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
          <AlertTriangle className="w-4 h-4 text-yellow-600 flex-shrink-0 mt-0.5" />
          <div className="text-xs text-yellow-800">
            <span className="font-semibold">Low Confidence:</span> The model is uncertain about this prediction.
            Please verify manually and provide feedback.
          </div>
        </div>
      )}

      {/* Top Prediction */}
      <div className={`bg-gradient-to-r ${isLowConfidence
          ? 'from-yellow-50 to-yellow-50/50 border-yellow-200'
          : 'from-nvidia-green/10 to-nvidia-green/5 border-nvidia-green/20'
        } border rounded-xl p-4 shadow-card`}>
        <p className="text-[10px] uppercase tracking-wider text-text-muted mb-1">
          Top Prediction
        </p>
        <div className="flex items-baseline justify-between">
          <span className={`text-xl font-bold ${isLowConfidence ? 'text-yellow-700' : 'text-nvidia-green'}`}>
            {formatLabel(topResult.label)}
          </span>
          <div className="flex items-center gap-1.5">
            {isLowConfidence && <AlertTriangle className="w-4 h-4 text-yellow-600" />}
            <span className={`text-lg font-semibold ${isLowConfidence ? 'text-yellow-700' : 'text-text-primary'
              }`}>
              {topResult.confidence.toFixed(1)}%
            </span>
          </div>
        </div>
      </div>

      {/* All Predictions */}
      <div className="bg-white border border-dark-border rounded-xl p-4 shadow-card card-interactive">
        <p className="text-[10px] uppercase tracking-wider text-text-muted mb-3">
          All Predictions
        </p>
        <div className="space-y-3">
          {results.map((result, index) => (
            <div key={result.label} className="space-y-1 animate-slide-up" style={{ animationDelay: `${index * 30}ms` }}>
              <div className="flex justify-between text-sm">
                <span className="text-text-primary font-medium">{formatLabel(result.label)}</span>
                <span className="text-nvidia-green font-semibold">
                  {result.confidence.toFixed(1)}%
                </span>
              </div>
              <div className="h-2 bg-dark-input rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-nvidia-green to-nvidia-green-hover rounded-full result-bar-animated"
                  style={{ width: `${result.confidence}%`, animationDelay: `${index * 80}ms` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}