"use client";

import { pillSpring } from "@aur-ui/ui/lib/motion";
import { cn } from "@aur-ui/ui/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { type KeyboardEvent, type ReactNode, useId, useRef } from "react";

export type TabOption<T extends string> = {
  value: T;
  label: string;
};

const TRACK_CLASS =
  "inline-flex items-center gap-1 rounded-full bg-ink-wash p-1";

function itemClass(active: boolean) {
  return cn(
    "relative rounded-full px-3 py-1 text-xs font-medium transition-colors",
    active ? "text-ink-900" : "text-ink-500 hover:text-ink-700",
  );
}

// A controlled pill switcher with one shared visual (a sliding active pill) and
// two ARIA personalities:
//   • mode="tab"        — a tablist navigating content panels (Usage page).
//   • mode="segmented"  — a radiogroup picking one value of a filter/toggle
//                         (time-range switches). It looks like an iOS segmented
//                         control; "segmented control" is a UI pattern, so the
//                         accessible role is the standard radiogroup/radio.
// Both modes share roving-tabindex keyboard nav: ←/→ (and ↑/↓) cycle, Home/End
// jump to the ends, focus follows, and the move activates immediately.
//
// The two modes render as separate static-role branches on purpose: a dynamic
// `role={cond ? ... : ...}` defeats the a11y linter's static analysis, so each
// branch spells its roles out as literals.
export function Tabs<T extends string>({
  mode,
  value,
  onChange,
  options,
  ariaLabel,
  idBase,
}: {
  mode: "tab" | "segmented";
  value: T;
  onChange: (next: T) => void;
  options: readonly TabOption<T>[];
  ariaLabel: string;
  // Only used in tab mode: gives each tab a stable `id` and points
  // `aria-controls` at the caller's `${idBase}-panel` tabpanel.
  idBase?: string;
}) {
  // Unique per instance so the sliding pill (shared `layoutId`) never animates
  // across two separate switchers that happen to render on the same page.
  const layoutId = useId();
  const reduce = useReducedMotion();

  // Hold each option's button so keyboard navigation can move focus (roving
  // tabindex) without reaching into the DOM by selector.
  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
  const setRef = (index: number) => (el: HTMLButtonElement | null) => {
    itemRefs.current[index] = el;
  };

  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const count = options.length;
    const current = options.findIndex((o) => o.value === value);
    let target: number;
    switch (event.key) {
      case "ArrowRight":
      case "ArrowDown":
        target = (current + 1) % count;
        break;
      case "ArrowLeft":
      case "ArrowUp":
        target = (current - 1 + count) % count;
        break;
      case "Home":
        target = 0;
        break;
      case "End":
        target = count - 1;
        break;
      default:
        return;
    }
    event.preventDefault();
    const next = options[target];
    if (next.value !== value) onChange(next.value);
    itemRefs.current[target]?.focus();
  }

  // Shared pill interior (sliding active background + label).
  function pill(active: boolean, label: string): ReactNode {
    return (
      <>
        {active && (
          <motion.span
            aria-hidden
            layoutId={layoutId}
            className="absolute inset-0 rounded-full bg-surface shadow-section"
            transition={reduce ? { duration: 0 } : pillSpring}
          />
        )}
        <span className="relative z-10">{label}</span>
      </>
    );
  }

  if (mode === "tab") {
    return (
      <div
        role="tablist"
        aria-label={ariaLabel}
        tabIndex={-1}
        onKeyDown={onKeyDown}
        className={TRACK_CLASS}
      >
        {options.map((option, index) => {
          const active = option.value === value;
          return (
            <button
              key={option.value}
              ref={setRef(index)}
              type="button"
              role="tab"
              aria-selected={active}
              tabIndex={active ? 0 : -1}
              id={idBase ? `${idBase}-${option.value}` : undefined}
              aria-controls={idBase ? `${idBase}-panel` : undefined}
              onClick={() => onChange(option.value)}
              className={itemClass(active)}
            >
              {pill(active, option.label)}
            </button>
          );
        })}
      </div>
    );
  }

  return (
    <div
      role="radiogroup"
      aria-label={ariaLabel}
      tabIndex={-1}
      onKeyDown={onKeyDown}
      className={TRACK_CLASS}
    >
      {options.map((option, index) => {
        const active = option.value === value;
        return (
          // biome-ignore lint/a11y/useSemanticElements: pill-styled segmented control can't use a native <input type="radio">; button + role="radio" gives the equivalent single-select semantics with the custom visual.
          <button
            key={option.value}
            ref={setRef(index)}
            type="button"
            role="radio"
            aria-checked={active}
            tabIndex={active ? 0 : -1}
            onClick={() => onChange(option.value)}
            className={itemClass(active)}
          >
            {pill(active, option.label)}
          </button>
        );
      })}
    </div>
  );
}