import { motion } from 'framer-motion';
import { cn } from '@/lib/cn';
import { Tooltip } from '@/components/ui/Tooltip';

interface RoundResult {
  round: number;
  winner: 'team1' | 'team2';
  side: 'CT' | 'T';
}

interface RoundTimelineProps {
  rounds: RoundResult[];
  currentRound?: number;
  totalRounds?: number;
}

export function RoundTimeline({ rounds, currentRound, totalRounds = 24 }: RoundTimelineProps) {
  const halfTime = 12;

  return (
    <div className="bg-bg-surface border border-white/[0.06] rounded-2xl p-4 sm:p-5">
      <div className="flex items-center gap-1 sm:gap-1.5 overflow-x-auto pb-1">
        {Array.from({ length: totalRounds }, (_, i) => {
          const roundNum = i + 1;
          const result = rounds.find((r) => r.round === roundNum);
          const isCurrent = roundNum === currentRound;
          const isHalfTime = roundNum === halfTime;
          const isFuture = !result && (!currentRound || roundNum > currentRound);

          return (
            <div key={roundNum} className="flex items-center">
              <Tooltip content={result ? `Round ${roundNum}: ${result.side} win` : `Round ${roundNum}`}>
                <motion.div
                  initial={{ scale: 0.8, opacity: 0 }}
                  animate={{ scale: 1, opacity: 1 }}
                  transition={{ delay: i * 0.02 }}
                  className={cn(
                    'w-6 h-6 sm:w-7 sm:h-7 rounded flex items-center justify-center text-[10px] font-mono font-bold flex-shrink-0 transition-all',
                    result?.side === 'CT' && 'bg-blue-500/20 text-accent-ct border border-blue-500/30',
                    result?.side === 'T' && 'bg-yellow-500/20 text-accent-t border border-yellow-500/30',
                    isFuture && 'bg-white/5 text-text-muted border border-white/5',
                    isCurrent && 'ring-2 ring-amber-500 ring-offset-1 ring-offset-bg-base'
                  )}
                >
                  {roundNum}
                </motion.div>
              </Tooltip>
              {isHalfTime && (
                <div className="w-px h-6 bg-white/20 mx-1 flex-shrink-0" />
              )}
            </div>
          );
        })}
      </div>
      <div className="flex justify-between mt-2 text-[10px] text-text-muted uppercase tracking-wider">
        <span>First Half</span>
        <span>Second Half</span>
      </div>
    </div>
  );
}
