import { Button } from '@/ui/Button';
import { ButtonGroup } from '@/ui/ButtonGroup';
import { Icon } from '@/ui/Icon';
import { InfoBanner } from '@/ui/InfoBanner';
import { PlayCircle, UserMinus, UserPlus, XCircle, CheckCircle2 } from 'lucide-react';

interface RaceJoinButtonProps {
  raceStatus: 'scheduled' | 'running' | 'completed' | 'cancelled';
  isUserRegistered: boolean;
  canRegister: boolean;
  onRegister: () => void;
  onWithdraw: () => void;
  onCancel: () => void;
  onReopen?: () => void;
  onEndRace?: () => void;
  canReopenRace?: boolean;
  isOwnerOrAdmin?: boolean;
  isLoading?: {
    register?: boolean;
    withdraw?: boolean;
    cancel?: boolean;
    reopen?: boolean;
  };
}

export function RaceJoinButton({
  raceStatus,
  isUserRegistered,
  canRegister,
  onRegister,
  onWithdraw,
  onCancel,
  onReopen,
  onEndRace,
  canReopenRace = false,
  isOwnerOrAdmin = false,
  isLoading = {},
}: RaceJoinButtonProps) {
  // Show registration button for scheduled races
  if (raceStatus === 'scheduled') {
    if (canRegister && !isUserRegistered) {
      return (
        <Button
          variant="primary"
          fullWidth
          onClick={onRegister}
          disabled={isLoading.register}
          icon={<Icon icon={UserPlus} size={4} />}
        >
          {isLoading.register ? 'Registering...' : 'Register for Race'}
        </Button>
      );
    }

    if (isUserRegistered) {
      return (
        <ButtonGroup alignment="start" gap={3}>
          <InfoBanner type="success">
            You&apos;re Registered
          </InfoBanner>
          <Button
            variant="secondary"
            fullWidth
            onClick={onWithdraw}
            disabled={isLoading.withdraw}
            icon={<Icon icon={UserMinus} size={4} />}
          >
            {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
          </Button>
        </ButtonGroup>
      );
    }

    // Show cancel button for owners/admins
    if (isOwnerOrAdmin) {
      return (
        <Button
          variant="secondary"
          fullWidth
          onClick={onCancel}
          disabled={isLoading.cancel}
          icon={<Icon icon={XCircle} size={4} />}
        >
          {isLoading.cancel ? 'Cancelling...' : 'Cancel Race'}
        </Button>
      );
    }

    return null;
  }

  // Show end race button for running races (owners/admins only)
  if (raceStatus === 'running' && isOwnerOrAdmin && onEndRace) {
    return (
      <Button
        variant="primary"
        fullWidth
        onClick={onEndRace}
        icon={<Icon icon={CheckCircle2} size={4} />}
      >
        End Race & Process Results
      </Button>
    );
  }

  // Show reopen button for completed/cancelled races (owners/admins only)
  if ((raceStatus === 'completed' || raceStatus === 'cancelled') && canReopenRace && isOwnerOrAdmin && onReopen) {
    return (
      <Button
        variant="secondary"
        fullWidth
        onClick={onReopen}
        disabled={isLoading.reopen}
        icon={<Icon icon={PlayCircle} size={4} />}
      >
        {isLoading.reopen ? 'Re-opening...' : 'Re-open Race'}
      </Button>
    );
  }

  return null;
}