moviedice/src/components/dice/roll-bar.tsx

"use client";

/**
 * <RollBar /> — two action buttons mounted above the movie list search bar.
 *
 *   🎲 Roll the Dice!  — random winner from the unwatched pool
 *   🎭 Genre Roll!     — opens the <GenreRollModal> for a filtered roll
 *
 * Both buttons are disabled (and carry a visible tooltip) when the list is
 * still loading OR the unwatched pool is empty. The tooltip strings are
 * hardcoded — no user/movie data is ever interpolated into `title=`, which
 * keeps the attribute XSS-safe.
 *
 * Minimum tap target: 44×44 px (WCAG 2.1 AA).
 */
interface RollBarProps {
  isLoading: boolean;
  poolEmpty: boolean;
  onRoll: () => void;
  onGenreRoll: () => void;
}

function disabledReason(isLoading: boolean, poolEmpty: boolean): string | null {
  if (isLoading) return "Loading list\u2026";
  if (poolEmpty) return "Nothing to roll";
  return null;
}

export function RollBar({ isLoading, poolEmpty, onRoll, onGenreRoll }: RollBarProps) {
  const reason = disabledReason(isLoading, poolEmpty);
  const disabled = reason !== null;

  const randomTooltip = reason ?? "Roll the dice for a random pick";
  const genreTooltip = reason ?? "Pick genres and moods, then roll";

  const baseClasses =
    "inline-flex min-h-[44px] min-w-[44px] items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold transition-colors";
  const enabledClasses =
    "bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400";
  const disabledClasses = "bg-gray-700 text-gray-400 cursor-not-allowed";

  return (
    <div
      className="flex flex-wrap items-center gap-3"
      aria-label="Randomizer actions"
      data-testid="roll-bar"
    >
      <button
        type="button"
        onClick={onRoll}
        disabled={disabled}
        aria-disabled={disabled}
        title={randomTooltip}
        data-testid="roll-bar-random"
        className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses}`}
      >
        <span aria-hidden="true">🎲</span>
        <span>Roll the Dice!</span>
      </button>

      <button
        type="button"
        onClick={onGenreRoll}
        disabled={disabled}
        aria-disabled={disabled}
        title={genreTooltip}
        data-testid="roll-bar-genre"
        className={`${baseClasses} ${
          disabled
            ? disabledClasses
            : "bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400"
        }`}
      >
        <span aria-hidden="true">🎭</span>
        <span>Genre Roll!</span>
      </button>
    </div>
  );
}