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

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,
  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 variant="high">Unknown Driver</Text>
          )}
          {isCurrentUser && (
            <Text size="xs" variant="low">(You)</Text>
          )}
          {isTopPerformer && (
            <Text size="xs">⭐</Text>
          )}
        </Box>
      </TableCell>
      <TableCell>
        <Text variant="primary" weight="medium">
          {rating || '—'}
        </Text>
      </TableCell>
      <TableCell>
        <Text variant="med">
          #{rank || '—'}
        </Text>
      </TableCell>
      <TableCell>
        <Text variant="success" weight="medium">
          {wins || 0}
        </Text>
      </TableCell>
      <TableCell>
        <Badge variant={roleVariant}>
          {roleLabel}
        </Badge>
      </TableCell>
      <TableCell>
        <Text variant="high" size="sm">
          {DateFormatter.formatShort(joinedAt)}
        </Text>
      </TableCell>
      {actions && (
        <TableCell textAlign="right">
          {actions}
        </TableCell>
      )}
    </TableRow>
  );
}