'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  Trophy,
  Crown,
  Star,
  TrendingUp,
  Shield,
  Search,
  Users,
  Award,
  ChevronRight,
  Flag,
  Activity,
  BarChart3,
} from 'lucide-react';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import Card from '@/components/ui/Card';
import Heading from '@/components/ui/Heading';
import { useDriverLeaderboard } from '@/hooks/useDriverService';
import Image from 'next/image';
import { mediaConfig } from '@/lib/config/mediaConfig';

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

// ============================================================================
// DEMO DATA
// ============================================================================
//
// In alpha, all driver listings come from the in-memory repositories wired
// through the DI container. We intentionally avoid hardcoded fallback driver
// lists here so that the demo data stays consistent across pages.

// ============================================================================
// SKILL LEVEL CONFIG
// ============================================================================

const SKILL_LEVELS: {
  id: string;
  label: string;
  icon: React.ElementType;
  color: string;
  bgColor: string;
  borderColor: string;
  description: string;
}[] = [
  { id: 'pro', label: 'Pro', icon: Crown, color: 'text-yellow-400', bgColor: 'bg-yellow-400/10', borderColor: 'border-yellow-400/30', description: 'Elite competition level' },
  { id: 'advanced', label: 'Advanced', icon: Star, color: 'text-purple-400', bgColor: 'bg-purple-400/10', borderColor: 'border-purple-400/30', description: 'Highly competitive' },
  { id: 'intermediate', label: 'Intermediate', icon: TrendingUp, color: 'text-primary-blue', bgColor: 'bg-primary-blue/10', borderColor: 'border-primary-blue/30', description: 'Developing skills' },
  { id: 'beginner', label: 'Beginner', icon: Shield, color: 'text-green-400', bgColor: 'bg-green-400/10', borderColor: 'border-green-400/30', description: 'Learning the ropes' },
];

// ============================================================================
// CATEGORY CONFIG
// ============================================================================

const CATEGORIES: {
  id: string;
  label: string;
  color: string;
  bgColor: string;
  borderColor: string;
}[] = [
  { 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' },
];

// ============================================================================
// FEATURED DRIVER CARD COMPONENT
// ============================================================================

interface FeaturedDriverCardProps {
  driver: DriverLeaderboardItemViewModel;
  position: number;
  onClick: () => void;
}

function FeaturedDriverCard({ driver, position, onClick }: FeaturedDriverCardProps) {
  const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
  const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);

  const getBorderColor = (pos: number) => {
    switch (pos) {
      case 1: return 'border-yellow-400/50 hover:border-yellow-400';
      case 2: return 'border-gray-300/50 hover:border-gray-300';
      case 3: return 'border-amber-600/50 hover:border-amber-600';
      default: return 'border-charcoal-outline hover:border-primary-blue';
    }
  };

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

  return (
    <button
      type="button"
      onClick={onClick}
      className={`p-5 rounded-xl bg-iron-gray/60 border-2 ${getBorderColor(position)} transition-all duration-200 text-left group hover:scale-[1.02]`}
    >
      {/* Header with Position */}
      <div className="flex items-start justify-between mb-4">
        <div className={`flex h-10 w-10 items-center justify-center rounded-full ${position <= 3 ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}`}>
          {position <= 3 ? (
            <Crown className={`w-5 h-5 ${getMedalColor(position)}`} />
          ) : (
            <span className="text-lg font-bold text-gray-400">#{position}</span>
          )}
        </div>
        <div className="flex gap-2">
          {categoryConfig && (
            <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${categoryConfig.bgColor} ${categoryConfig.color} border ${categoryConfig.borderColor}`}>
              {categoryConfig.label}
            </span>
          )}
          <span className={`px-2 py-1 rounded-full text-[10px] font-medium ${levelConfig?.bgColor} ${levelConfig?.color} border ${levelConfig?.borderColor}`}>
            {levelConfig?.label}
          </span>
        </div>
      </div>

      {/* Avatar & Name */}
      <div className="flex items-center gap-4 mb-4">
        <div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-charcoal-outline group-hover:border-primary-blue transition-colors">
          <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
        </div>
        <div>
          <h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors">
            {driver.name}
          </h3>
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Flag className="w-3.5 h-3.5" />
            {driver.nationality}
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-primary-blue">{driver.rating.toLocaleString()}</p>
          <p className="text-[10px] text-gray-500">Rating</p>
        </div>
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-performance-green">{driver.wins}</p>
          <p className="text-[10px] text-gray-500">Wins</p>
        </div>
        <div className="text-center p-2 rounded-lg bg-charcoal-outline/30">
          <p className="text-lg font-bold text-warning-amber">{driver.podiums}</p>
          <p className="text-[10px] text-gray-500">Podiums</p>
        </div>
      </div>
    </button>
  );
}

// ============================================================================
// SKILL DISTRIBUTION COMPONENT
// ============================================================================

interface SkillDistributionProps {
  drivers: DriverLeaderboardItemViewModel[];
}

function SkillDistribution({ drivers }: SkillDistributionProps) {
  const distribution = SKILL_LEVELS.map((level) => ({
    ...level,
    count: drivers.filter((d) => d.skillLevel === level.id).length,
    percentage: drivers.length > 0
      ? Math.round((drivers.filter((d) => d.skillLevel === level.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-neon-aqua/10 border border-neon-aqua/20">
          <BarChart3 className="w-5 h-5 text-neon-aqua" />
        </div>
        <div>
          <h2 className="text-lg font-semibold text-white">Skill Distribution</h2>
          <p className="text-xs text-gray-500">Driver population by skill level</p>
        </div>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
        {distribution.map((level) => {
          const Icon = level.icon;
          return (
            <div
              key={level.id}
              className={`p-4 rounded-xl ${level.bgColor} border ${level.borderColor}`}
            >
              <div className="flex items-center justify-between mb-3">
                <Icon className={`w-5 h-5 ${level.color}`} />
                <span className={`text-2xl font-bold ${level.color}`}>{level.count}</span>
              </div>
              <p className="text-white font-medium mb-1">{level.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 ${
                    level.id === 'pro' ? 'bg-yellow-400' :
                    level.id === 'advanced' ? 'bg-purple-400' :
                    level.id === 'intermediate' ? 'bg-primary-blue' :
                    'bg-green-400'
                  }`}
                  style={{ width: `${level.percentage}%` }}
                />
              </div>
              <p className="text-xs text-gray-500 mt-1">{level.percentage}% of drivers</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================================
// CATEGORY DISTRIBUTION COMPONENT
// ============================================================================

interface CategoryDistributionProps {
  drivers: DriverLeaderboardItemViewModel[];
}

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>
  );
}

// ============================================================================
// LEADERBOARD PREVIEW COMPONENT
// ============================================================================

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

function LeaderboardPreview({ drivers, onDriverClick }: LeaderboardPreviewProps) {
  const router = useRouter();
  const top5 = drivers.slice(0, 5);

  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-yellow-400/10 border-yellow-400/30';
      case 2: return 'bg-gray-300/10 border-gray-300/30';
      case 3: return 'bg-amber-600/10 border-amber-600/30';
      default: return 'bg-iron-gray/50 border-charcoal-outline';
    }
  };

  return (
    <div className="mb-10">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
            <Award className="w-5 h-5 text-yellow-400" />
          </div>
          <div>
            <h2 className="text-lg font-semibold text-white">Top Drivers</h2>
            <p className="text-xs text-gray-500">Highest rated competitors</p>
          </div>
        </div>

        <Button
          variant="secondary"
          onClick={() => router.push('/leaderboards/drivers')}
          className="flex items-center gap-2 text-sm"
        >
          Full Rankings
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

      <div className="rounded-xl bg-iron-gray/30 border border-charcoal-outline overflow-hidden">
        <div className="divide-y divide-charcoal-outline/50">
          {top5.map((driver, index) => {
            const levelConfig = SKILL_LEVELS.find((l) => l.id === driver.skillLevel);
            const categoryConfig = CATEGORIES.find((c) => c.id === driver.category);
            const position = index + 1;

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

                {/* Avatar */}
                <div className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-charcoal-outline">
                  <Image src={driver.avatarUrl || mediaConfig.avatars.defaultFallback} alt={driver.name} fill className="object-cover" />
                </div>

                {/* Info */}
                <div className="flex-1 min-w-0">
                  <p className="text-white font-medium truncate group-hover:text-primary-blue transition-colors">
                    {driver.name}
                  </p>
                  <div className="flex items-center gap-2 text-xs text-gray-500">
                    <Flag className="w-3 h-3" />
                    {driver.nationality}
                    {categoryConfig && (
                      <span className={categoryConfig.color}>{categoryConfig.label}</span>
                    )}
                    <span className={levelConfig?.color}>{levelConfig?.label}</span>
                  </div>
                </div>

                {/* Stats */}
                <div className="flex items-center gap-4 text-sm">
                  <div className="text-center">
                    <p className="text-primary-blue font-mono font-semibold">{driver.rating.toLocaleString()}</p>
                    <p className="text-[10px] text-gray-500">Rating</p>
                  </div>
                  <div className="text-center">
                    <p className="text-performance-green font-mono font-semibold">{driver.wins}</p>
                    <p className="text-[10px] text-gray-500">Wins</p>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// RECENT ACTIVITY COMPONENT
// ============================================================================

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

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>
  );
}

// ============================================================================
// MAIN PAGE COMPONENT
// ============================================================================

export default function DriversPage() {
  const router = useRouter();
  const { data: viewModel, isLoading: loading } = useDriverLeaderboard();
  const [searchQuery, setSearchQuery] = useState('');

  const drivers = viewModel?.drivers || [];
  const totalRaces = viewModel?.totalRaces || 0;
  const totalWins = viewModel?.totalWins || 0;
  const activeCount = viewModel?.activeCount || 0;

  const handleDriverClick = (driverId: string) => {
    router.push(`/drivers/${driverId}`);
  };

  // Filter by search
  const filteredDrivers = drivers.filter((driver) => {
    if (!searchQuery) return true;
    return (
      driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      driver.nationality.toLowerCase().includes(searchQuery.toLowerCase())
    );
  });


  // Featured drivers (top 4)
  const featuredDrivers = filteredDrivers.slice(0, 4);

  if (loading) {
    return (
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-4">
            <div className="w-10 h-10 border-2 border-primary-blue border-t-transparent rounded-full animate-spin" />
            <p className="text-gray-400">Loading drivers...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 pb-12">
      {/* Hero Section */}
      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray/80 to-deep-graphite border border-primary-blue/30 overflow-hidden">
        {/* Background decoration */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-primary-blue/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-3xl" />
        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-performance-green/5 rounded-full blur-2xl" />

        <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8">
          <div className="max-w-2xl">
            <div className="flex items-center gap-3 mb-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/20">
                <Users className="w-6 h-6 text-primary-blue" />
              </div>
              <Heading level={1} className="text-3xl lg:text-4xl">
                Drivers
              </Heading>
            </div>
            <p className="text-gray-400 text-lg leading-relaxed mb-6">
              Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
            </p>

            {/* Quick Stats */}
            <div className="flex flex-wrap gap-6">
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-primary-blue" />
                <span className="text-sm text-gray-400">
                  <span className="text-white font-semibold">{drivers.length}</span> drivers
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
                <span className="text-sm text-gray-400">
                  <span className="text-white font-semibold">{activeCount}</span> active
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-yellow-400" />
                <span className="text-sm text-gray-400">
                  <span className="text-white font-semibold">{totalWins.toLocaleString()}</span> total wins
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-2 h-2 rounded-full bg-neon-aqua" />
                <span className="text-sm text-gray-400">
                  <span className="text-white font-semibold">{totalRaces.toLocaleString()}</span> races
                </span>
              </div>
            </div>
          </div>

          {/* CTA */}
          <div className="flex flex-col gap-4">
            <Button
              variant="primary"
              onClick={() => router.push('/leaderboards/drivers')}
              className="flex items-center gap-2 px-6 py-3"
            >
              <Trophy className="w-5 h-5" />
              View Leaderboard
            </Button>
            <p className="text-xs text-gray-500 text-center">See full driver rankings</p>
          </div>
        </div>
      </div>

      {/* Search */}
      <div className="mb-8">
        <div className="relative max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
          <Input
            type="text"
            placeholder="Search drivers by name or nationality..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-11"
          />
        </div>
      </div>

      {/* Featured Drivers */}
      {!searchQuery && (
        <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-yellow-400/10 border border-yellow-400/20">
              <Crown className="w-5 h-5 text-yellow-400" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-white">Featured Drivers</h2>
              <p className="text-xs text-gray-500">Top performers on the grid</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {featuredDrivers.map((driver, index) => (
              <FeaturedDriverCard
                key={driver.id}
                driver={driver}
                position={index + 1}
                onClick={() => handleDriverClick(driver.id)}
              />
            ))}
          </div>
        </div>
      )}

      {/* Active Drivers */}
      {!searchQuery && <RecentActivity drivers={drivers} onDriverClick={handleDriverClick} />}

      {/* Skill Distribution */}
      {!searchQuery && <SkillDistribution drivers={drivers} />}

      {/* Category Distribution */}
      {!searchQuery && <CategoryDistribution drivers={drivers} />}

      {/* Leaderboard Preview */}
      <LeaderboardPreview drivers={filteredDrivers} onDriverClick={handleDriverClick} />

      {/* Empty State */}
      {filteredDrivers.length === 0 && (
        <Card className="text-center py-12">
          <div className="flex flex-col items-center gap-4">
            <Search className="w-10 h-10 text-gray-600" />
            <p className="text-gray-400">No drivers found matching "{searchQuery}"</p>
            <Button variant="secondary" onClick={() => setSearchQuery('')}>
              Clear search
            </Button>
          </div>
        </Card>
      )}
    </div>
  );
}