wip

apps/website/components/leagues/LeagueReviewSummary.tsx

@@ -1,7 +1,26 @@
 'use client';
 
-import { FileText, Users, Calendar, Trophy, Award, Info } from 'lucide-react';
-import Card from '@/components/ui/Card';
+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';
  
@@ -9,243 +28,326 @@ 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 } = form;
  
   const modeLabel =
     structure.mode === 'solo'
-      ? 'Drivers only (solo)'
-      : 'Teams with fixed drivers per team';
+      ? 'Solo drivers'
+      : 'Team-based';
  
-  const capacitySentence = (() => {
+  const modeDescription =
+    structure.mode === 'solo'
+      ? 'Individual competition'
+      : 'Teams with fixed rosters';
+
+  const capacityValue = (() => {
     if (structure.mode === 'solo') {
-      if (typeof structure.maxDrivers === 'number') {
-        return `Up to ${structure.maxDrivers} drivers`;
-      }
-      return 'Capacity not fully specified';
+      return typeof structure.maxDrivers === 'number' ? structure.maxDrivers : '—';
     }
-    const parts: string[] = [];
-    if (typeof structure.maxTeams === 'number') {
-      parts.push(`Teams: ${structure.maxTeams}`);
-    }
-    if (typeof structure.driversPerTeam === 'number') {
-      parts.push(`Drivers per team: ${structure.driversPerTeam}`);
-    }
-    if (typeof structure.maxDrivers === 'number') {
-      parts.push(`Max grid: ${structure.maxDrivers}`);
-    }
-    if (parts.length === 0) {
-      return '—';
-    }
-    return parts.join(', ');
+    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 dropRuleSentence = (() => {
+  const getDropRuleInfo = () => {
     if (dropPolicy.strategy === 'none') {
-      return 'All results will count towards the championship.';
+      return { emoji: '✓', label: 'All count', description: 'Every race counts' };
     }
     if (dropPolicy.strategy === 'bestNResults') {
-      if (typeof dropPolicy.n === 'number' && dropPolicy.n > 0) {
-        return `Best ${dropPolicy.n} results will count; others are ignored.`;
-      }
-      return 'Best N results will count; others are ignored.';
+      return {
+        emoji: '🏆',
+        label: `Best ${dropPolicy.n ?? 'N'}`,
+        description: `Only best ${dropPolicy.n ?? 'N'} results count`,
+      };
     }
     if (dropPolicy.strategy === 'dropWorstN') {
-      if (typeof dropPolicy.n === 'number' && dropPolicy.n > 0) {
-        return `Worst ${dropPolicy.n} results will be dropped from the standings.`;
-      }
-      return 'Worst N results will be dropped from the standings.';
+      return {
+        emoji: '🗑️',
+        label: `Drop ${dropPolicy.n ?? 'N'}`,
+        description: `Worst ${dropPolicy.n ?? 'N'} dropped`,
+      };
     }
-    return 'All results will count towards the championship.';
-  })();
+    return { emoji: '✓', label: 'All count', description: 'Every race counts' };
+  };
+
+  const dropRuleInfo = getDropRuleInfo();
  
-  const preset =
-    presets.find((p) => p.id === scoring.patternId) ?? null;
+  const preset = presets.find((p) => p.id === scoring.patternId) ?? null;
  
-  const scoringPresetName = preset ? preset.name : scoring.patternId ? 'Preset not found' : '—';
-  const scoringPatternSummary = preset?.sessionSummary ?? '—';
-  const dropPolicySummary = dropRuleSentence;
- 
-  const enabledChampionshipsLabels: string[] = [];
-  if (championships.enableDriverChampionship) enabledChampionshipsLabels.push('Driver');
-  if (championships.enableTeamChampionship) enabledChampionshipsLabels.push('Team');
-  if (championships.enableNationsChampionship) enabledChampionshipsLabels.push('Nations Cup');
-  if (championships.enableTrophyChampionship) enabledChampionshipsLabels.push('Trophy');
- 
-  const championshipsSummary =
-    enabledChampionshipsLabels.length === 0
-      ? 'None enabled yet.'
-      : enabledChampionshipsLabels.join(', ');
+  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 '🏁';
+  };
  
+  const visibilityIcon = basics.visibility === 'public' ? Eye : EyeOff;
   const visibilityLabel = basics.visibility === 'public' ? 'Public' : 'Private';
-  const gameLabel = 'iRacing';
+
+  // Calculate total weekend duration
+  const totalWeekendMinutes = (timings.practiceMinutes ?? 0) +
+    (timings.qualifyingMinutes ?? 0) +
+    (timings.sprintRaceMinutes ?? 0) +
+    (timings.mainRaceMinutes ?? 0);
  
   return (
     <div className="space-y-6">
-      <div className="rounded-lg bg-primary-blue/5 border border-primary-blue/20 p-4">
-        <div className="flex items-start gap-3">
-          <Info className="w-5 h-5 text-primary-blue shrink-0 mt-0.5" />
-          <div>
-            <p className="text-sm font-medium text-white mb-1">Review your league configuration</p>
-            <p className="text-xs text-gray-400">
-              Double-check all settings before creating your league. You can modify most of these later.
+      {/* Hero Banner */}
+      <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">
+              <span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium ${
+                basics.visibility === 'public'
+                  ? 'bg-performance-green/10 text-performance-green'
+                  : 'bg-warning-amber/10 text-warning-amber'
+              }`}>
+                {basics.visibility === 'public' ? <Eye className="w-3 h-3" /> : <EyeOff className="w-3 h-3" />}
+                {visibilityLabel}
+              </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>
 
-      <Card className="bg-iron-gray/80">
-        <div className="space-y-6 text-sm text-gray-200">
-          {/* 1. Basics & visibility */}
-          <section className="space-y-3">
-            <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline/40">
-              <FileText className="w-4 h-4 text-primary-blue" />
-              <h3 className="text-sm font-semibold text-white">
-                Basics & visibility
-              </h3>
-            </div>
-          <dl className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Name</dt>
-              <dd className="font-medium text-white">{basics.name || '—'}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Visibility</dt>
-              <dd>{visibilityLabel}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Game</dt>
-              <dd>{gameLabel}</dd>
-            </div>
-            {basics.description && (
-              <div className="space-y-1 md:col-span-2">
-                <dt className="text-xs text-gray-500">Description</dt>
-                <dd className="text-gray-300">{basics.description}</dd>
-              </div>
-            )}
-          </dl>
-        </section>
- 
-          {/* 2. Structure & capacity */}
-          <section className="space-y-3">
-            <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline/40">
-              <Users className="w-4 h-4 text-primary-blue" />
-              <h3 className="text-sm font-semibold text-white">
-                Structure & capacity
-              </h3>
-            </div>
-          <dl className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Mode</dt>
-              <dd>{modeLabel}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Capacity</dt>
-              <dd>{capacitySentence}</dd>
-            </div>
-          </dl>
-        </section>
- 
-          {/* 3. Schedule & timings */}
-          <section className="space-y-3">
-            <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline/40">
-              <Calendar className="w-4 h-4 text-primary-blue" />
-              <h3 className="text-sm font-semibold text-white">
-                Schedule & timings
-              </h3>
-            </div>
-          <dl className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Planned rounds</dt>
-              <dd>{typeof timings.roundsPlanned === 'number' ? timings.roundsPlanned : '—'}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Sessions per weekend</dt>
-              <dd>{timings.sessionCount ?? '—'}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Practice</dt>
-              <dd>{formatMinutes(timings.practiceMinutes)}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Qualifying</dt>
-              <dd>{formatMinutes(timings.qualifyingMinutes)}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Sprint</dt>
-              <dd>{formatMinutes(timings.sprintRaceMinutes)}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Main race</dt>
-              <dd>{formatMinutes(timings.mainRaceMinutes)}</dd>
-            </div>
-          </dl>
-        </section>
- 
-          {/* 4. Scoring & drops */}
-          <section className="space-y-3">
-            <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline/40">
-              <Trophy className="w-4 h-4 text-primary-blue" />
-              <h3 className="text-sm font-semibold text-white">
-                Scoring & drops
-              </h3>
-            </div>
-          <dl className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Scoring pattern</dt>
-              <dd>{scoringPresetName}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Pattern summary</dt>
-              <dd>{scoringPatternSummary}</dd>
-            </div>
-            <div className="space-y-1">
-              <dt className="text-xs text-gray-500">Drop rule</dt>
-              <dd>{dropPolicySummary}</dd>
-            </div>
-            {scoring.customScoringEnabled && (
-              <div className="space-y-1">
-                <dt className="text-xs text-gray-500">Custom scoring</dt>
-                <dd>Custom scoring flagged</dd>
-              </div>
-            )}
-          </dl>
-        </section>
- 
-          {/* 5. Championships */}
-          <section className="space-y-3">
-            <div className="flex items-center gap-2 pb-2 border-b border-charcoal-outline/40">
-              <Award className="w-4 h-4 text-primary-blue" />
-              <h3 className="text-sm font-semibold text-white">
-                Championships
-              </h3>
-            </div>
-            <dl className="grid grid-cols-1 gap-4">
-              <div className="space-y-1">
-                <dt className="text-xs text-gray-500">Enabled championships</dt>
-                <dd className="flex flex-wrap gap-2">
-                  {enabledChampionshipsLabels.length > 0 ? (
-                    enabledChampionshipsLabels.map((label) => (
-                      <span key={label} className="inline-flex items-center gap-1 rounded-full bg-primary-blue/10 px-3 py-1 text-xs font-medium text-primary-blue">
-                        <Award className="w-3 h-3" />
-                        {label}
-                      </span>
-                    ))
-                  ) : (
-                    <span className="text-gray-400">None enabled yet</span>
-                  )}
-                </dd>
-              </div>
-            </dl>
-          </section>
+      {/* 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>
-      </Card>
+
+        {/* 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>
+
+      {/* 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>
   );
 }