'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 '@core/racing/application/presenters/IAllLeaguesWithCapacityAndScoringPresenter';
import { getLeagueCoverClasses } from '@/lib/leagueCovers';

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 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 imageService = getImageService();
  const coverUrl = imageService.getLeagueCover(league.id);
  const logoUrl = imageService.getLeagueLogo(league.id);
  
  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;
  
  // 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">
          <Image
            src={coverUrl}
            alt={`${league.name} cover`}
            fill
            className="object-cover transition-transform duration-300 group-hover:scale-105"
            sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
          />
          {/* 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>
            )}
          </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">
              <Image
                src={logoUrl}
                alt={`${league.name} logo`}
                width={48}
                height={48}
                className="w-full h-full object-cover"
              />
            </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>
  );
}