'use client';

import { LeagueStandingsTable } from '@/components/leagues/LeagueStandingsTable';
import type { LeagueStandingsViewData } from '@/lib/view-data/LeagueStandingsViewData';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface LeagueStandingsTemplateProps {
  viewData: LeagueStandingsViewData;
  loading?: boolean;
}

export function LeagueStandingsTemplate({
  viewData,
  loading = false,
}: LeagueStandingsTemplateProps) {
  if (loading) {
    return (
      <Box display="flex" alignItems="center" justifyContent="center" py={24}>
        <Text color="text-zinc-500" font="mono" size="xs" uppercase letterSpacing="widest" animate="pulse">
          Loading Standings...
        </Text>
      </Box>
    );
  }

  const standings = viewData.standings.map((entry) => {
    const driver = viewData.drivers.find(d => d.id === entry.driverId);
    return {
      position: entry.position,
      driverName: driver?.name || 'Unknown Driver',
      driverId: entry.driverId,
      points: entry.totalPoints,
      wins: 0, // Placeholder
      podiums: 0, // Placeholder
      races: entry.racesStarted,
      avgFinish: entry.avgFinish,
      gap: entry.position === 1 ? '—' : `-${viewData.standings[0].totalPoints - entry.totalPoints}`
    };
  });

  return (
    <Box display="flex" flexDirection="col" gap={8}>
      <Box as="header" display="flex" flexDirection="col" gap={2}>
        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Championship Standings</Text>
        <Text size="sm" color="text-zinc-500">Official points classification for the current season.</Text>
      </Box>

      <LeagueStandingsTable standings={standings} />
    </Box>
  );
}