'use client';

import {
  FileText,
  Users,
  Calendar,
  Trophy,
  Award,
  Rocket,
  Eye,
  EyeOff,
  Gamepad2,
  User,
  UsersRound,
  Clock,
  Flag,
  Zap,
  Timer,
  TrendingDown,
  Check,
  Globe,
  Medal,
} from 'lucide-react';
import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
import type { LeagueScoringPresetDTO } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
 
interface LeagueReviewSummaryProps {
  form: LeagueConfigFormModel;
  presets: LeagueScoringPresetDTO[];
}

// Individual review card component
function ReviewCard({
  icon: Icon,
  iconColor = 'text-primary-blue',
  bgColor = 'bg-primary-blue/10',
  title,
  children,
}: {
  icon: React.ElementType;
  iconColor?: string;
  bgColor?: string;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 space-y-3">
      <div className="flex items-center gap-3">
        <div className={`flex h-9 w-9 items-center justify-center rounded-lg ${bgColor}`}>
          <Icon className={`w-4 h-4 ${iconColor}`} />
        </div>
        <h3 className="text-sm font-semibold text-white">{title}</h3>
      </div>
      {children}
    </div>
  );
}

// Info row component for consistent layout
function InfoRow({
  icon: Icon,
  label,
  value,
  valueClass = '',
}: {
  icon?: React.ElementType;
  label: string;
  value: React.ReactNode;
  valueClass?: string;
}) {
  return (
    <div className="flex items-center justify-between py-2 border-b border-charcoal-outline/20 last:border-0">
      <div className="flex items-center gap-2 text-xs text-gray-500">
        {Icon && <Icon className="w-3.5 h-3.5" />}
        <span>{label}</span>
      </div>
      <div className={`text-sm font-medium text-white ${valueClass}`}>{value}</div>
    </div>
  );
}

// Badge component for enabled features
function FeatureBadge({
  icon: Icon,
  label,
  enabled,
  color = 'primary-blue',
}: {
  icon: React.ElementType;
  label: string;
  enabled: boolean;
  color?: string;
}) {
  if (!enabled) return null;
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full bg-${color}/10 px-3 py-1.5 text-xs font-medium text-${color}`}>
      <Icon className="w-3 h-3" />
      {label}
    </span>
  );
}
 
export default function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps) {
  const { basics, structure, timings, scoring, championships, dropPolicy, stewarding } = form;
  const seasonName = (form as LeagueConfigFormModel & { seasonName?: string }).seasonName;
 
  const modeLabel =
    structure.mode === 'solo'
      ? 'Solo drivers'
      : 'Team-based';
 
  const modeDescription =
    structure.mode === 'solo'
      ? 'Individual competition'
      : 'Teams with fixed rosters';

  const capacityValue = (() => {
    if (structure.mode === 'solo') {
      return typeof structure.maxDrivers === 'number' ? structure.maxDrivers : '—';
    }
    return typeof structure.maxTeams === 'number' ? structure.maxTeams : '—';
  })();

  const capacityLabel = structure.mode === 'solo' ? 'drivers' : 'teams';
 
  const formatMinutes = (value: number | undefined) => {
    if (typeof value !== 'number' || value <= 0) return '—';
    return `${value} min`;
  };
 
  const getDropRuleInfo = () => {
    if (dropPolicy.strategy === 'none') {
      return { emoji: '✓', label: 'All count', description: 'Every race counts' };
    }
    if (dropPolicy.strategy === 'bestNResults') {
      return {
        emoji: '🏆',
        label: `Best ${dropPolicy.n ?? 'N'}`,
        description: `Only best ${dropPolicy.n ?? 'N'} results count`,
      };
    }
    if (dropPolicy.strategy === 'dropWorstN') {
      return {
        emoji: '🗑️',
        label: `Drop ${dropPolicy.n ?? 'N'}`,
        description: `Worst ${dropPolicy.n ?? 'N'} dropped`,
      };
    }
    return { emoji: '✓', label: 'All count', description: 'Every race counts' };
  };
const dropRuleInfo = getDropRuleInfo();

const preset = presets.find((p) => p.id === scoring.patternId) ?? null;

const seasonStartLabel =
  timings.seasonStartDate
    ? new Date(timings.seasonStartDate).toLocaleDateString(undefined, {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
      })
    : null;

const stewardingLabel = (() => {
  switch (stewarding.decisionMode) {
    case 'admin_only':
      return 'Admin-only decisions';
    case 'steward_vote':
      return 'Steward panel voting';
    default:
      return stewarding.decisionMode;
  }
})();

 
  const getScoringEmoji = () => {
    if (!preset) return '🏁';
    const name = preset.name.toLowerCase();
    if (name.includes('sprint') || name.includes('double')) return '⚡';
    if (name.includes('endurance') || name.includes('long')) return '🏆';
    if (name.includes('club') || name.includes('casual')) return '🏅';
    return '🏁';
  };
 
  // Normalize visibility to new terminology
  const isRanked = basics.visibility === 'ranked' || basics.visibility === 'public';
  const visibilityLabel = isRanked ? 'Ranked' : 'Unranked';
  const visibilityDescription = isRanked
    ? 'Competitive • Affects ratings'
    : 'Casual • Friends only';

  // Calculate total weekend duration
  const totalWeekendMinutes = (timings.practiceMinutes ?? 0) +
    (timings.qualifyingMinutes ?? 0) +
    (timings.sprintRaceMinutes ?? 0) +
    (timings.mainRaceMinutes ?? 0);
   
  return (
    <div className="space-y-6">
      {/* League Summary */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-gray-300">League summary</h3>
        <div className="relative rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray to-iron-gray border border-primary-blue/30 p-6 overflow-hidden">
          {/* Background decoration */}
          <div className="absolute top-0 right-0 w-32 h-32 bg-primary-blue/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-24 h-24 bg-neon-aqua/5 rounded-full blur-2xl" />
          
          <div className="relative flex items-start gap-4">
            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/20 border border-primary-blue/30 shrink-0">
              <Rocket className="w-7 h-7 text-primary-blue" />
            </div>
            <div className="flex-1 min-w-0">
              <h2 className="text-xl font-bold text-white mb-1 truncate">
                {basics.name || 'Your New League'}
              </h2>
              <p className="text-sm text-gray-400 mb-3">
                {basics.description || 'Ready to launch your racing series!'}
              </p>
              <div className="flex flex-wrap items-center gap-3">
                {/* Ranked/Unranked Badge */}
                <span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium ${
                  isRanked
                    ? 'bg-primary-blue/15 text-primary-blue border border-primary-blue/30'
                    : 'bg-neon-aqua/15 text-neon-aqua border border-neon-aqua/30'
                }`}>
                  {isRanked ? <Trophy className="w-3 h-3" /> : <Users className="w-3 h-3" />}
                  <span className="font-semibold">{visibilityLabel}</span>
                  <span className="text-[10px] opacity-70">• {visibilityDescription}</span>
                </span>
                <span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
                  <Gamepad2 className="w-3 h-3" />
                  iRacing
                </span>
                <span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
                  {structure.mode === 'solo' ? <User className="w-3 h-3" /> : <UsersRound className="w-3 h-3" />}
                  {modeLabel}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
 
      {/* Season Summary */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold text-gray-300">First season summary</h3>
        <div className="flex flex-wrap items-center gap-2 text-xs text-gray-400">
          <span>{seasonName || 'First season of this league'}</span>
          {seasonStartLabel && (
            <>
              <span>•</span>
              <span>Starts {seasonStartLabel}</span>
            </>
          )}
          {typeof timings.roundsPlanned === 'number' && (
            <>
              <span>•</span>
              <span>{timings.roundsPlanned} rounds planned</span>
            </>
          )}
          <span>•</span>
          <span>Stewarding: {stewardingLabel}</span>
        </div>
        {/* Stats Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {/* Capacity */}
          <div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10 mx-auto mb-2">
              <Users className="w-5 h-5 text-primary-blue" />
            </div>
            <div className="text-2xl font-bold text-white">{capacityValue}</div>
            <div className="text-xs text-gray-500">{capacityLabel}</div>
          </div>
 
          {/* Rounds */}
          <div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10 mx-auto mb-2">
              <Flag className="w-5 h-5 text-performance-green" />
            </div>
            <div className="text-2xl font-bold text-white">{timings.roundsPlanned ?? '—'}</div>
            <div className="text-xs text-gray-500">rounds</div>
          </div>
 
          {/* Weekend Duration */}
          <div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10 mx-auto mb-2">
              <Timer className="w-5 h-5 text-warning-amber" />
            </div>
            <div className="text-2xl font-bold text-white">{totalWeekendMinutes > 0 ? `${totalWeekendMinutes}` : '—'}</div>
            <div className="text-xs text-gray-500">min/weekend</div>
          </div>
 
          {/* Championships */}
          <div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neon-aqua/10 mx-auto mb-2">
              <Award className="w-5 h-5 text-neon-aqua" />
            </div>
            <div className="text-2xl font-bold text-white">
              {[championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].filter(Boolean).length}
            </div>
            <div className="text-xs text-gray-500">championships</div>
          </div>
        </div>
      </div>
 
      {/* Detail Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* Schedule Card */}
        <ReviewCard icon={Calendar} title="Race Weekend">
          <div className="space-y-1">
            {timings.practiceMinutes && timings.practiceMinutes > 0 && (
              <InfoRow icon={Clock} label="Practice" value={formatMinutes(timings.practiceMinutes)} />
            )}
            <InfoRow icon={Clock} label="Qualifying" value={formatMinutes(timings.qualifyingMinutes)} />
            {timings.sprintRaceMinutes && timings.sprintRaceMinutes > 0 && (
              <InfoRow icon={Zap} label="Sprint Race" value={formatMinutes(timings.sprintRaceMinutes)} />
            )}
            <InfoRow icon={Flag} label="Main Race" value={formatMinutes(timings.mainRaceMinutes)} />
          </div>
        </ReviewCard>
 
        {/* Scoring Card */}
        <ReviewCard icon={Trophy} iconColor="text-warning-amber" bgColor="bg-warning-amber/10" title="Scoring System">
          <div className="space-y-3">
            {/* Scoring Preset */}
            <div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
              <span className="text-2xl">{getScoringEmoji()}</span>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-white">{preset?.name ?? 'Custom'}</div>
                <div className="text-xs text-gray-500">{preset?.sessionSummary ?? 'Custom scoring enabled'}</div>
              </div>
              {scoring.customScoringEnabled && (
                <span className="px-2 py-0.5 rounded bg-primary-blue/20 text-[10px] font-medium text-primary-blue">Custom</span>
              )}
            </div>
 
            {/* Drop Rule */}
            <div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline/50">
                <span className="text-base">{dropRuleInfo.emoji}</span>
              </div>
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium text-white">{dropRuleInfo.label}</div>
                <div className="text-xs text-gray-500">{dropRuleInfo.description}</div>
              </div>
            </div>
          </div>
        </ReviewCard>
      </div>
 
      {/* Championships Section */}
      <ReviewCard icon={Award} iconColor="text-neon-aqua" bgColor="bg-neon-aqua/10" title="Active Championships">
        <div className="flex flex-wrap gap-2">
          {championships.enableDriverChampionship && (
            <span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
              <Trophy className="w-3.5 h-3.5" />
              Driver Championship
              <Check className="w-3 h-3 text-performance-green" />
            </span>
          )}
          {championships.enableTeamChampionship && (
            <span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
              <Award className="w-3.5 h-3.5" />
              Team Championship
              <Check className="w-3 h-3 text-performance-green" />
            </span>
          )}
          {championships.enableNationsChampionship && (
            <span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
              <Globe className="w-3.5 h-3.5" />
              Nations Cup
              <Check className="w-3 h-3 text-performance-green" />
            </span>
          )}
          {championships.enableTrophyChampionship && (
            <span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
              <Medal className="w-3.5 h-3.5" />
              Trophy Championship
              <Check className="w-3 h-3 text-performance-green" />
            </span>
          )}
          {![championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].some(Boolean) && (
            <span className="text-sm text-gray-500">No championships enabled</span>
          )}
        </div>
      </ReviewCard>
 
      {/* Ready to launch message */}
      <div className="rounded-xl bg-performance-green/5 border border-performance-green/20 p-4">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/20">
            <Check className="w-5 h-5 text-performance-green" />
          </div>
          <div>
            <p className="text-sm font-medium text-white">Ready to launch!</p>
            <p className="text-xs text-gray-400">
              Click "Create League" to launch your racing series. You can modify all settings later.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}