'use client';

import Link from 'next/link';
import { Standing } from '@gridpilot/racing/domain/entities/Standing';
import { Driver } from '@gridpilot/racing/domain/entities/Driver';

interface StandingsTableProps {
  standings: Standing[];
  drivers: Driver[];
  leagueId: string;
}

export default function StandingsTable({ standings, drivers, leagueId }: StandingsTableProps) {
  const getDriverName = (driverId: string): string => {
    const driver = drivers.find((d) => d.id === driverId);
    return driver?.name || 'Unknown Driver';
  };

  if (standings.length === 0) {
    return (
      <div className="text-center py-8 text-gray-400">
        No standings available
      </div>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="border-b border-charcoal-outline">
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Pos</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Points</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
            <th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Races</th>
          </tr>
        </thead>
        <tbody>
          {standings.map((standing) => {
            const isLeader = standing.position === 1;

            return (
              <tr
                key={`${standing.leagueId}-${standing.driverId}`}
                className="border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors"
              >
                <td className="py-3 px-4">
                  <span className={`font-semibold ${isLeader ? 'text-yellow-500' : 'text-white'}`}>
                    {standing.position}
                  </span>
                </td>
                <td className="py-3 px-4">
                  <Link
                    href={`/drivers/${standing.driverId}?from=league&leagueId=${leagueId}`}
                    className={
                      isLeader
                        ? 'text-white font-semibold hover:text-primary-blue transition-colors'
                        : 'text-white hover:text-primary-blue transition-colors'
                    }
                  >
                    {getDriverName(standing.driverId)}
                  </Link>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white font-medium">{standing.points}</span>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white">{standing.wins}</span>
                </td>
                <td className="py-3 px-4">
                  <span className="text-white">{standing.racesCompleted}</span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}