'use client';

import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { RaceCard, RaceTimeColumn, RaceInfo } from '@/ui/RaceCard';
import { Car, Trophy, Zap, ArrowRight } from 'lucide-react';
import React from 'react';
import { LucideIcon } from 'lucide-react';

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

export function RaceListItem({
  track,
  car,
  timeLabel,
  relativeTimeLabel,
  dateLabel,
  dayLabel,
  status,
  leagueName,
  leagueHref,
  strengthOfField,
  onClick,
  statusConfig,
}: RaceListItemProps) {
  const isLive = status === 'running';

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

      <div style={{ width: '1px', height: '2.5rem', backgroundColor: 'var(--ui-color-border-muted)', opacity: 0.2 }} />

      <RaceInfo
        title={track}
        subtitle={car}
        badge={
          <Badge variant={statusConfig.variant}>
            <Icon icon={statusConfig.icon} size={3.5} />
            {statusConfig.label}
          </Badge>
        }
        meta={
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            {strengthOfField && (
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                <Icon icon={Zap} size={3.5} intent="warning" />
                <Text size="sm" variant="low">SOF {strengthOfField}</Text>
              </div>
            )}
            {leagueName && leagueHref && (
              <Link
                href={leagueHref}
                onClick={(e) => e.stopPropagation()}
                variant="primary"
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
                  <Icon icon={Trophy} size={3.5} intent="primary" />
                  <Text size="sm" variant="primary">{leagueName}</Text>
                  <Icon icon={ArrowRight} size={3} intent="primary" />
                </div>
              </Link>
            )}
          </div>
        }
      />
    </RaceCard>
  );
}