

import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { BarChart3 } from 'lucide-react';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', icon: BarChart3, color: 'var(--ui-color-intent-warning)', bgColor: 'rgba(255, 190, 77, 0.1)', borderColor: 'rgba(255, 190, 77, 0.3)' },
  { id: 'advanced', label: 'Advanced', icon: BarChart3, color: 'rgba(147, 51, 234, 1)', bgColor: 'rgba(147, 51, 234, 0.1)', borderColor: 'rgba(147, 51, 234, 0.3)' },
  { id: 'intermediate', label: 'Intermediate', icon: BarChart3, color: 'var(--ui-color-intent-primary)', bgColor: 'rgba(25, 140, 255, 0.1)', borderColor: 'rgba(25, 140, 255, 0.3)' },
  { id: 'beginner', label: 'Beginner', icon: BarChart3, color: 'var(--ui-color-intent-success)', bgColor: 'rgba(16, 185, 129, 0.1)', borderColor: 'rgba(16, 185, 129, 0.3)' },
];

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="rgba(78, 212, 224, 0.1)" 
          border 
          borderColor="rgba(78, 212, 224, 0.2)"
        >
          <Icon icon={BarChart3} size={5} intent="telemetry" />
        </Box>
        <Box>
          <Heading level={2}>Skill Distribution</Heading>
          <Text size="xs" variant="low">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
              bg={level.bgColor}
              borderColor={level.borderColor}
            >
              <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
                <Icon icon={level.icon} size={5} color={level.color} />
                <Text size="2xl" weight="bold" color={level.color}>{level.count}</Text>
              </Box>
              <Text variant="high" weight="medium" block mb={1}>{level.label}</Text>
              <Box fullWidth h="2" rounded="full" bg="var(--ui-color-bg-base)" overflow="hidden">
                <Box
                  h="full"
                  rounded="full"
                  transition
                  bg={level.color}
                  style={{ width: `${level.percentage}%` }}
                />
              </Box>
              <Text size="xs" variant="low" block mt={1}>{level.percentage}% of drivers</Text>
            </Box>
          );
        })}
      </Box>
    </Box>
  );
}
