import React, { ReactNode } from 'react';
import { TableRow, TableCell } from './Table';
import { Box } from './Box';
import { Text } from './Text';
import { Badge } from './Badge';
import { DriverIdentity } from './DriverIdentity';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';

interface LeagueMemberRowProps {
  driver?: DriverViewModel;
  driverId: string;
  isCurrentUser: boolean;
  isTopPerformer: boolean;
  role: string;
  roleVariant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
  joinedAt: string | Date;
  rating?: number | string;
  rank?: number | string;
  wins?: number;
  actions?: ReactNode;
  href: string;
  meta?: string | null;
}

export function LeagueMemberRow({
  driver,
  driverId,
  isCurrentUser,
  isTopPerformer,
  role,
  roleVariant,
  joinedAt,
  rating,
  rank,
  wins,
  actions,
  href,
  meta,
}: LeagueMemberRowProps) {
  const roleLabel = role.charAt(0).toUpperCase() + role.slice(1);

  return (
    <TableRow variant={isTopPerformer ? 'highlight' : 'default'}>
      <TableCell>
        <Box display="flex" alignItems="center" gap={2}>
          {driver ? (
            <DriverIdentity
              driver={driver}
              href={href}
              contextLabel={roleLabel}
              meta={meta}
              size="md"
            />
          ) : (
            <Text color="text-white">Unknown Driver</Text>
          )}
          {isCurrentUser && (
            <Text size="xs" color="text-gray-500">(You)</Text>
          )}
          {isTopPerformer && (
            <Text size="xs">⭐</Text>
          )}
        </Box>
      </TableCell>
      <TableCell>
        <Text color="text-primary-blue" weight="medium">
          {rating || '—'}
        </Text>
      </TableCell>
      <TableCell>
        <Text color="text-gray-300">
          #{rank || '—'}
        </Text>
      </TableCell>
      <TableCell>
        <Text color="text-green-400" weight="medium">
          {wins || 0}
        </Text>
      </TableCell>
      <TableCell>
        <Badge variant={roleVariant}>
          {roleLabel}
        </Badge>
      </TableCell>
      <TableCell>
        <Text color="text-white" size="sm">
          {new Date(joinedAt).toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
          })}
        </Text>
      </TableCell>
      {actions && (
        <TableCell align="right">
          {actions}
        </TableCell>
      )}
    </TableRow>
  );
}