'use client';

import { Box } from '@/ui/Box';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';

interface Standing {
  leagueId: string;
  leagueName: string;
  position: number;
  points: number;
  races: number;
}

interface TeamStandingsPanelProps {
  standings: Standing[];
}

export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
  return (
    <Box border borderColor="outline-steel" bg="surface-charcoal/30">
      <Box p={4} borderBottom borderColor="outline-steel">
        <Text size="xs" weight="bold" color="text-gray-400" uppercase letterSpacing="widest">
          Active Campaign Standings
        </Text>
      </Box>
      
      {standings.length > 0 ? (
        <Table>
          <TableHead>
            <TableRow>
              <TableHeader>League</TableHeader>
              <TableHeader textAlign="center">Pos</TableHeader>
              <TableHeader textAlign="center">Races</TableHeader>
              <TableHeader textAlign="right">Points</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {standings.map((s) => (
              <TableRow key={s.leagueId}>
                <TableCell>
                  <Text weight="bold" size="sm" color="text-white">{s.leagueName}</Text>
                </TableCell>
                <TableCell textAlign="center">
                  <Box 
                    display="inline-flex" 
                    center 
                    w="6" 
                    h="6" 
                    bg={s.position <= 3 ? 'warning-amber/20' : 'base-black'} 
                    border 
                    borderColor={s.position <= 3 ? 'warning-amber/40' : 'outline-steel'}
                  >
                    <Text size="xs" weight="bold" color={s.position <= 3 ? 'warning-amber' : 'text-gray-400'}>
                      {s.position}
                    </Text>
                  </Box>
                </TableCell>
                <TableCell textAlign="center">
                  <Text size="xs" color="text-gray-500" font="mono">{s.races}</Text>
                </TableCell>
                <TableCell textAlign="right">
                  <Text font="mono" weight="bold" color="telemetry-aqua">{s.points}</Text>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      ) : (
        <Box py={12} textAlign="center">
          <Text color="text-gray-600" font="mono" size="xs" uppercase letterSpacing="widest">
            No active campaign telemetry
          </Text>
        </Box>
      )}
    </Box>
  );
}
