'use client';

import Link from 'next/link';
import Image from 'next/image';
import {
  Trophy,
  Users,
  Flag,
  Award,
  Gamepad2,
  Calendar,
  ChevronRight,
  Sparkles,
} from 'lucide-react';
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
import { getLeagueCoverClasses } from '@/lib/leagueCovers';
import PlaceholderImage from '@/ui/PlaceholderImage';
import { getMediaUrl } from '@/lib/utilities/media';

interface LeagueCardProps {
  league: LeagueSummaryViewModel;
  onClick?: () => void;
}

function getChampionshipIcon(type?: string) {
  switch (type) {
    case 'driver':
      return Trophy;
    case 'team':
      return Users;
    case 'nations':
      return Flag;
    case 'trophy':
      return Award;
    default:
      return Trophy;
  }
}

function getChampionshipLabel(type?: string) {
  switch (type) {
    case 'driver':
      return 'Driver';
    case 'team':
      return 'Team';
    case 'nations':
      return 'Nations';
    case 'trophy':
      return 'Trophy';
    default:
      return 'Championship';
  }
}

function getCategoryLabel(category?: string): string {
  if (!category) return '';
  
  switch (category) {
    case 'driver':
      return 'Driver';
    case 'team':
      return 'Team';
    case 'nations':
      return 'Nations';
    case 'trophy':
      return 'Trophy';
    case 'endurance':
      return 'Endurance';
    case 'sprint':
      return 'Sprint';
    default:
      return category.charAt(0).toUpperCase() + category.slice(1);
  }
}

function getCategoryColor(category?: string): string {
  if (!category) return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
  
  switch (category) {
    case 'driver':
      return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
    case 'team':
      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
    case 'nations':
      return 'bg-green-500/20 text-green-400 border-green-500/30';
    case 'trophy':
      return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
    case 'endurance':
      return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
    case 'sprint':
      return 'bg-red-500/20 text-red-400 border-red-500/30';
    default:
      return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
  }
}

function getGameColor(gameId?: string): string {
  switch (gameId) {
    case 'iracing':
      return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
    case 'acc':
      return 'bg-green-500/20 text-green-400 border-green-500/30';
    case 'f1-23':
    case 'f1-24':
      return 'bg-red-500/20 text-red-400 border-red-500/30';
    default:
      return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
  }
}

function isNewLeague(createdAt: string | Date): boolean {
  const oneWeekAgo = new Date();
  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
  return new Date(createdAt) > oneWeekAgo;
}

export default function LeagueCard({ league, onClick }: LeagueCardProps) {
  const coverUrl = getMediaUrl('league-cover', league.id);
  const logoUrl = league.logoUrl;
  
  const ChampionshipIcon = getChampionshipIcon(league.scoring?.primaryChampionshipType);
  const championshipLabel = getChampionshipLabel(league.scoring?.primaryChampionshipType);
  const gameColorClass = getGameColor(league.scoring?.gameId);
  const isNew = isNewLeague(league.createdAt);
  const isTeamLeague = league.maxTeams && league.maxTeams > 0;
  const categoryLabel = getCategoryLabel(league.category);
  const categoryColorClass = getCategoryColor(league.category);
  
  // Calculate fill percentage - use teams for team leagues, drivers otherwise
  const usedSlots = isTeamLeague ? (league.usedTeamSlots ?? 0) : (league.usedDriverSlots ?? 0);
  const maxSlots = isTeamLeague ? (league.maxTeams ?? 0) : (league.maxDrivers ?? 0);
  const fillPercentage = maxSlots > 0 ? (usedSlots / maxSlots) * 100 : 0;
  const hasOpenSlots = maxSlots > 0 && usedSlots < maxSlots;
  
  // Determine slot label based on championship type
  const getSlotLabel = () => {
    if (isTeamLeague) return 'Teams';
    if (league.scoring?.primaryChampionshipType === 'nations') return 'Nations';
    return 'Drivers';
  };
  const slotLabel = getSlotLabel();

  return (
    <div
      className="group relative cursor-pointer h-full"
      onClick={onClick}
    >
      {/* Card Container */}
      <div className="relative h-full rounded-xl bg-iron-gray border border-charcoal-outline overflow-hidden transition-all duration-200 hover:border-primary-blue/50 hover:shadow-[0_0_30px_rgba(25,140,255,0.15)] hover:bg-iron-gray/80">
        {/* Cover Image */}
        <div className="relative h-32 overflow-hidden">
          <img
            src={coverUrl}
            alt={`${league.name} cover`}
            className="absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
            loading="lazy"
            decoding="async"
          />
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-iron-gray via-iron-gray/60 to-transparent" />
          
          {/* Badges - Top Left */}
          <div className="absolute top-3 left-3 flex items-center gap-2">
            {isNew && (
              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-performance-green/20 text-performance-green border border-performance-green/30">
                <Sparkles className="w-3 h-3" />
                NEW
              </span>
            )}
            {league.scoring?.gameName && (
              <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${gameColorClass}`}>
                {league.scoring.gameName}
              </span>
            )}
            {league.category && (
              <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold border ${categoryColorClass}`}>
                {categoryLabel}
              </span>
            )}
          </div>

          {/* Championship Type Badge - Top Right */}
          <div className="absolute top-3 right-3">
            <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-deep-graphite/80 text-gray-300 border border-charcoal-outline">
              <ChampionshipIcon className="w-3 h-3" />
              {championshipLabel}
            </span>
          </div>

          {/* Logo */}
          <div className="absolute left-4 -bottom-6 z-10">
            <div className="w-12 h-12 rounded-lg overflow-hidden border-2 border-iron-gray bg-deep-graphite shadow-xl">
              {logoUrl ? (
                <img
                  src={logoUrl}
                  alt={`${league.name} logo`}
                  width={48}
                  height={48}
                  className="h-full w-full object-cover"
                  loading="lazy"
                  decoding="async"
                />
              ) : (
                <PlaceholderImage size={48} />
              )}
            </div>
          </div>
        </div>

        {/* Content */}
        <div className="pt-8 px-4 pb-4 flex flex-col flex-1">
          {/* Title & Description */}
          <h3 className="text-base font-semibold text-white mb-1 line-clamp-1 group-hover:text-primary-blue transition-colors">
            {league.name}
          </h3>
          <p className="text-xs text-gray-500 line-clamp-2 mb-3 h-8">
            {league.description || 'No description available'}
          </p>

          {/* Stats Row */}
          <div className="flex items-center gap-3 mb-3">
            {/* Primary Slots (Drivers/Teams/Nations) */}
            <div className="flex-1">
              <div className="flex items-center justify-between text-[10px] text-gray-500 mb-1">
                <span>{slotLabel}</span>
                <span className="text-gray-400">
                  {usedSlots}/{maxSlots || '∞'}
                </span>
              </div>
              <div className="h-1.5 rounded-full bg-charcoal-outline overflow-hidden">
                <div
                  className={`h-full rounded-full transition-all ${
                    fillPercentage >= 90
                      ? 'bg-warning-amber'
                      : fillPercentage >= 70
                      ? 'bg-primary-blue'
                      : 'bg-performance-green'
                  }`}
                  style={{ width: `${Math.min(fillPercentage, 100)}%` }}
                />
              </div>
            </div>

            {/* Open Slots Badge */}
            {hasOpenSlots && (
              <div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-neon-aqua/10 border border-neon-aqua/20">
                <span className="w-1.5 h-1.5 rounded-full bg-neon-aqua animate-pulse" />
                <span className="text-[10px] text-neon-aqua font-medium">
                  {maxSlots - usedSlots} open
                </span>
              </div>
            )}
          </div>

          {/* Driver count for team leagues */}
          {isTeamLeague && (
            <div className="flex items-center gap-2 mb-3 text-[10px] text-gray-500">
              <Users className="w-3 h-3" />
              <span>
                {league.usedDriverSlots ?? 0}/{league.maxDrivers ?? '∞'} drivers
              </span>
            </div>
          )}

          {/* Spacer to push footer to bottom */}
          <div className="flex-1" />

          {/* Footer Info */}
          <div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50 mt-auto">
            <div className="flex items-center gap-3 text-[10px] text-gray-500">
              {league.timingSummary && (
                <span className="flex items-center gap-1">
                  <Calendar className="w-3 h-3" />
                  {league.timingSummary.split('•')[1]?.trim() || league.timingSummary}
                </span>
              )}
            </div>
            
            {/* View Arrow */}
            <div className="flex items-center gap-1 text-[10px] text-gray-500 group-hover:text-primary-blue transition-colors">
              <span>View</span>
              <ChevronRight className="w-3 h-3 transition-transform group-hover:translate-x-0.5" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}