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

'use client';

import StandingsTable from '@/components/leagues/StandingsTable';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import type { LeagueMembership, MembershipRole } from '@/lib/types';
import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
import { useServices } from '@/lib/services/ServiceProvider';
import { DriverViewModel } from '@/lib/view-models';
import type { LeagueStandingsViewModel } from '@/lib/view-models';
import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
import { useParams } from 'next/navigation';
import { useCallback, useEffect, useState } from 'react';

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

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

  const loadData = useCallback(async () => {
    try {
      const vm = await leagueService.getLeagueStandings(leagueId, currentDriverId);
      setViewModel(vm);
      setStandings(vm.standings);
      setDrivers(vm.drivers.map(d => new DriverViewModel(d)));
      setMemberships(vm.memberships);

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

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

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

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

  const handleUpdateRole = async (driverId: string, newRole: MembershipRole) => {
    try {
      await leagueService.updateMemberRole(leagueId, currentDriverId, driverId, 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.races), 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?.points || 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>
  );
}