import Link from 'next/link';
import { ChevronRight, Car, Zap, Trophy, ArrowRight } from 'lucide-react';
import { formatTime, getRelativeTime } from '@/lib/utilities/time';
import { raceStatusConfig } from '@/lib/utilities/raceStatus';

interface RaceCardProps {
  race: {
    id: string;
    track: string;
    car: string;
    scheduledAt: string;
    status: string;
    leagueId?: string;
    leagueName: string;
    strengthOfField?: number | null;
  };
  onClick?: () => void;
  className?: string;
}

export function RaceCard({ race, onClick, className }: RaceCardProps) {
  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig];

  return (
    <div
      onClick={onClick}
      className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue ${className || ''}`}
    >
      {/* Live indicator */}
      {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 gap-4">
        {/* Time Column */}
        <div className="flex-shrink-0 text-center min-w-[60px]">
          <p className="text-lg font-bold text-white">
            {formatTime(race.scheduledAt)}
          </p>
          <p className={`text-xs ${config.color}`}>
            {race.status === 'running'
              ? 'LIVE'
              : getRelativeTime(race.scheduledAt)}
          </p>
        </div>

        {/* Divider */}
        <div className={`w-px self-stretch ${config.bg}`} />

        {/* Main Content */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-4">
            <div className="min-w-0">
              <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
                {race.track}
              </h3>
              <div className="flex items-center gap-3 mt-1">
                <span className="flex items-center gap-1 text-sm text-gray-400">
                  <Car className="w-3.5 h-3.5" />
                  {race.car}
                </span>
                {race.strengthOfField && (
                  <span className="flex items-center gap-1 text-sm text-gray-400">
                    <Zap className="w-3.5 h-3.5 text-warning-amber" />
                    SOF {race.strengthOfField}
                  </span>
                )}
              </div>
            </div>

            {/* Status Badge */}
            <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border`}>
              <config.icon className={`w-3.5 h-3.5 ${config.color}`} />
              <span className={`text-xs font-medium ${config.color}`}>
                {config.label}
              </span>
            </div>
          </div>

          {/* League Link */}
          <div className="mt-3 pt-3 border-t border-charcoal-outline/50">
            <Link
              href={`/leagues/${race.leagueId ?? ''}`}
              onClick={(e) => e.stopPropagation()}
              className="inline-flex items-center gap-2 text-sm text-primary-blue hover:underline"
            >
              <Trophy className="w-3.5 h-3.5" />
              {race.leagueName}
              <ArrowRight className="w-3 h-3" />
            </Link>
          </div>
        </div>

        {/* Arrow */}
        <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
      </div>
    </div>
  );
}