gridpilot.gg/apps/website/app/leagues/[id]/standings/page.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { useParams } from 'next/navigation';
import Card from '@/components/ui/Card';
import StandingsTable from '@/components/leagues/StandingsTable';
import {
  EntityMappers,
  type DriverDTO,
  type LeagueDriverSeasonStatsDTO,
} from '@gridpilot/racing';
import {
  getGetLeagueDriverSeasonStatsUseCase,
  getDriverRepository,
  getLeagueMembershipRepository
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import type { MembershipRole, LeagueMembership } from '@/lib/leagueMembership';

export default function LeagueStandingsPage() {
  const params = useParams();
  const leagueId = params.id as string;
  const currentDriverId = useEffectiveDriverId();

  const [standings, setStandings] = useState<LeagueDriverSeasonStatsDTO[]>([]);
  const [drivers, setDrivers] = useState<DriverDTO[]>([]);
  const [memberships, setMemberships] = useState<LeagueMembership[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);

  const loadData = useCallback(async () => {
    try {
      const getLeagueDriverSeasonStatsUseCase = getGetLeagueDriverSeasonStatsUseCase();
      const driverRepo = getDriverRepository();
      const membershipRepo = getLeagueMembershipRepository();

      await getLeagueDriverSeasonStatsUseCase.execute({ leagueId });
      type GetLeagueDriverSeasonStatsUseCaseType = {
        presenter: {
          getViewModel(): { stats: LeagueDriverSeasonStatsDTO[] };
        };
      };
      const typedUseCase =
        getLeagueDriverSeasonStatsUseCase as GetLeagueDriverSeasonStatsUseCaseType;
      const standingsViewModel = typedUseCase.presenter.getViewModel();
      setStandings(standingsViewModel.stats);

      const allDrivers = await driverRepo.findAll();
      const driverDtos: DriverDTO[] = allDrivers
        .map((driver) => EntityMappers.toDriverDTO(driver))
        .filter((dto): dto is DriverDTO => dto !== null);
      setDrivers(driverDtos);

      // Load league memberships from repository (consistent with other data)
      const allMemberships = await membershipRepo.getLeagueMembers(leagueId);

      type RawMembership = {
        id: string | number;
        leagueId: string;
        driverId: string;
        role: MembershipRole;
        status: LeagueMembership['status'];
        joinedAt: string | Date;
      };

      // Convert to the format expected by StandingsTable (website-level LeagueMembership)
      const membershipData: LeagueMembership[] = (allMemberships as RawMembership[]).map((m) => ({
        id: String(m.id),
        leagueId: m.leagueId,
        driverId: m.driverId,
        role: m.role,
        status: m.status,
        joinedAt: m.joinedAt instanceof Date ? m.joinedAt.toISOString() : String(m.joinedAt),
      }));
      setMemberships(membershipData);

      // Check if current user is admin
      const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
      setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load standings');
    } finally {
      setLoading(false);
    }
  }, [leagueId, currentDriverId]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const handleRemoveMember = async (driverId: string) => {
    if (!confirm('Are you sure you want to remove this member?')) {
      return;
    }

    try {
      const membershipRepo = getLeagueMembershipRepository();
      const performer = await membershipRepo.getMembership(leagueId, currentDriverId);
      if (!performer || (performer.role !== 'owner' && performer.role !== 'admin')) {
        throw new Error('Only owners or admins can remove members');
      }

      const membership = await membershipRepo.getMembership(leagueId, driverId);
      if (!membership) {
        throw new Error('Member not found');
      }
      if (membership.role === 'owner') {
        throw new Error('Cannot remove the league owner');
      }

      await membershipRepo.removeMembership(leagueId, driverId);
      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to remove member');
    }
  };

  const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
    try {
      const membershipRepo = getLeagueMembershipRepository();
      const performer = await membershipRepo.getMembership(leagueId, currentDriverId);
      if (!performer || performer.role !== 'owner') {
        throw new Error('Only the league owner can update roles');
      }

      const membership = await membershipRepo.getMembership(leagueId, driverId);
      if (!membership) {
        throw new Error('Member not found');
      }
      if (membership.role === 'owner') {
        throw new Error('Cannot change the owner role');
      }

      await membershipRepo.saveMembership({
        ...membership,
        role: newRole,
      });

      await loadData();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update role');
    }
  };

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

  if (error) {
    return (
      <div className="text-center text-warning-amber">
        {error}
      </div>
    );
  }

  const leader = standings[0];
  const totalRaces = Math.max(...standings.map(s => s.racesStarted), 0);

  return (
    <div className="space-y-6">
      {/* Championship Stats */}
      {standings.length > 0 && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Card>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
                <span className="text-2xl">🏆</span>
              </div>
              <div>
                <p className="text-xs text-gray-400 mb-1">Championship Leader</p>
                <p className="font-bold text-white">{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</p>
                <p className="text-sm text-yellow-400 font-medium">{leader?.totalPoints || 0} points</p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full bg-primary-blue/10 flex items-center justify-center">
                <span className="text-2xl">🏁</span>
              </div>
              <div>
                <p className="text-xs text-gray-400 mb-1">Races Completed</p>
                <p className="text-2xl font-bold text-white">{totalRaces}</p>
                <p className="text-sm text-gray-400">Season in progress</p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full bg-performance-green/10 flex items-center justify-center">
                <span className="text-2xl">👥</span>
              </div>
              <div>
                <p className="text-xs text-gray-400 mb-1">Active Drivers</p>
                <p className="text-2xl font-bold text-white">{standings.length}</p>
                <p className="text-sm text-gray-400">Competing for points</p>
              </div>
            </div>
          </Card>
        </div>
      )}

      <Card>
        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
        <StandingsTable
          standings={standings}
          drivers={drivers}
          leagueId={leagueId}
          memberships={memberships}
          currentDriverId={currentDriverId}
          isAdmin={isAdmin}
          onRemoveMember={handleRemoveMember}
          onUpdateRole={handleUpdateRole}
        />
      </Card>
    </div>
  );
}