'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Surface } from '@/ui/Surface';

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

interface TeamStandingsPanelProps {
  standings: Standing[];
}

export function TeamStandingsPanel({ standings }: TeamStandingsPanelProps) {
  return (
    <Surface variant="precision" padding="none">
      <Box padding={6} borderBottom="1px solid var(--ui-color-border-muted)">
        <Text size="xs" weight="bold" variant="low" uppercase letterSpacing="0.1em">
          Active Campaign Standings
        </Text>
      </Box>
      
      {standings.length > 0 ? (
        <Table>
          <TableHead>
            <TableHeaderCell>League</TableHeaderCell>
            <TableHeaderCell textAlign="center">Pos</TableHeaderCell>
            <TableHeaderCell textAlign="center">Races</TableHeaderCell>
            <TableHeaderCell textAlign="right">Points</TableHeaderCell>
          </TableHead>
          <TableBody>
            {standings.map((s) => (
              <TableRow key={s.leagueId}>
                <TableCell>
                  <Text weight="bold" size="sm">{s.leagueName}</Text>
                </TableCell>
                <TableCell textAlign="center">
                  <Box 
                    display="inline-flex" 
                    center 
                    width={8} 
                    height={8} 
                    bg={s.position <= 3 ? 'rgba(255, 190, 77, 0.1)' : 'var(--ui-color-bg-base)'} 
                    border={s.position <= 3 ? '1px solid var(--ui-color-intent-warning)' : '1px solid var(--ui-color-border-muted)'}
                    rounded="md"
                  >
                    <Text size="xs" weight="bold" variant={s.position <= 3 ? 'warning' : 'low'} mono>
                      {s.position}
                    </Text>
                  </Box>
                </TableCell>
                <TableCell textAlign="center">
                  <Text size="xs" variant="low" mono>{s.races}</Text>
                </TableCell>
                <TableCell textAlign="right">
                  <Text mono weight="bold" variant="telemetry">{s.points}</Text>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      ) : (
        <Box paddingY={16} textAlign="center">
          <Text variant="low" mono size="xs" uppercase letterSpacing="0.1em">
            No active campaign telemetry
          </Text>
        </Box>
      )}
    </Surface>
  );
}