'use client';

import { Icon } from '@/ui/Icon';
import { Panel } from '@/ui/Panel';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { PositionBadge } from '@/ui/ResultRow';
import { TrendingUp, Trophy } from 'lucide-react';
import React from 'react';

interface StandingsEntry {
  position: number;
  driverName: string;
  points: number;
  wins: number;
  podiums: number;
  change?: number;
}

interface StandingsTableShellProps {
  standings: StandingsEntry[];
  title?: string;
}

export function StandingsTableShell({ standings, title = 'Championship Standings' }: StandingsTableShellProps) {
  return (
    <Panel 
      title={title}
      variant="dark"
      padding={0}
      footer={
        <Text size="xs" variant="low">{standings.length} Drivers</Text>
      }
    >
      <Box overflowX="auto">
        <Table>
          <TableHead>
            <TableRow>
              <TableHeader w="4rem">Pos</TableHeader>
              <TableHeader>Driver</TableHeader>
              <TableHeader textAlign="center">Wins</TableHeader>
              <TableHeader textAlign="center">Podiums</TableHeader>
              <TableHeader textAlign="right">Points</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {standings.map((entry) => (
              <TableRow key={entry.driverName}>
                <TableCell>
                  <PositionBadge position={entry.position} />
                </TableCell>
                <TableCell>
                  <Group gap={3}>
                    <Text weight="bold" variant="high">{entry.driverName}</Text>
                    {entry.change !== undefined && entry.change !== 0 && (
                      <Group gap={0.5}>
                        <Icon 
                          icon={TrendingUp} 
                          size={3} 
                          intent={entry.change > 0 ? 'success' : 'critical'} 
                          style={{ transform: entry.change < 0 ? 'rotate(180deg)' : undefined }}
                        />
                        <Text size="xs" variant={entry.change > 0 ? 'success' : 'critical'}>
                          {Math.abs(entry.change)}
                        </Text>
                      </Group>
                    )}
                  </Group>
                </TableCell>
                <TableCell textAlign="center">
                  <Text size="sm" variant={entry.wins > 0 ? 'high' : 'low'}>{entry.wins}</Text>
                </TableCell>
                <TableCell textAlign="center">
                  <Text size="sm" variant={entry.podiums > 0 ? 'high' : 'low'}>{entry.podiums}</Text>
                </TableCell>
                <TableCell textAlign="right">
                  <Text weight="bold" variant="primary">{entry.points}</Text>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Box>
    </Panel>
  );
}