'use client';

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

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"
          className="w-full flex items-center justify-center gap-2"
          onClick={onRegister}
          disabled={isLoading.register}
        >
          <UserPlus className="w-4 h-4" />
          {isLoading.register ? 'Registering...' : 'Register for Race'}
        </Button>
      );
    }

    if (isUserRegistered) {
      return (
        <>
          <div className="flex items-center gap-2 px-4 py-3 bg-performance-green/10 border border-performance-green/30 rounded-lg text-performance-green">
            <CheckCircle2 className="w-5 h-5" />
            <span className="font-medium">You're Registered</span>
          </div>
          <Button
            variant="secondary"
            className="w-full flex items-center justify-center gap-2"
            onClick={onWithdraw}
            disabled={isLoading.withdraw}
          >
            <UserMinus className="w-4 h-4" />
            {isLoading.withdraw ? 'Withdrawing...' : 'Withdraw'}
          </Button>
        </>
      );
    }

    // Show cancel button for owners/admins
    if (isOwnerOrAdmin) {
      return (
        <Button
          variant="secondary"
          className="w-full flex items-center justify-center gap-2"
          onClick={onCancel}
          disabled={isLoading.cancel}
        >
          <XCircle className="w-4 h-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"
        className="w-full flex items-center justify-center gap-2"
        onClick={onEndRace}
      >
        <CheckCircle2 className="w-4 h-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"
        className="w-full flex items-center justify-center gap-2"
        onClick={onReopen}
        disabled={isLoading.reopen}
      >
        <PlayCircle className="w-4 h-4" />
        {isLoading.reopen ? 'Re-opening...' : 'Re-open Race'}
      </Button>
    );
  }

  return null;
}