'use client';

import { Card } from '@/ui/Card';
import { useTeamStandings } from "@/lib/hooks/team";
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Badge } from '@/ui/Badge';
import { Grid } from '@/ui/Grid';
import { Surface } from '@/ui/Surface';

interface TeamStandingsProps {
  teamId: string;
  leagues: string[];
}

export function TeamStandings({ teamId, leagues }: TeamStandingsProps) {
  const { data: standings = [], isLoading: loading } = useTeamStandings(teamId, leagues);

  if (loading) {
    return (
      <Card>
        <Box textAlign="center" py={8}>
          <Text color="text-gray-400">Loading standings...</Text>
        </Box>
      </Card>
    );
  }

  return (
    <Card>
      <Box mb={6}>
        <Heading level={2}>
          League Standings
        </Heading>
      </Box>
      
      <Stack gap={4}>
        {standings.map((standing: any) => (
          <Surface
            key={standing.leagueId}
            variant="dark"
            rounded="lg"
            border
            padding={4}
          >
            <Stack direction="row" align="center" justify="between" mb={3}>
              <Heading level={4}>
                {standing.leagueName}
              </Heading>
              <Badge variant="primary">
                P{standing.position}
              </Badge>
            </Stack>
            
            <Grid cols={3} gap={4}>
              <Box textAlign="center">
                <Text size="2xl" weight="bold" color="text-white" block>
                  {standing.points}
                </Text>
                <Text size="xs" color="text-gray-400">Points</Text>
              </Box>
              <Box textAlign="center">
                <Text size="2xl" weight="bold" color="text-white" block>
                  {standing.wins}
                </Text>
                <Text size="xs" color="text-gray-400">Wins</Text>
              </Box>
              <Box textAlign="center">
                <Text size="2xl" weight="bold" color="text-white" block>
                  {standing.racesCompleted}
                </Text>
                <Text size="xs" color="text-gray-400">Races</Text>
              </Box>
            </Grid>
          </Surface>
        ))}
      </Stack>

      {standings.length === 0 && (
        <Box textAlign="center" py={8}>
          <Text color="text-gray-400">
            No standings available yet.
          </Text>
        </Box>
      )}
    </Card>
  );
}