import { motion } from 'framer-motion';
import { cn } from '@/lib/cn';
import { Avatar } from '@/components/ui/Avatar';
import { staggerContainer, staggerItem } from '@/lib/animations';

interface PlayerStat {
  user_id: string;
  username: string;
  avatar_url?: string;
  kills: number;
  deaths: number;
  assists: number;
  headshots?: number;
  damage?: number;
  mvps?: number;
  mmr_delta?: number;
}

interface ScoreboardProps {
  teamName: string;
  side?: 'CT' | 'T';
  players: PlayerStat[];
  highlight?: string;
  showMmr?: boolean;
}

export function Scoreboard({ teamName, side, players, highlight, showMmr }: ScoreboardProps) {
  const sorted = [...players].sort((a, b) => b.kills - a.kills);

  return (
    <div className="bg-bg-surface border border-white/[0.06] rounded-2xl overflow-hidden">
      <div className={cn(
        'px-5 py-3 border-b border-white/[0.06] flex items-center justify-between',
        side === 'CT' ? 'bg-blue-500/5' : side === 'T' ? 'bg-yellow-500/5' : ''
      )}>
        <span className="font-semibold text-text-primary">{teamName}</span>
        {side && (
          <span className={cn(
            'text-xs font-medium uppercase tracking-wider',
            side === 'CT' ? 'text-accent-ct' : 'text-accent-t'
          )}>
            {side} Side
          </span>
        )}
      </div>

      <div className="grid grid-cols-[1fr_40px_40px_40px_50px_50px] sm:grid-cols-[1fr_48px_48px_48px_56px_56px_56px] gap-1 px-5 py-2 text-xs text-text-muted uppercase tracking-wider border-b border-white/[0.04]">
        <span>Player</span>
        <span className="text-center">K</span>
        <span className="text-center">D</span>
        <span className="text-center">A</span>
        <span className="text-center hidden sm:block">ADR</span>
        <span className="text-center">HS%</span>
        {showMmr && <span className="text-center">MMR</span>}
      </div>

      <motion.div
        variants={staggerContainer}
        initial="initial"
        animate="animate"
      >
        {sorted.map((player, i) => {
          const isHighlighted = player.user_id === highlight;
          const isTopFrag = i === 0;
          const hsPercent = player.kills > 0 && player.headshots
            ? Math.round((player.headshots / player.kills) * 100)
            : 0;
          const adr = player.damage && player.kills
            ? Math.round(player.damage / Math.max(1, player.kills + player.deaths))
            : 0;

          return (
            <motion.div
              key={player.user_id}
              variants={staggerItem}
              className={cn(
                'grid grid-cols-[1fr_40px_40px_40px_50px_50px] sm:grid-cols-[1fr_48px_48px_48px_56px_56px_56px] gap-1 px-5 py-2.5 items-center',
                'border-b border-white/[0.03] last:border-0',
                isHighlighted && 'bg-amber-500/5',
                i % 2 === 1 && !isHighlighted && 'bg-white/[0.01]'
              )}
            >
              <div className="flex items-center gap-2.5 min-w-0">
                <Avatar src={player.avatar_url} username={player.username} size="sm" />
                <span className={cn(
                  'text-sm font-medium truncate',
                  isHighlighted ? 'text-amber-400' : isTopFrag ? 'text-yellow-300' : 'text-text-primary'
                )}>
                  {player.username}
                </span>
              </div>
              <span className="text-center font-mono text-sm text-text-primary">{player.kills}</span>
              <span className="text-center font-mono text-sm text-text-secondary">{player.deaths}</span>
              <span className="text-center font-mono text-sm text-text-secondary">{player.assists}</span>
              <span className="text-center font-mono text-sm text-text-secondary hidden sm:block">{adr}</span>
              <span className="text-center font-mono text-sm text-text-secondary">{hsPercent}%</span>
              {showMmr && player.mmr_delta !== undefined && (
                <span className={cn(
                  'text-center font-mono text-sm font-medium',
                  player.mmr_delta > 0 ? 'text-green-400' : player.mmr_delta < 0 ? 'text-red-400' : 'text-text-muted'
                )}>
                  {player.mmr_delta > 0 ? '+' : ''}{player.mmr_delta}
                </span>
              )}
            </motion.div>
          );
        })}
      </motion.div>
    </div>
  );
}
