"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";

export interface SegmentedOption<T extends string> {
  value: T;
  label: React.ReactNode;
  icon?: React.ReactNode;
}

/**
 * A row of mutually exclusive choices with a sliding selection. Arrow keys
 * move the selection (roving focus), like a native radio group.
 */
export function SegmentedControl<T extends string>({
  value,
  onValueChange,
  options,
  size = "md",
  label,
  className,
}: {
  value: T;
  onValueChange: (value: T) => void;
  options: Array<SegmentedOption<T>>;
  size?: "sm" | "md";
  label: string;
  className?: string;
}) {
  const id = React.useId();
  const refs = React.useRef<Array<HTMLButtonElement | null>>([]);
  const selectedIndex = Math.max(0, options.findIndex((option) => option.value === value));
  const move = (delta: number) => {
    const next = (selectedIndex + delta + options.length) % options.length;
    const option = options[next];
    if (!option) return;
    onValueChange(option.value);
    refs.current[next]?.focus();
  };
  return (
    <div
      role="radiogroup"
      aria-label={label}
      className={cn("inline-flex rounded-xl bg-muted p-0.5", className)}
      onKeyDown={(event) => {
        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
          event.preventDefault();
          move(1);
        } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
          event.preventDefault();
          move(-1);
        }
      }}
    >
      {options.map((option, index) => {
        const selected = option.value === value;
        return (
          <button
            key={option.value}
            ref={(element) => {
              refs.current[index] = element;
            }}
            type="button"
            role="radio"
            aria-checked={selected}
            tabIndex={selected ? 0 : -1}
            onClick={() => onValueChange(option.value)}
            className={cn(
              "relative inline-flex items-center gap-1.5 rounded-[10px] font-medium outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring/50",
              size === "sm" ? "h-7 px-2.5 text-xs" : "h-8 px-3 text-sm",
              selected ? "text-foreground" : "text-muted-foreground hover:text-foreground",
            )}
          >
            {selected ? (
              <motion.span
                layoutId={`${id}-segment`}
                transition={transitions.indicator}
                className="absolute inset-0 rounded-[10px] bg-background shadow-[0_1px_2px_rgba(0,0,0,0.06),0_0_0_1px_color-mix(in_oklch,var(--border)_70%,transparent)]"
              />
            ) : null}
            {option.icon ? <span className="relative flex [&_svg]:size-3.5">{option.icon}</span> : null}
            <span className="relative">{option.label}</span>
          </button>
        );
      })}
    </div>
  );
}