'use client';

import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
import { Car, Trophy, Zap, ArrowRight, Clock, PlayCircle, CheckCircle2, XCircle, HelpCircle } from 'lucide-react';
import React from 'react';

const ICON_MAP = {
  Clock,
  PlayCircle,
  CheckCircle2,
  XCircle,
  HelpCircle,
};

interface RaceListItemProps {
  track: string;
  car: string;
  timeLabel?: string;
  relativeTimeLabel?: string;
  dateLabel?: string;
  dayLabel?: string;
  status: string;
  statusLabel: string;
  statusVariant: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
  statusIconName: string;
  leagueName?: string | null;
  leagueHref?: string;
  strengthOfField?: number | null;
  onClick: () => void;
}

export function RaceListItem({
  track,
  car,
  timeLabel,
  relativeTimeLabel,
  dateLabel,
  dayLabel,
  status,
  statusLabel,
  statusVariant,
  statusIconName,
  leagueName,
  leagueHref,
  strengthOfField,
  onClick,
}: RaceListItemProps) {
  const isLive = status === 'running';
  const StatusIcon = ICON_MAP[statusIconName as keyof typeof ICON_MAP] || HelpCircle;

  return (
    <RaceCard onClick={onClick} isLive={isLive}>
      <RaceTimeColumn
        date={dateLabel}
        time={dayLabel || timeLabel || ''}
        relativeTime={relativeTimeLabel || timeLabel}
        isLive={isLive}
      />

      <Box width="1px" height="2.5rem" bg="var(--ui-color-border-muted)" opacity={0.2} />

      <RaceInfo
        title={track}
        subtitle={car}
        badge={
          <Badge variant={statusVariant}>
            <Icon icon={StatusIcon} size={3.5} />
            {statusLabel}
          </Badge>
        }
        meta={
          <Group gap={4}>
            {strengthOfField && (
              <Group gap={1}>
                <Icon icon={Zap} size={3.5} intent="warning" />
                <Text size="sm" variant="low">SOF {strengthOfField}</Text>
              </Group>
            )}
            {leagueName && leagueHref && (
              <Link
                href={leagueHref}
                onClick={(e) => e.stopPropagation()}
                variant="primary"
              >
                <Group gap={1}>
                  <Icon icon={Trophy} size={3.5} intent="primary" />
                  <Text size="sm" variant="primary">{leagueName}</Text>
                  <Icon icon={ArrowRight} size={3} intent="primary" />
                </Group>
              </Link>
            )}
          </Group>
        }
      />
    </RaceCard>
  );
}