import { AlertCircle, CheckCircle, Info } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import { formatDecimal, formatNumber, formatPercentRaw } from '@/lib/format';
import { cn } from '@/lib/utils';

type MetricStatus = 'good' | 'warning' | 'error' | 'neutral';

interface QualityMetricCardProps {
  label: string;
  value: number | null;
  format?: 'number' | 'decimal' | 'percent' | 'grade';
  status?: MetricStatus;
  description?: string;
  suggestion?: string;
  className?: string;
}

function formatValue(
  value: number | null,
  format: QualityMetricCardProps['format'] = 'number',
): string {
  if (value === null) {
    return 'N/A';
  }

  switch (format) {
    case 'decimal':
      return formatDecimal(value, 1);
    case 'percent':
      return formatPercentRaw(value);
    case 'grade':
      return `Grade ${formatDecimal(value, 1)}`;
    case 'number':
    default:
      return formatNumber(Math.round(value));
  }
}

function getStatusIcon(status: MetricStatus) {
  switch (status) {
    case 'good':
      return <CheckCircle className="h-4 w-4 text-success" />;
    case 'warning':
      return <AlertCircle className="h-4 w-4 text-warning" />;
    case 'error':
      return <AlertCircle className="h-4 w-4 text-destructive" />;
    case 'neutral':
    default:
      return <Info className="h-4 w-4 text-muted-foreground" />;
  }
}

function getStatusColor(status: MetricStatus): string {
  switch (status) {
    case 'good':
      return 'text-success';
    case 'warning':
      return 'text-warning';
    case 'error':
      return 'text-destructive';
    case 'neutral':
    default:
      return 'text-foreground';
  }
}

export default function QualityMetricCard({
  label,
  value,
  format = 'number',
  status = 'neutral',
  description,
  suggestion,
  className,
}: QualityMetricCardProps) {
  return (
    <Card className={cn('transition-colors', className)}>
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1">
            <CardTitle className="text-base font-medium">{label}</CardTitle>
            {description && (
              <CardDescription className="mt-1 text-xs">{description}</CardDescription>
            )}
          </div>
          {status !== 'neutral' && <div className="flex-shrink-0">{getStatusIcon(status)}</div>}
        </div>
      </CardHeader>
      <CardContent className="pb-4">
        <div className="flex items-baseline justify-between">
          <span className={cn('text-2xl font-bold tabular-nums', getStatusColor(status))}>
            {formatValue(value, format)}
          </span>
        </div>
        {suggestion && (
          <p className="mt-3 text-xs text-muted-foreground border-l-2 border-muted pl-3">
            {suggestion}
          </p>
        )}
      </CardContent>
    </Card>
  );
}