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

import { BoltIcon } 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;
}

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')}`;
  };

  // Get position color
  const getPositionColor = (position: number) => {
    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';
  };

  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 === Math.min(...entries.filter(e => e.best_lap_time).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">
                  {String(entry.position).padStart(2, '0')}
                </span>
              </div>

              {/* Driver Info */}
              <div className="col-span-4 flex flex-col justify-center">
                <div className="font-normal truncate" style={{ letterSpacing: "0.1em" }}>{entry.driver_name}</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">{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 && (
                  <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>Times updated in real-time from server telemetry</div>
      </div>
    </div>
  );
}