'use client';

import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { getImageService } from '@/lib/di-container';

export interface TeamLadderRowProps {
  rank: number;
  teamId: string;
  teamName: string;
  teamLogoUrl?: string;
  memberCount: number;
  teamRating: number | null;
  totalWins: number;
  totalRaces: number;
}

export default function TeamLadderRow({
  rank,
  teamId,
  teamName,
  teamLogoUrl,
  memberCount,
  teamRating,
  totalWins,
  totalRaces,
}: TeamLadderRowProps) {
  const router = useRouter();
  const imageService = getImageService();
  const logo = teamLogoUrl ?? imageService.getTeamLogo(teamId);

  const handleClick = () => {
    router.push(`/teams/${teamId}`);
  };

  return (
    <tr
      onClick={handleClick}
      className="cursor-pointer border-b border-charcoal-outline/60 hover:bg-iron-gray/30 transition-colors"
    >
      <td className="py-3 px-4 text-sm text-gray-300 font-semibold">#{rank}</td>
      <td className="py-3 px-4">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 rounded-md overflow-hidden bg-charcoal-outline flex-shrink-0">
            <Image
              src={logo}
              alt={teamName}
              width={32}
              height={32}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex flex-col">
            <span className="text-sm font-semibold text-white truncate">
              {teamName}
            </span>
          </div>
        </div>
      </td>
      <td className="py-3 px-4 text-sm">
        <span className="text-primary-blue font-semibold">
          {teamRating !== null ? Math.round(teamRating) : '—'}
        </span>
      </td>
      <td className="py-3 px-4 text-sm">
        <span className="text-green-400 font-semibold">{totalWins}</span>
      </td>
      <td className="py-3 px-4 text-sm">
        <span className="text-white">{totalRaces}</span>
      </td>
      <td className="py-3 px-4 text-sm">
        <span className="text-gray-300">
          {memberCount} {memberCount === 1 ? 'member' : 'members'}
        </span>
      </td>
    </tr>
  );
}