import { Box } from '@/ui/Box';
import { Card } from '@/ui/Card';
import { Text } from '@/ui/Text';

interface PerformanceMetricsProps {
  stats: {
    winRate: number;
    podiumRate: number;
    dnfRate: number;
    avgFinish: number;
    consistency: number;
    bestFinish: number;
    worstFinish: number;
  };
}

export function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
  const getPerformanceVariant = (value: number, type: 'rate' | 'finish' | 'consistency'): 'blue' | 'green' | 'orange' | 'purple' => {
    if (type === 'rate') {
      if (value >= 30) return 'green';
      if (value >= 15) return 'orange';
      return 'blue';
    }
    if (type === 'consistency') {
      if (value >= 80) return 'green';
      if (value >= 60) return 'orange';
      return 'blue';
    }
    return 'blue';
  };

  const metrics = [
    {
      label: 'Win Rate',
      value: `${stats.winRate.toFixed(1)}%`,
      variant: getPerformanceVariant(stats.winRate, 'rate'),
      icon: '🏆'
    },
    {
      label: 'Podium Rate',
      value: `${stats.podiumRate.toFixed(1)}%`,
      variant: getPerformanceVariant(stats.podiumRate, 'rate'),
      icon: '🥇'
    },
    {
      label: 'DNF Rate',
      value: `${stats.dnfRate.toFixed(1)}%`,
      variant: stats.dnfRate < 10 ? 'green' : 'orange',
      icon: '❌'
    },
    {
      label: 'Avg Finish',
      value: stats.avgFinish.toFixed(1),
      variant: 'blue' as const,
      icon: '📊'
    },
    {
      label: 'Consistency',
      value: `${stats.consistency.toFixed(0)}%`,
      variant: getPerformanceVariant(stats.consistency, 'consistency'),
      icon: '🎯'
    },
    {
      label: 'Best / Worst',
      value: `${stats.bestFinish} / ${stats.worstFinish}`,
      variant: 'blue' as const,
      icon: '📈'
    }
  ];

  return (
    <Box display="grid" responsiveGridCols={{ base: 2, md: 3 }} gap={4}>
      {metrics.map((metric, index) => (
        <Card key={index}>
          <Box p={4} textAlign="center">
            <Text size="2xl" block mb={2}>{metric.icon}</Text>
            <Text size="sm" color="text-gray-400" block mb={1}>{metric.label}</Text>
            <Text size="xl" weight="bold" color="text-white" block>{metric.value}</Text>
          </Box>
        </Card>
      ))}
    </Box>
  );
}