gridpilot.gg/apps/website/components/races/RaceCard.tsx

'use client';

import { Race } from '@gridpilot/racing/domain/entities/Race';
import { Clock, PlayCircle, CheckCircle2, XCircle, Zap, Car, Trophy } from 'lucide-react';

interface RaceCardProps {
  race: Race;
  leagueName?: string;
  onClick?: () => void;
  compact?: boolean;
}

export default function RaceCard({ race, leagueName, onClick, compact = false }: RaceCardProps) {
  const statusConfig = {
    scheduled: {
      icon: Clock,
      color: 'text-primary-blue',
      bg: 'bg-primary-blue/10',
      border: 'border-primary-blue/30',
      label: 'Scheduled',
    },
    running: {
      icon: PlayCircle,
      color: 'text-performance-green',
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30',
      label: 'LIVE',
    },
    completed: {
      icon: CheckCircle2,
      color: 'text-gray-400',
      bg: 'bg-gray-500/10',
      border: 'border-gray-500/30',
      label: 'Completed',
    },
    cancelled: {
      icon: XCircle,
      color: 'text-warning-amber',
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30',
      label: 'Cancelled',
    },
  };

  const config = statusConfig[race.status];
  const StatusIcon = config.icon;

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const formatTime = (date: Date) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short',
    });
  };

  const getRelativeTime = (date: Date) => {
    const now = new Date();
    const targetDate = new Date(date);
    const diffMs = targetDate.getTime() - now.getTime();
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

    if (diffMs < 0) return null;
    if (diffHours < 1) return 'Starting soon';
    if (diffHours < 24) return `In ${diffHours}h`;
    if (diffDays === 1) return 'Tomorrow';
    if (diffDays < 7) return `In ${diffDays} days`;
    return null;
  };

  const relativeTime = race.status === 'scheduled' ? getRelativeTime(race.scheduledAt) : null;

  if (compact) {
    return (
      <div
        onClick={onClick}
        className={`
          relative overflow-hidden p-4 rounded-lg bg-iron-gray border ${config.border}
          transition-all duration-200
          ${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
        `}
      >
        {race.status === 'running' && (
          <div className="absolute top-0 left-0 right-0 h-0.5 bg-performance-green animate-pulse" />
        )}
        <div className="flex items-center gap-3">
          <div className="flex-shrink-0">
            <StatusIcon className={`w-5 h-5 ${config.color}`} />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-sm font-medium text-white truncate">{race.track}</h3>
            <p className="text-xs text-gray-500">{formatTime(race.scheduledAt)}</p>
          </div>
          {relativeTime && (
            <span className={`text-xs ${config.color}`}>{relativeTime}</span>
          )}
        </div>
      </div>
    );
  }

  return (
    <div
      onClick={onClick}
      className={`
        relative overflow-hidden p-5 rounded-xl bg-iron-gray border ${config.border}
        transition-all duration-200
        ${onClick ? 'cursor-pointer hover:scale-[1.02] hover:border-primary-blue' : ''}
      `}
    >
      {/* Live indicator bar */}
      {race.status === 'running' && (
        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
      )}

      <div className="flex items-start justify-between gap-4">
        {/* Left side - Race info */}
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-2">
            <h3 className="text-lg font-semibold text-white truncate">{race.track}</h3>
            {/* Status badge */}
            <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${config.bg} border ${config.border} flex-shrink-0`}>
              {race.status === 'running' && (
                <span className="w-1.5 h-1.5 bg-performance-green rounded-full animate-pulse" />
              )}
              <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
              <span className={`text-xs font-medium ${config.color}`}>
                {config.label}
              </span>
            </div>
          </div>
          
          {/* Meta info */}
          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400">
            <span className="flex items-center gap-1.5">
              <Car className="w-3.5 h-3.5" />
              {race.car}
            </span>
            {race.strengthOfField && (
              <span className="flex items-center gap-1.5 text-warning-amber">
                <Zap className="w-3.5 h-3.5" />
                SOF {race.strengthOfField}
              </span>
            )}
            {leagueName && (
              <span className="flex items-center gap-1.5 text-primary-blue">
                <Trophy className="w-3.5 h-3.5" />
                {leagueName}
              </span>
            )}
          </div>
        </div>

        {/* Right side - Date/Time */}
        <div className="text-right flex-shrink-0">
          <p className="text-white font-medium">{formatDate(race.scheduledAt)}</p>
          <p className="text-gray-500 text-sm">{formatTime(race.scheduledAt)}</p>
          {relativeTime && (
            <p className={`text-sm mt-1 ${config.color}`}>{relativeTime}</p>
          )}
        </div>
      </div>

      {/* Bottom row */}
      <div className="flex items-center justify-between mt-3 pt-3 border-t border-charcoal-outline/50">
        <span className="text-xs text-gray-500 uppercase tracking-wide">
          {race.sessionType}
        </span>
        {race.registeredCount !== undefined && (
          <span className="text-xs text-gray-500">
            {race.registeredCount} registered
            {race.maxParticipants && ` / ${race.maxParticipants}`}
          </span>
        )}
      </div>
    </div>
  );
}