

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

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30' },
  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30' },
  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30' },
  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30' },
];

interface SkillDistributionProps {
  drivers: {
    skillLevel?: string;
  }[];
}

export function SkillDistribution({ drivers }: SkillDistributionProps) {
  const distribution = SKILL_LEVELS.map((level) => ({
    ...level,
    count: drivers.filter((d) => d.skillLevel === level.id).length,
    percentage: drivers.length > 0
      ? Math.round((drivers.filter((d) => d.skillLevel === level.id).length / drivers.length) * 100)
      : 0,
  }));

  return (
    <Box mb={10}>
      <Box display="flex" alignItems="center" gap={3} mb={4}>
        <Box 
          display="flex" 
          h="10" 
          w="10" 
          alignItems="center" 
          justifyContent="center" 
          rounded="xl" 
          bg="bg-neon-aqua/10" 
          border 
          borderColor="border-neon-aqua/20"
        >
          <Icon icon={BarChart3} size={5} color="var(--neon-aqua)" />
        </Box>
        <Box>
          <Heading level={2}>Skill Distribution</Heading>
          <Text size="xs" color="text-gray-500">Driver population by skill level</Text>
        </Box>
      </Box>

      <Box display="grid" responsiveGridCols={{ base: 2, lg: 4 }} gap={4}>
        {distribution.map((level) => {
          return (
            <Box
              key={level.id}
              p={4}
              rounded="xl"
              border
              className={`${level.bgColor} ${level.borderColor}`}
            >
              <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
                <Icon icon={level.icon} size={5} className={level.color} />
                <Text size="2xl" weight="bold" className={level.color}>{level.count}</Text>
              </Box>
              <Text color="text-white" weight="medium" block mb={1}>{level.label}</Text>
              <Box fullWidth h="2" rounded="full" bg="bg-deep-graphite/50" overflow="hidden">
                <Box
                  h="full"
                  rounded="full"
                  transition
                  className={
                    level.id === 'pro' ? 'bg-yellow-400' :
                    level.id === 'advanced' ? 'bg-purple-400' :
                    level.id === 'intermediate' ? 'bg-primary-blue' :
                    'bg-green-400'
                  }
                  style={{ width: `${level.percentage}%` }}
                />
              </Box>
              <Text size="xs" color="text-gray-500" block mt={1}>{level.percentage}% of drivers</Text>
            </Box>
          );
        })}
      </Box>
    </Box>
  );
}
