'use client';

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

interface StandingEntry {
  position: number;
  driverName: string;
  teamName?: string;
  points: number;
  wins: number;
  podiums: number;
  races: number;
  avgFinish: number | null;
  gap: string;
}

interface LeagueStandingsTableProps {
  standings: StandingEntry[];
}

export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
  return (
    <Stack as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
      <Table className="border-none rounded-none">
        <TableHead>
          <TableRow className="bg-zinc-900/80 border-zinc-800">
            <TableHeader className="w-12 px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
            </TableHeader>
            <TableHeader className="px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
            </TableHeader>
            <TableHeader className="hidden md:table-cell px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
            </TableHeader>
            <TableHeader className="text-center px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Races</Text>
            </TableHeader>
            <TableHeader className="text-center px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Avg</Text>
            </TableHeader>
            <TableHeader className="text-right px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
            </TableHeader>
            <TableHeader className="text-right px-4 py-3">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
            </TableHeader>
          </TableRow>
        </TableHead>
        <TableBody className="divide-zinc-800">
          {standings.map((entry) => (
            <TableRow key={entry.driverName} className="border-zinc-800 hover:bg-zinc-800/50">
              <TableCell className="px-4 py-3">
                <Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
              </TableCell>
              <TableCell className="px-4 py-3">
                <Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
              </TableCell>
              <TableCell className="hidden md:table-cell px-4 py-3">
                <Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
              </TableCell>
              <TableCell className="text-center px-4 py-3">
                <Text size="sm" color="text-zinc-400">{entry.races}</Text>
              </TableCell>
              <TableCell className="text-center px-4 py-3">
                <Text size="sm" color="text-zinc-400">{entry.avgFinish?.toFixed(1) || '—'}</Text>
              </TableCell>
              <TableCell className="text-right px-4 py-3">
                <Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
              </TableCell>
              <TableCell className="text-right px-4 py-3">
                <Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Stack>
  );
}