// components/live/LiveTiming.tsx
'use client';

import { BoltIcon, TrophyIcon } from '@/components/ui/icons';

interface TimingEntry {
  position: number;
  carID: number;
  driver_name: string;
  car_model: string;
  current_lap: number;
  last_lap_time: number | null;
  best_lap_time: number | null;
  gap_to_leader: string;
  avg_lap_time: number | null;
  user_rank?: number | null; // Driver's position in rankings (1st, 2nd, etc.)
  user_rating?: number | null; // Driver's rating score (ELO-style)
}

interface LiveTimingProps {
  entries: TimingEntry[];
}

export default function LiveTiming({ entries }: LiveTimingProps) {
  
  // Format lap time from milliseconds
  const formatLapTime = (ms: number | null) => {
    if (!ms || ms === 0) return '--:--.---';
    
    const minutes = Math.floor(ms / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    const milliseconds = ms % 1000;
    
    return `${minutes}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(3, '0')}`;
  };

  // Format position with fallback
  const formatPosition = (position: number | null | undefined) => {
    if (!position || position === 0) return '--';
    return String(position).padStart(2, '0');
  };

  // Format lap count with fallback
  const formatLapCount = (laps: number | null | undefined) => {
    if (!laps || laps === 0) return '--';
    return laps;
  };

  // Get position color
  const getPositionColor = (position: number) => {
    if (!position || position === 0) return 'text-white/40 border-white/10';
    if (position === 1) return 'text-white border-white';
    if (position === 2) return 'text-white/90 border-white/70';
    if (position === 3) return 'text-white/80 border-white/50';
    return 'text-white/60 border-white/20';
  };

  // Get rank badge color
  const getRankColor = (rank: number | null | undefined) => {
    if (!rank) return 'bg-white/10 text-white/40';
    if (rank <= 10) return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
    if (rank <= 50) return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
    if (rank <= 100) return 'bg-green-500/20 text-green-400 border-green-500/30';
    return 'bg-white/10 text-white/60 border-white/20';
  };

  return (
    <div className="space-y-2">
      {/* Header */}
      <div className="grid grid-cols-12 gap-2 px-3 py-2 border-b border-white/10 text-xs font-bold tracking-wider text-white/40">
        <div className="col-span-1">POS</div>
        <div className="col-span-4">DRIVER</div>
        <div className="col-span-2 text-right">LAP</div>
        <div className="col-span-3 text-right">LAST LAP</div>
        <div className="col-span-2 text-right">BEST</div>
      </div>

      {/* Timing Entries */}
      <div className="space-y-1">
        {entries.map((entry) => {
          const isLeader = entry.position === 1;
          const isFastestLap = entries.length > 0 && 
            entry.best_lap_time && entry.best_lap_time > 0 &&
            entry.best_lap_time === Math.min(...entries.filter(e => e.best_lap_time && e.best_lap_time > 0).map(e => e.best_lap_time!));

          return (
            <div
              key={entry.carID}
              className={`
                grid grid-cols-12 gap-2 px-3 py-3 border transition-all
                ${getPositionColor(entry.position)}
                hover:bg-white/5
                ${isLeader ? 'bg-white/[0.02]' : ''}
              `}
            >
              {/* Position */}
              <div className="col-span-1 flex items-center">
                <span className="text-lg font-bold">
                  {formatPosition(entry.position)}
                </span>
              </div>

              {/* Driver Info */}
              <div className="col-span-4 flex flex-col justify-center">
                <div className="flex items-center space-x-2">
                  <span className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>
                    {entry.driver_name}
                  </span>
                  {entry.user_rank && (
                    <div className="flex items-center space-x-1">
                      <span className={`text-[10px] px-1.5 py-0.5 border rounded ${getRankColor(entry.user_rank)}`}>
                        #{entry.user_rank}
                      </span>
                      {entry.user_rating && (
                        <span className="text-[10px] text-white/40 font-mono">
                          {entry.user_rating}
                        </span>
                      )}
                    </div>
                  )}
                </div>
                <div className="text-xs text-white/40 font-mono truncate">{entry.car_model}</div>
              </div>

              {/* Current Lap */}
              <div className="col-span-2 flex items-center justify-end">
                <span className="font-mono text-sm">{formatLapCount(entry.current_lap)}</span>
              </div>

              {/* Last Lap Time */}
              <div className="col-span-3 flex flex-col items-end justify-center">
                <div className="font-mono text-sm">
                  {formatLapTime(entry.last_lap_time)}
                </div>
                {entry.avg_lap_time && entry.avg_lap_time > 0 && (
                  <div className="text-xs text-white/40 font-mono">
                    Avg: {formatLapTime(entry.avg_lap_time)}
                  </div>
                )}
              </div>

              {/* Best Lap Time */}
              <div className="col-span-2 flex items-center justify-end">
                <div className={`font-mono text-sm flex items-center space-x-1 ${isFastestLap ? 'text-purple-400' : ''}`}>
                  <span>{formatLapTime(entry.best_lap_time)}</span>
                  {isFastestLap && (
                    <BoltIcon className="w-3 h-3" />
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Legend */}
      <div className="border-t border-white/10 pt-3 px-3 text-xs text-white/40 space-y-1">
        <div className="flex items-center space-x-2">
          <BoltIcon className="w-3 h-3" />
          <span>Fastest lap overall</span>
        </div>
        <div className="flex items-center space-x-2">
          <span className="text-[10px] px-1.5 py-0.5 border rounded bg-yellow-500/20 text-yellow-400 border-yellow-500/30">
            #1-10
          </span>
          <span>Top 10 ranked driver</span>
        </div>
        <div>Times updated in real-time from server telemetry</div>
        <div className="text-white/30 text-[11px]">-- indicates driver has not started or is in pits</div>
      </div>
    </div>
  );
}