'use client';

import React from 'react';
import { Trophy, ArrowLeft, Medal } from 'lucide-react';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Image from 'next/image';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';

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

interface DriverRankingsTemplateProps {
  viewData: DriverRankingsViewData;
  onDriverClick?: (id: string) => void;
  onBackToLeaderboards?: () => void;
}

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

export function DriverRankingsTemplate({
  viewData,
  onDriverClick,
  onBackToLeaderboards,
}: DriverRankingsTemplateProps): React.ReactElement {
  return (
    <div className="max-w-7xl mx-auto px-4 pb-12">
      {/* Header */}
      <div className="mb-8">
        {onBackToLeaderboards && (
          <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 */}
      {viewData.podium.length > 0 && (
        <div className="mb-10">
          <div className="flex items-end justify-center gap-4 lg:gap-8">
            {[1, 0, 2].map((index) => {
              const driver = viewData.podium[index];
              if (!driver) return null;
              
              const position = index === 1 ? 1 : index === 0 ? 2 : 3;
              const config = {
                1: { height: 'h-40', color: 'from-yellow-400/20 to-amber-500/10 border-yellow-400/40', crown: 'text-yellow-400', text: 'text-xl text-yellow-400' },
                2: { height: 'h-32', color: 'from-gray-400/20 to-gray-500/10 border-gray-400/40', crown: 'text-gray-300', text: 'text-lg text-gray-300' },
                3: { height: 'h-24', color: 'from-amber-600/20 to-amber-700/10 border-amber-600/40', crown: 'text-amber-600', text: 'text-base text-amber-600' },
              }[position];

              return (
                <button
                  key={driver.id}
                  type="button"
                  onClick={() => onDriverClick?.(driver.id)}
                  className="flex flex-col items-center group"
                >
                  <div className="relative mb-4">
                    <div className={`relative ${position === 1 ? 'w-24 h-24 lg:w-28 lg:h-28' : 'w-20 h-20 lg:w-24 lg:h-24'} rounded-full overflow-hidden border-4 ${position === 1 ? 'border-yellow-400 shadow-[0_0_30px_rgba(250,204,21,0.3)]' : position === 2 ? 'border-gray-300' : 'border-amber-600'} group-hover:scale-105 transition-transform`}>
                      <Image
                        src={driver.avatarUrl}
                        alt={driver.name}
                        fill
                        className="object-cover"
                      />
                    </div>
                    <div className={`absolute -bottom-2 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold bg-gradient-to-br ${config.color} border-2 ${config.crown}`}>
                      {position}
                    </div>
                  </div>

                  <p className={`text-white font-semibold ${position === 1 ? 'text-lg' : 'text-base'} group-hover:text-primary-blue transition-colors mb-1`}>
                    {driver.name}
                  </p>

                  <p className={`font-mono font-bold ${position === 1 ? 'text-xl text-yellow-400' : 'text-lg text-primary-blue'}`}>
                    {driver.rating.toLocaleString()}
                  </p>

                  <div className="flex items-center gap-2 text-xs text-gray-500 mt-1">
                    <span className="flex items-center gap-1">
                      <span className="w-3 h-3 text-performance-green">🏆</span>
                      {driver.wins}
                    </span>
                    <span>•</span>
                    <span className="flex items-center gap-1">
                      <span className="w-3 h-3 text-warning-amber">🏅</span>
                      {driver.podiums}
                    </span>
                  </div>

                  <div className={`mt-4 w-28 lg:w-36 ${config.height} rounded-t-lg bg-gradient-to-t ${config.color} border-t border-x flex items-end justify-center pb-4`}>
                    <span className={`text-4xl lg:text-5xl font-black ${config.crown}`}>
                      {position}
                    </span>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      )}

      {/* 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">
          {viewData.drivers.map((driver) => {
            const position = driver.rank;
            const medalBg = position === 1 ? 'bg-gradient-to-br from-yellow-400/20 to-yellow-600/10 border-yellow-400/40' :
                           position === 2 ? 'bg-gradient-to-br from-gray-300/20 to-gray-400/10 border-gray-300/40' :
                           position === 3 ? 'bg-gradient-to-br from-amber-600/20 to-amber-700/10 border-amber-600/40' :
                           'bg-iron-gray/50 border-charcoal-outline';
            const medalColor = position === 1 ? 'text-yellow-400' :
                              position === 2 ? 'text-gray-300' :
                              position === 3 ? 'text-amber-600' :
                              'text-gray-500';

            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 ${medalBg} ${medalColor}`}>
                    {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 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 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 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 text-white">
                    {driver.winRate}%
                  </span>
                </div>
              </button>
            );
          })}
        </div>

        {/* Empty State */}
        {viewData.drivers.length === 0 && (
          <div className="py-16 text-center">
            <span className="text-5xl mb-4 block">🔍</span>
            <p className="text-gray-400 mb-2">No drivers found</p>
            <p className="text-sm text-gray-500">There are no drivers in the system yet</p>
          </div>
        )}
      </div>
    </div>
  );
}