'use client';

import StandingsTable from '@/components/leagues/StandingsTable';
import LeagueChampionshipStats from '@/components/leagues/LeagueChampionshipStats';
import Card from '@/components/ui/Card';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import type { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';

// ============================================================================
// TYPES
// ============================================================================

interface LeagueStandingsTemplateProps {
  standings: StandingEntryViewModel[];
  drivers: DriverViewModel[];
  memberships: LeagueMembership[];
  leagueId: string;
  currentDriverId: string | null;
  isAdmin: boolean;
  onRemoveMember: (driverId: string) => void;
  onUpdateRole: (driverId: string, newRole: string) => void;
  loading?: boolean;
}

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export function LeagueStandingsTemplate({
  standings,
  drivers,
  memberships,
  leagueId,
  currentDriverId,
  isAdmin,
  onRemoveMember,
  onUpdateRole,
  loading = false,
}: LeagueStandingsTemplateProps) {
  if (loading) {
    return (
      <div className="text-center text-gray-400">
        Loading standings...
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Championship Stats */}
      <LeagueChampionshipStats standings={standings} drivers={drivers} />

      <Card>
        <h2 className="text-xl font-semibold text-white mb-4">Championship Standings</h2>
        <StandingsTable
          standings={standings.map((s) => ({
            leagueId,
            driverId: s.driverId,
            position: s.position,
            totalPoints: s.points,
            racesFinished: s.races,
            racesStarted: s.races,
            avgFinish: null,
            penaltyPoints: 0,
            bonusPoints: 0,
          }) satisfies {
            leagueId: string;
            driverId: string;
            position: number;
            totalPoints: number;
            racesFinished: number;
            racesStarted: number;
            avgFinish: number | null;
            penaltyPoints: number;
            bonusPoints: number;
            teamName?: string;
          })}
          drivers={drivers}
          leagueId={leagueId}
          memberships={memberships}
          currentDriverId={currentDriverId ?? undefined}
          isAdmin={isAdmin}
          onRemoveMember={onRemoveMember}
          onUpdateRole={onUpdateRole}
        />
      </Card>
    </div>
  );
}