'use client';

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

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

export function DriverRankingsTemplate(props: { viewData: DriverRankingsViewData }): React.ReactElement {
  const { viewData } = props;
  return (
    <div className="max-w-7xl mx-auto px-4 pb-12">
      {/* Header */}
      <div className="mb-8">
        <Button
          variant="secondary"
          onClick={viewData.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 && (
        <DriverTopThreePodium podium={viewData.podium} onDriverClick={viewData.onDriverClick} />
      )}

      {/* Filters */}
      <DriverRankingsFilter
        searchQuery={viewData.searchQuery}
        onSearchChange={viewData.onSearchChange}
        selectedSkill={viewData.selectedSkill}
        onSkillChange={viewData.onSkillChange}
        sortBy={viewData.sortBy}
        onSortChange={viewData.onSortChange}
        showFilters={viewData.showFilters}
        onToggleFilters={viewData.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">
          {viewData.drivers.map((driver) => (
            <button
              key={driver.id}
              type="button"
              onClick={() => viewData.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 ${driver.medalBg} ${driver.medalColor}`}>
                  {driver.rank <= 3 ? <Medal className="w-4 h-4" /> : driver.rank}
                </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 ${viewData.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 ${viewData.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 ${viewData.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 ${viewData.sortBy === 'winRate' ? 'text-primary-blue' : 'text-white'}`}>
                  {driver.winRate}%
                </span>
              </div>
            </button>
          ))}
        </div>

        {/* Empty State */}
        {viewData.drivers.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={viewData.onClearFilters}
              className="mt-4"
            >
              Clear Filters
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}