'use client';

import React from 'react';
import { Trophy, Medal, Search, ArrowLeft } from 'lucide-react';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
import DriverRankingsFilter from '@/components/DriverRankingsFilter';
import DriverTopThreePodium from '@/components/DriverTopThreePodium';
import Image from 'next/image';

// ============================================================================
// TYPES
// ============================================================================

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';

interface DriverRankingsTemplateProps {
  drivers: DriverLeaderboardItemViewModel[];
  searchQuery: string;
  selectedSkill: 'all' | SkillLevel;
  sortBy: SortBy;
  showFilters: boolean;
  onSearchChange: (query: string) => void;
  onSkillChange: (skill: 'all' | SkillLevel) => void;
  onSortChange: (sort: SortBy) => void;
  onToggleFilters: () => void;
  onDriverClick: (id: string) => void;
  onBackToLeaderboards: () => void;
}

// ============================================================================
// HELPER FUNCTIONS
// ============================================================================

const getMedalColor = (position: number) => {
  switch (position) {
    case 1: return 'text-yellow-400';
    case 2: return 'text-gray-300';
    case 3: return 'text-amber-600';
    default: return 'text-gray-500';
  }
};

const getMedalBg = (position: number) => {
  switch (position) {
    case 1: return 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40';
    case 2: return 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40';
    case 3: return 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40';
    default: return 'bg-iron-gray/50 border-charcoal-outline';
  }
};

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export default function DriverRankingsTemplate({
  drivers,
  searchQuery,
  selectedSkill,
  sortBy,
  showFilters,
  onSearchChange,
  onSkillChange,
  onSortChange,
  onToggleFilters,
  onDriverClick,
  onBackToLeaderboards,
}: DriverRankingsTemplateProps) {
  // Filter drivers
  const filteredDrivers = drivers.filter((driver) => {
    const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesSkill = selectedSkill === 'all' || driver.skillLevel === selectedSkill;
    return matchesSearch && matchesSkill;
  });

  // Sort drivers
  const sortedDrivers = [...filteredDrivers].sort((a, b) => {
    const rankA = Number.isFinite(a.rank) && a.rank > 0 ? a.rank : Number.POSITIVE_INFINITY;
    const rankB = Number.isFinite(b.rank) && b.rank > 0 ? b.rank : Number.POSITIVE_INFINITY;

    switch (sortBy) {
      case 'rank':
        return rankA - rankB || b.rating - a.rating || a.name.localeCompare(b.name);
      case 'rating':
        return b.rating - a.rating;
      case 'wins':
        return b.wins - a.wins;
      case 'podiums':
        return b.podiums - a.podiums;
      case 'winRate': {
        const aRate = a.racesCompleted > 0 ? a.wins / a.racesCompleted : 0;
        const bRate = b.racesCompleted > 0 ? b.wins / b.racesCompleted : 0;
        return bRate - aRate;
      }
      default:
        return 0;
    }
  });

  return (
    <div className="max-w-7xl mx-auto px-4 pb-12">
      {/* Header */}
      <div className="mb-8">
        <Button
          variant="secondary"
          onClick={onBackToLeaderboards}
          className="flex items-center gap-2 mb-6"
        >
          <ArrowLeft className="w-4 h-4" />
          Back to Leaderboards
        </Button>

        <div className="flex items-center gap-4 mb-2">
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
            <Trophy className="w-7 h-7 text-primary-blue" />
          </div>
          <div>
            <Heading level={1} className="text-3xl lg:text-4xl">
              Driver Leaderboard
            </Heading>
            <p className="text-gray-400">Full rankings of all drivers by performance metrics</p>
          </div>
        </div>
      </div>

      {/* Top 3 Podium */}
      {!searchQuery && sortBy === 'rank' && <DriverTopThreePodium drivers={sortedDrivers} onDriverClick={onDriverClick} />}

      {/* Filters */}
      <DriverRankingsFilter
        searchQuery={searchQuery}
        onSearchChange={onSearchChange}
        selectedSkill={selectedSkill}
        onSkillChange={onSkillChange}
        sortBy={sortBy}
        onSortChange={onSortChange}
        showFilters={showFilters}
        onToggleFilters={onToggleFilters}
      />

      {/* Leaderboard Table */}
      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
        {/* Table Header */}
        <div className="grid grid-cols-12 gap-4 px-4 py-3 bg-iron-gray/50 border-b border-charcoal-outline text-xs font-medium text-gray-500 uppercase tracking-wider">
          <div className="col-span-1 text-center">Rank</div>
          <div className="col-span-5 lg:col-span-4">Driver</div>
          <div className="col-span-2 text-center hidden md:block">Races</div>
          <div className="col-span-2 lg:col-span-1 text-center">Rating</div>
          <div className="col-span-2 lg:col-span-1 text-center">Wins</div>
          <div className="col-span-1 text-center hidden lg:block">Podiums</div>
          <div className="col-span-2 text-center">Win Rate</div>
        </div>

        {/* Table Body */}
        <div className="divide-y divide-charcoal-outline/50">
          {sortedDrivers.map((driver, index) => {
            const winRate = driver.racesCompleted > 0 ? ((driver.wins / driver.racesCompleted) * 100).toFixed(1) : '0.0';
            const position = index + 1;

            return (
              <button
                key={driver.id}
                type="button"
                onClick={() => onDriverClick(driver.id)}
                className="grid grid-cols-12 gap-4 px-4 py-4 w-full text-left hover:bg-iron-gray/30 transition-colors group"
              >
                {/* Position */}
                <div className="col-span-1 flex items-center justify-center">
                  <div className={`flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold border ${getMedalBg(position)} ${getMedalColor(position)}`}>
                    {position <= 3 ? <Medal className="w-4 h-4" /> : position}
                  </div>
                </div>

                {/* Driver Info */}
                <div className="col-span-5 lg:col-span-4 flex items-center gap-3">
                  <div className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-charcoal-outline">
                    <Image src={driver.avatarUrl} alt={driver.name} fill className="object-cover" />
                  </div>
                  <div className="min-w-0">
                    <p className="text-white font-semibold truncate group-hover:text-primary-blue transition-colors">
                      {driver.name}
                    </p>
                    <div className="flex items-center gap-2 text-xs text-gray-500">
                      <span className="flex items-center gap-1">
                        {driver.nationality}
                      </span>
                      <span className="flex items-center gap-1">
                        {driver.skillLevel}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Races */}
                <div className="col-span-2 items-center justify-center hidden md:flex">
                  <span className="text-gray-400">{driver.racesCompleted}</span>
                </div>

                {/* Rating */}
                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
                  <span className={`font-mono font-semibold ${sortBy === 'rating' ? 'text-primary-blue' : 'text-white'}`}>
                    {driver.rating.toLocaleString()}
                  </span>
                </div>

                {/* Wins */}
                <div className="col-span-2 lg:col-span-1 flex items-center justify-center">
                  <span className={`font-mono font-semibold ${sortBy === 'wins' ? 'text-primary-blue' : 'text-performance-green'}`}>
                    {driver.wins}
                  </span>
                </div>

                {/* Podiums */}
                <div className="col-span-1 items-center justify-center hidden lg:flex">
                  <span className={`font-mono font-semibold ${sortBy === 'podiums' ? 'text-primary-blue' : 'text-warning-amber'}`}>
                    {driver.podiums}
                  </span>
                </div>

                {/* Win Rate */}
                <div className="col-span-2 flex items-center justify-center">
                  <span className={`font-mono font-semibold ${sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
                    {winRate}%
                  </span>
                </div>
              </button>
            );
          })}
        </div>

        {/* Empty State */}
        {sortedDrivers.length === 0 && (
          <div className="py-16 text-center">
            <Search className="w-12 h-12 text-gray-600 mx-auto mb-4" />
            <p className="text-gray-400 mb-2">No drivers found</p>
            <p className="text-sm text-gray-500">Try adjusting your filters or search query</p>
            <Button
              variant="secondary"
              onClick={() => {
                onSearchChange('');
                onSkillChange('all');
              }}
              className="mt-4"
            >
              Clear Filters
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}