"use client";

import { useRef, type KeyboardEvent, type ReactNode } from "react";

export interface RadioOption<T extends string | number> {
  value: T;
  label: ReactNode;
  activeClass?: string;
}

interface RadioGroupProps<T extends string | number> {
  name: string;
  options: readonly RadioOption<T>[];
  value: T;
  onChange: (value: T) => void;
  size?: "xs" | "sm";
  fullWidth?: boolean;
}

/**
 * Accessible segmented control implementing WAI-ARIA `radiogroup` roving tabIndex
 * and arrow/Home/End keyboard navigation (1 Tab stop per group instead of N).
 */
export function RadioGroup<T extends string | number>({
  name,
  options,
  value,
  onChange,
  size = "sm",
  fullWidth = false,
}: RadioGroupProps<T>) {
  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);

  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
    const currentIndex = Math.max(0, options.findIndex((o) => o.value === value));
    let nextIndex = -1;

    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
      nextIndex = (currentIndex + 1) % options.length;
    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
      nextIndex = (currentIndex - 1 + options.length) % options.length;
    } else if (e.key === "Home") {
      nextIndex = 0;
    } else if (e.key === "End") {
      nextIndex = options.length - 1;
    }

    if (nextIndex !== -1) {
      e.preventDefault();
      onChange(options[nextIndex].value);
      buttonsRef.current[nextIndex]?.focus();
    }
  }

  const pad =
    size === "xs"
      ? fullWidth
        ? "min-h-8 flex-1 min-w-0 px-1.5 py-1 text-xs"
        : "min-h-8 px-2.5 py-1 text-xs"
      : fullWidth
        ? "min-h-9 flex-1 min-w-0 px-2 py-1.5 text-sm"
        : "min-h-9 min-w-9 px-3 py-1.5 text-sm";

  return (
    <div
      role="radiogroup"
      aria-label={name}
      onKeyDown={handleKeyDown}
      className={`${fullWidth ? "flex w-full" : "inline-flex shrink-0"} max-w-full rounded-lg border border-line-strong bg-raised p-0.5`}
    >
      {options.map((option, i) => {
        const checked = option.value === value;
        const activeStyle = option.activeClass ?? "bg-surface text-ink border border-selected-line/60 shadow-2xs";
        return (
          <button
            key={String(option.value)}
            ref={(el) => {
              buttonsRef.current[i] = el;
            }}
            type="button"
            role="radio"
            aria-checked={checked}
            tabIndex={checked ? 0 : -1}
            onClick={() => onChange(option.value)}
            className={`trim-cap inline-flex items-center justify-center rounded-md font-medium tabular-nums transition-colors ${pad} ${
              checked ? activeStyle : "border border-transparent text-ink-muted hover:text-ink"
            }`}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}