import React from "react";
import { ChessPawn, Hourglass } from "lucide-react";
import { GradientIcon } from "~/components/ui/GradientIcon";
import { cn } from "~/lib/utils";

export interface TimerModeSelectorProps {
  value: "chess_clock" | "standard";
  onChange: (v: "chess_clock" | "standard") => void;
  disabled?: boolean;
}

const MODES = [
  {
    value: "chess_clock" as const,
    label: "Chess Clock",
    icon: ChessPawn,
    desc: "Time bank + bonus per pick; bank early to save time for tough decisions",
  },
  {
    value: "standard" as const,
    label: "Standard",
    icon: Hourglass,
    desc: "Traditional fixed timer; each pick gets the same amount of time, no banking or carry-over",
  },
];

export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
  function handleGroupKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
    if (disabled) return;
    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(e.key)) return;
    e.preventDefault();
    const idx = MODES.findIndex((m) => m.value === value);
    const next = e.key === "ArrowDown" || e.key === "ArrowRight"
      ? (idx + 1) % MODES.length
      : (idx - 1 + MODES.length) % MODES.length;
    const nextValue = MODES[next].value;
    onChange(nextValue);
    e.currentTarget.querySelector<HTMLElement>(`[data-radio-value="${nextValue}"]`)?.focus();
  }

  return (
    <div role="radiogroup" aria-label="Timer mode" onKeyDown={handleGroupKeyDown} className="grid grid-cols-2 gap-3">
      {MODES.map((mode) => {
        const selected = value === mode.value;
        return (
          <button
            key={mode.value}
            type="button"
            role="radio"
            aria-checked={selected}
            tabIndex={selected ? 0 : -1}
            data-radio-value={mode.value}
            onClick={() => onChange(mode.value)}
            disabled={disabled}
            className={cn(
              "flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all",
              selected ? "border-primary" : "border-border hover:border-primary/60",
              disabled && "opacity-50 cursor-not-allowed"
            )}
          >
            <GradientIcon
              icon={mode.icon}
              className="h-7 w-7"
              style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
            />
            <span className={cn("text-sm font-semibold", !selected && "text-muted-foreground")}>
              {mode.label}
            </span>
            <span className="text-xs text-muted-foreground text-center leading-tight">
              {mode.desc}
            </span>
          </button>
        );
      })}
    </div>
  );
}