gridpilot.gg/apps/website/components/teams/TeamStandings.tsx

'use client';

import { useState, useEffect } from 'react';
import Card from '@/components/ui/Card';
import { getStandingRepository, getLeagueRepository, getTeamMembershipRepository } from '@/lib/di-container';
import { EntityMappers } from '@gridpilot/racing/application/mappers/EntityMappers';
import type { LeagueDTO } from '@gridpilot/racing/application/dto/LeagueDTO';

interface TeamStandingsProps {
  teamId: string;
  leagues: string[];
}

interface TeamLeagueStanding {
  leagueId: string;
  leagueName: string;
  position: number;
  points: number;
  wins: number;
  racesCompleted: number;
}

export default function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
  const [standings, setStandings] = useState<TeamLeagueStanding[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadStandings = async () => {
      const standingRepo = getStandingRepository();
      const leagueRepo = getLeagueRepository();
      const teamMembershipRepo = getTeamMembershipRepository();
      const members = await teamMembershipRepo.getTeamMembers(teamId);
      const memberIds = members.map(m => m.driverId);

      const teamStandings: TeamLeagueStanding[] = [];

      for (const leagueId of leagues) {
        const league = await leagueRepo.findById(leagueId);
        if (!league) continue;

        const leagueStandings = await standingRepo.findByLeagueId(leagueId);
        
        // Calculate team points (sum of all team members)
        let totalPoints = 0;
        let totalWins = 0;
        let totalRaces = 0;

        for (const standing of leagueStandings) {
          if (memberIds.includes(standing.driverId)) {
            totalPoints += standing.points;
            totalWins += standing.wins;
            totalRaces = Math.max(totalRaces, standing.racesCompleted);
          }
        }

        // Calculate team position (simplified - based on total points)
        const allTeamPoints = leagueStandings
          .filter(s => memberIds.includes(s.driverId))
          .reduce((sum, s) => sum + s.points, 0);
        
        const position = leagueStandings
          .filter((_, idx, arr) => {
            const teamPoints = arr
              .filter(s => memberIds.includes(s.driverId))
              .reduce((sum, s) => sum + s.points, 0);
            return teamPoints > allTeamPoints;
          }).length + 1;

        teamStandings.push({
          leagueId,
          leagueName: league.name,
          position,
          points: totalPoints,
          wins: totalWins,
          racesCompleted: totalRaces,
        });
      }

      setStandings(teamStandings);
      setLoading(false);
    };

    loadStandings();
  }, [teamId, leagues]);

  if (loading) {
    return (
      <Card>
        <div className="text-center py-8 text-gray-400">Loading standings...</div>
      </Card>
    );
  }

  return (
    <Card>
      <h3 className="text-xl font-semibold text-white mb-6">League Standings</h3>
      
      <div className="space-y-4">
        {standings.map((standing) => (
          <div
            key={standing.leagueId}
            className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
          >
            <div className="flex items-center justify-between mb-3">
              <h4 className="text-white font-medium">{standing.leagueName}</h4>
              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-semibold">
                P{standing.position}
              </span>
            </div>
            
            <div className="grid grid-cols-3 gap-4 text-center">
              <div>
                <div className="text-2xl font-bold text-white">{standing.points}</div>
                <div className="text-xs text-gray-400">Points</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-white">{standing.wins}</div>
                <div className="text-xs text-gray-400">Wins</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-white">{standing.racesCompleted}</div>
                <div className="text-xs text-gray-400">Races</div>
              </div>
            </div>
          </div>
        ))}
      </div>

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