'use client';

import React from 'react';
import { LeagueChampionshipStats } from '@/components/leagues/LeagueChampionshipStats';
import { StandingsTable } from '@/components/leagues/StandingsTable';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';

interface LeagueStandingsTemplateProps {
  viewData: LeagueStandingsViewData;
  onRemoveMember: (driverId: string) => void;
  onUpdateRole: (driverId: string, newRole: string) => void;
  loading?: boolean;
}

export function LeagueStandingsTemplate({
  viewData,
  onRemoveMember,
  onUpdateRole,
  loading = false,
}: LeagueStandingsTemplateProps) {
  if (loading) {
    return (
      <Stack align="center" py={12}>
        <Text color="text-gray-400">Loading standings...</Text>
      </Stack>
    );
  }

  return (
    <Stack gap={6}>
      {/* Championship Stats */}
      <LeagueChampionshipStats standings={viewData.standings} drivers={viewData.drivers} />

      <Card>
        <Stack gap={4}>
          <Heading level={2}>Championship Standings</Heading>
          <StandingsTable
            standings={viewData.standings}
            drivers={viewData.drivers}
            memberships={viewData.memberships}
            currentDriverId={viewData.currentDriverId ?? undefined}
            isAdmin={viewData.isAdmin}
            onRemoveMember={onRemoveMember}
            onUpdateRole={onUpdateRole}
          />
        </Stack>
      </Card>
    </Stack>
  );
}