'use client';

import { BarChart3 } from 'lucide-react';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

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

interface CategoryDistributionProps {
  drivers: DriverLeaderboardItemViewModel[];
}

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 (
    <div className="mb-10">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-purple-400/10 border border-purple-400/20">
          <BarChart3 className="w-5 h-5 text-purple-400" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-white">Category Distribution</h2>
          <p className="text-xs text-gray-500">Driver population by category</p>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
        {distribution.map((category) => (
          <div
            key={category.id}
            className={`p-4 rounded-xl ${category.bgColor} border ${category.borderColor}`}
          >
            <div className="flex items-center justify-between mb-3">
              <span className={`text-2xl font-bold ${category.color}`}>{category.count}</span>
            </div>
            <p className="text-white font-medium mb-1">{category.label}</p>
            <div className="w-full h-2 rounded-full bg-deep-graphite/50 overflow-hidden">
              <div
                className={`h-full rounded-full transition-all duration-500 ${
                  category.id === 'beginner' ? 'bg-green-400' :
                  category.id === 'intermediate' ? 'bg-primary-blue' :
                  category.id === 'advanced' ? 'bg-purple-400' :
                  category.id === 'pro' ? 'bg-yellow-400' :
                  category.id === 'endurance' ? 'bg-orange-400' :
                  'bg-red-400'
                }`}
                style={{ width: `${category.percentage}%` }}
              />
            </div>
            <p className="text-xs text-gray-500 mt-1">{category.percentage}% of drivers</p>
          </div>
        ))}
      </div>
    </div>
  );
}