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

const CATEGORIES = [
  { id: 'beginner', label: 'Beginner', color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', progressColor: 'bg-green-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', progressColor: 'bg-primary-blue' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', progressColor: 'bg-purple-400' },
  { id: 'pro', label: 'Pro', color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', progressColor: 'bg-yellow-400' },
  { id: 'endurance', label: 'Endurance', color: 'text-orange-400', bgColor: 'bg-orange-400/10', borderColor: 'border-orange-400/30', progressColor: 'bg-orange-400' },
  { id: 'sprint', label: 'Sprint', color: 'text-red-400', bgColor: 'bg-red-400/10', borderColor: 'border-red-400/30', progressColor: 'bg-red-400' },
];

interface CategoryDistributionProps {
  drivers: {
    category?: string;
  }[];
}

export function CategoryDistribution({ drivers }: CategoryDistributionProps) {
  const distribution = CATEGORIES.map((category) => ({
    ...category,
    count: drivers.filter((d) => d.category === category.id).length,
    percentage: drivers.length > 0
      ? Math.round((drivers.filter((d) => d.category === category.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-purple-400/10" 
          border 
          borderColor="border-purple-400/20"
        >
          <Icon 
            icon={BarChart3} 
            size={5} 
            color="rgb(192, 132, 252)" 
          />
        </Box>
        <Box>
          <Heading level={2}>Category Distribution</Heading>
          <Text size="xs" color="text-gray-500">Driver population by category</Text>
        </Box>
      </Box>

      <Grid cols={2} lgCols={3} gap={4}>
        {distribution.map((category) => (
          <CategoryDistributionCard
            key={category.id}
            label={category.label}
            count={category.count}
            percentage={category.percentage}
            color={category.color}
            bgColor={category.bgColor}
            borderColor={category.borderColor}
            progressColor={category.progressColor}
          />
        ))}
      </Grid>
    </Box>
  );
}