'use client';

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

interface DriverPerformanceOverviewProps {
  stats: {
    wins: number;
    podiums: number;
    totalRaces: number;
    consistency: number;
    dnfs: number;
    bestFinish: number;
    avgFinish: number;
  };
}

export function DriverPerformanceOverview({ stats }: DriverPerformanceOverviewProps) {
  const winRate = stats.totalRaces > 0 ? (stats.wins / stats.totalRaces) * 100 : 0;
  const podiumRate = stats.totalRaces > 0 ? (stats.podiums / stats.totalRaces) * 100 : 0;

  const metrics = [
    { label: 'Win Rate', value: `${winRate.toFixed(1)}%`, color: 'text-performance-green' },
    { label: 'Podium Rate', value: `${podiumRate.toFixed(1)}%`, color: 'text-warning-amber' },
    { label: 'Best Finish', value: `P${stats.bestFinish}`, color: 'text-white' },
    { label: 'Avg Finish', value: `P${stats.avgFinish.toFixed(1)}`, color: 'text-gray-400' },
    { label: 'Consistency', value: `${stats.consistency}%`, color: 'text-neon-aqua' },
    { label: 'DNFs', value: stats.dnfs, color: 'text-red-500' },
  ];

  return (
    <Box display="flex" flexDirection="col" gap={6} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50" p={6}>
      <Heading level={3}>Performance Overview</Heading>
      
      <Box display="grid" gridCols={{ base: 2, md: 3, lg: 6 }} gap={6}>
        {metrics.map((metric, index) => (
          <Box key={index} display="flex" flexDirection="col" gap={1}>
            <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
              {metric.label}
            </Text>
            <Text size="xl" weight="bold" font="mono" color={metric.color}>
              {metric.value}
            </Text>
          </Box>
        ))}
      </Box>

      {/* Visual Progress Bars */}
      <Box display="flex" flexDirection="col" gap={4} mt={2}>
        <Box display="flex" flexDirection="col" gap={2}>
          <Box display="flex" justifyContent="between" alignItems="center">
            <Text size="xs" weight="bold" color="text-gray-400">Win Rate</Text>
            <Text size="xs" weight="bold" font="mono" color="text-performance-green">{winRate.toFixed(1)}%</Text>
          </Box>
          <Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
            <Box 
              h="full" 
              bg="bg-performance-green" 
              shadow="shadow-[0_0_8px_rgba(34,197,94,0.4)]" 
              transition
              width={`${winRate}%`}
            />
          </Box>
        </Box>

        <Box display="flex" flexDirection="col" gap={2}>
          <Box display="flex" justifyContent="between" alignItems="center">
            <Text size="xs" weight="bold" color="text-gray-400">Podium Rate</Text>
            <Text size="xs" weight="bold" font="mono" color="text-warning-amber">{podiumRate.toFixed(1)}%</Text>
          </Box>
          <Box h="1.5" w="full" rounded="full" bg="bg-charcoal-outline" overflow="hidden">
            <Box 
              h="full" 
              bg="bg-warning-amber" 
              shadow="shadow-[0_0_8px_rgba(255,190,77,0.4)]" 
              transition
              width={`${podiumRate}%`}
            />
          </Box>
        </Box>
      </Box>
    </Box>
  );
}