import { Button } from "~/components/ui/button";
import { Play, Pause, FastForward } from "lucide-react";

interface CommissionerControlsProps {
  isDraftStarted: boolean;
  isDraftPaused: boolean;
  isDraftComplete: boolean;
  currentTeamName: string;
  onStartDraft: () => void;
  onPauseDraft: () => void;
  onResumeDraft: () => void;
  onForcePick: () => void;
}

export function CommissionerControls({
  isDraftStarted,
  isDraftPaused,
  isDraftComplete,
  currentTeamName,
  onStartDraft,
  onPauseDraft,
  onResumeDraft,
  onForcePick,
}: CommissionerControlsProps) {
  if (isDraftComplete) {
    return (
      <div className="space-y-4">
        <div className="rounded-lg bg-green-500/10 p-4 text-center">
          <p className="font-medium text-green-600 dark:text-green-400">
            Draft Complete
          </p>
        </div>
      </div>
    );
  }

  if (!isDraftStarted) {
    return (
      <div className="space-y-4">
        <p className="text-sm text-muted-foreground">
          The draft has not started yet. Click below to begin the draft.
        </p>
        <Button onClick={onStartDraft} className="w-full" size="lg">
          <Play className="mr-2 h-4 w-4" />
          Start Draft
        </Button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Draft Status */}
      <div className="rounded-lg border bg-muted/50 p-3">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium">Draft Status:</span>
          <span
            className={`text-sm font-semibold ${
              isDraftPaused
                ? "text-yellow-600 dark:text-yellow-400"
                : "text-green-600 dark:text-green-400"
            }`}
          >
            {isDraftPaused ? "Paused" : "Active"}
          </span>
        </div>
        <div className="mt-2 flex items-center justify-between">
          <span className="text-sm font-medium">Current Pick:</span>
          <span className="text-sm text-muted-foreground">{currentTeamName}</span>
        </div>
      </div>

      {/* Control Buttons */}
      <div className="space-y-2">
        {isDraftPaused ? (
          <Button onClick={onResumeDraft} className="w-full" variant="default">
            <Play className="mr-2 h-4 w-4" />
            Resume Draft
          </Button>
        ) : (
          <Button onClick={onPauseDraft} className="w-full" variant="outline">
            <Pause className="mr-2 h-4 w-4" />
            Pause Draft
          </Button>
        )}

        <Button
          onClick={onForcePick}
          className="w-full"
          variant="destructive"
          disabled={isDraftPaused}
        >
          <FastForward className="mr-2 h-4 w-4" />
          Force Pick for {currentTeamName}
        </Button>
      </div>

      {/* Help Text */}
      <div className="rounded-lg bg-muted/30 p-3">
        <p className="text-xs text-muted-foreground">
          <strong>Force Pick:</strong> Automatically selects the top player from the
          current team's queue, or the highest EV available player if queue is empty.
        </p>
      </div>
    </div>
  );
}