'use client';

import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Calendar, Trophy } from 'lucide-react';

interface SessionResult {
  id: string;
  date: string;
  event: string;
  car: string;
  position: number;
  fieldSize: number;
  ratingChange: number;
}

interface SessionHistoryTableProps {
  results: SessionResult[];
}

export function SessionHistoryTable({ results }: SessionHistoryTableProps) {
  if (results.length === 0) {
    return (
      <Stack align="center" justify="center" py={12} gap={4}>
        <Trophy size={48} color="#23272B" />
        <Text color="#6b7280">No race history found.</Text>
      </Stack>
    );
  }

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Date</TableHeader>
          <TableHeader>Event</TableHeader>
          <TableHeader>Car</TableHeader>
          <TableHeader>Pos</TableHeader>
          <TableHeader className="text-right">Rating</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {results.map((result) => (
          <TableRow key={result.id}>
            <TableCell>
              <Stack direction="row" align="center" gap={2}>
                <Calendar size={12} className="text-gray-500" />
                <Text size="xs" font="mono">
                  {new Date(result.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                </Text>
              </Stack>
            </TableCell>
            <TableCell>
              <Text weight="bold" size="sm">{result.event}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" color="#9ca3af">{result.car}</Text>
            </TableCell>
            <TableCell>
              <Stack direction="row" align="center" gap={2}>
                <Badge 
                  variant={result.position === 1 ? 'success' : result.position <= 3 ? 'warning' : 'default'}
                >
                  P{result.position}
                </Badge>
                <Text size="xs" color="#6b7280">/ {result.fieldSize}</Text>
              </Stack>
            </TableCell>
            <TableCell className="text-right">
              <Text 
                size="xs" 
                font="mono" 
                weight="bold"
                color={result.ratingChange >= 0 ? '#10b981' : '#ef4444'}
              >
                {result.ratingChange >= 0 ? '+' : ''}{result.ratingChange}
              </Text>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}