'use client';

import { Activity } from 'lucide-react';
import Image from 'next/image';
import { mediaConfig } from '@/lib/config/mediaConfig';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

const SKILL_LEVELS = [
  { id: 'pro', label: 'Pro', color: 'text-yellow-400' },
  { id: 'advanced', label: 'Advanced', color: 'text-purple-400' },
  { id: 'intermediate', label: 'Intermediate', color: 'text-primary-blue' },
  { id: 'beginner', label: 'Beginner', color: 'text-green-400' },
];

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

interface RecentActivityProps {
  drivers: DriverLeaderboardItemViewModel[];
  onDriverClick: (id: string) => void;
}

export function RecentActivity({ drivers, onDriverClick }: RecentActivityProps) {
  const activeDrivers = drivers.filter((d) => d.isActive).slice(0, 6);

  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-performance-green/10 border border-performance-green/20">
          <Activity className="w-5 h-5 text-performance-green" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-white">Active Drivers</h2>
          <p className="text-xs text-gray-500">Currently competing in leagues</p>
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
        {activeDrivers.map((driver) => {
          const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
          const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
          return (
            <button
              key={driver.id}
              type="button"
              onClick={() => onDriverClick(driver.id)}
              className="p-3 rounded-xl bg-iron-gray/40 border border-charcoal-outline hover:border-performance-green/40 transition-all group text-center"
            >
              <div className="relative w-12 h-12 mx-auto rounded-full overflow-hidden border-2 border-charcoal-outline mb-2">
                <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
                <div className="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-performance-green border-2 border-iron-gray" />
              </div>
              <p className="text-sm font-medium text-white truncate group-hover:text-performance-green transition-colors">
                {driver.name}
              </p>
              <div className="flex items-center justify-center gap-1 text-xs">
                {categoryConfig && (
                  <span className={categoryConfig.color}>{categoryConfig.label}</span>
                )}
                <span className={levelConfig?.color}>{levelConfig?.label}</span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}