import React from 'react';
import { Stack } from '@/ui/Stack';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Trophy, Scale, LogOut, CheckCircle, XCircle, PlayCircle } from 'lucide-react';

interface RaceActionBarProps {
  status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
  isUserRegistered: boolean;
  canRegister: boolean;
  onRegister?: () => void;
  onWithdraw?: () => void;
  onResultsClick?: () => void;
  onStewardingClick?: () => void;
  onFileProtest?: () => void;
  isAdmin?: boolean;
  onCancel?: () => void;
  onReopen?: () => void;
  onEndRace?: () => void;
  isLoading?: {
    register?: boolean;
    withdraw?: boolean;
    cancel?: boolean;
    reopen?: boolean;
    complete?: boolean;
  };
}

export function RaceActionBar({
  status,
  isUserRegistered,
  canRegister,
  onRegister,
  onWithdraw,
  onResultsClick,
  onStewardingClick,
  onFileProtest,
  isAdmin,
  onCancel,
  onReopen,
  onEndRace,
  isLoading = {}
}: RaceActionBarProps) {
  return (
    <Stack direction="row" gap={3} wrap>
      {status === 'scheduled' && (
        <>
          {!isUserRegistered && canRegister && (
            <Button 
              variant="primary" 
              onClick={onRegister} 
              disabled={isLoading.register}
              icon={<Icon icon={CheckCircle} size={4} />}
            >
              Register
            </Button>
          )}
          {isUserRegistered && (
            <Button 
              variant="secondary" 
              onClick={onWithdraw} 
              disabled={isLoading.withdraw}
              icon={<Icon icon={LogOut} size={4} />}
            >
              Withdraw
            </Button>
          )}
          {isAdmin && (
            <Button 
              variant="danger" 
              onClick={onCancel} 
              disabled={isLoading.cancel}
              icon={<Icon icon={XCircle} size={4} />}
            >
              Cancel Race
            </Button>
          )}
        </>
      )}

      {status === 'running' && (
        <>
          <Button variant="race-final" disabled icon={<Icon icon={PlayCircle} size={4} />}>
            Live Now
          </Button>
          {isAdmin && (
            <Button 
              variant="primary" 
              onClick={onEndRace} 
              disabled={isLoading.complete}
            >
              End Race
            </Button>
          )}
        </>
      )}

      {status === 'completed' && (
        <>
          <Button 
            variant="primary" 
            onClick={onResultsClick} 
            icon={<Icon icon={Trophy} size={4} />}
          >
            View Results
          </Button>
          {isUserRegistered && onFileProtest && (
            <Button 
              variant="secondary" 
              onClick={onFileProtest} 
              icon={<Icon icon={Scale} size={4} />}
            >
              File Protest
            </Button>
          )}
          <Button 
            variant="secondary" 
            onClick={onStewardingClick} 
            icon={<Icon icon={Scale} size={4} />}
          >
            Stewarding
          </Button>
          {isAdmin && onReopen && (
            <Button 
              variant="secondary" 
              onClick={onReopen} 
              disabled={isLoading.reopen}
            >
              Reopen Race
            </Button>
          )}
        </>
      )}

      {status === 'cancelled' && isAdmin && onReopen && (
        <Button 
          variant="primary" 
          onClick={onReopen} 
          disabled={isLoading.reopen}
        >
          Reopen Race
        </Button>
      )}
    </Stack>
  );
}