Select

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface SelectProps<T extends string> {
  options: readonly SelectOption<T>[];
  value?: T;
  defaultValue?: T;
  onValueChange?: (value: T) => void;
  placeholder?: string;
  /** Which edge of the trigger the menu lines up with. */
  align?: "start" | "end";
  className?: string;
  "aria-label"?: string;
}

const MENU_SPACE = 280;

export function Select<T extends string>({
  options,
  value,
  defaultValue,
  onValueChange,
  placeholder = "Select",
  align = "end",
  className,
  ...aria
}: SelectProps<T>) {
  const id = React.useId();
  const [internal, setInternal] = React.useState<T | undefined>(defaultValue);
  const current = value ?? internal;
  const selected = options.find((o) => o.value === current);

  const [open, setOpen] = React.useState(false);
  const [side, setSide] = React.useState<"bottom" | "top">("bottom");
  const [activeIndex, setActiveIndex] = React.useState(0);
  const rootRef = React.useRef<HTMLDivElement>(null);
  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const listRef = React.useRef<HTMLDivElement>(null);
  const typeahead = React.useRef({ text: "", at: 0 });

  const openMenu = (index?: number) => {
    const box = triggerRef.current?.getBoundingClientRect();
    if (box) setSide(window.innerHeight - box.bottom < MENU_SPACE && box.top > MENU_SPACE ? "top" : "bottom");
    setActiveIndex(index ?? Math.max(0, options.findIndex((o) => o.value === current)));
    setOpen(true);
  };

  const close = (refocus = true) => {
    setOpen(false);
    if (refocus) triggerRef.current?.focus();
  };

  const choose = (index: number) => {
    const option = options[index];
    if (!option) return;
    if (value === undefined) setInternal(option.value);
    onValueChange?.(option.value);
    close();
  };

  React.useEffect(() => {
    if (!open) return;
    listRef.current?.focus();
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node)) close(false);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [open]);

  const onTriggerKeyDown = (e: React.KeyboardEvent) => {
    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
      e.preventDefault();
      openMenu();
    }
  };

  const onListKeyDown = (e: React.KeyboardEvent) => {
    const last = options.length - 1;
    switch (e.key) {
      case "ArrowDown":
        e.preventDefault();
        setActiveIndex((i) => (i >= last ? 0 : i + 1));
        break;
      case "ArrowUp":
        e.preventDefault();
        setActiveIndex((i) => (i <= 0 ? last : i - 1));
        break;
      case "Home":
        e.preventDefault();
        setActiveIndex(0);
        break;
      case "End":
        e.preventDefault();
        setActiveIndex(last);
        break;
      case "Enter":
      case " ":
        e.preventDefault();
        choose(activeIndex);
        break;
      case "Escape":
        e.preventDefault();
        close();
        break;
      case "Tab":
        close(false);
        break;
      default:
        if (e.key.length === 1) {
          const now = e.timeStamp;
          const t = typeahead.current;
          t.text = now - t.at > 600 ? e.key.toLowerCase() : t.text + e.key.toLowerCase();
          t.at = now;
          const match = options.findIndex((o) => o.label.toLowerCase().startsWith(t.text));
          if (match >= 0) setActiveIndex(match);
        }
    }
  };

  return (
    <div ref={rootRef} className={cn("relative inline-flex", className)}>
      <motion.button
        ref={triggerRef}
        layout
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-controls={open ? `${id}-list` : undefined}
        aria-label={aria["aria-label"]}
        onClick={() => (open ? close() : openMenu())}
        onKeyDown={onTriggerKeyDown}
        style={{ borderRadius: 999 }}
        transition={{ type: "spring", bounce: 0.1, duration: 0.35 }}
        className={cn(
          "flex h-11 items-center gap-2 border border-input bg-transparent pl-4 pr-3 text-sm font-medium outline-none",
          "transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
          open && "bg-accent",
        )}
      >
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.span
            key={selected?.value ?? "placeholder"}
            layout="position"
            initial={{ opacity: 0, y: 8, filter: "blur(2px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            exit={{ opacity: 0, y: -8, filter: "blur(2px)" }}
            transition={{ type: "spring", bounce: 0, duration: 0.3 }}
            className={cn("flex items-center gap-2 whitespace-nowrap [&_svg]:size-4", !selected && "text-muted-foreground")}
          >
            {selected?.icon}
            {selected?.label ?? placeholder}
          </motion.span>
        </AnimatePresence>
        <motion.span layout="position" animate={{ rotate: open ? 180 : 0 }} className="text-muted-foreground">
          <ChevronDown className="size-4" />
        </motion.span>
      </motion.button>

      <AnimatePresence>
        {open && (
          <motion.div
            ref={listRef}
            id={`${id}-list`}
            role="listbox"
            tabIndex={-1}
            aria-activedescendant={`${id}-opt-${activeIndex}`}
            onKeyDown={onListKeyDown}
            initial={{ opacity: 0, scale: 0.95, y: side === "bottom" ? -6 : 6 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.97, transition: { duration: 0.12 } }}
            transition={{ type: "spring", bounce: 0.15, duration: 0.3 }}
            style={{ transformOrigin: `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}` }}
            className={cn(
              "absolute z-50 min-w-48 rounded-lg border border-border bg-popover p-1.5 text-popover-foreground shadow-xl outline-none",
              side === "bottom" ? "top-full mt-2" : "bottom-full mb-2",
              align === "end" ? "right-0" : "left-0",
            )}
          >
            {options.map((option, i) => {
              const isSelected = option.value === current;
              return (
                <div
                  key={option.value}
                  id={`${id}-opt-${i}`}
                  role="option"
                  aria-selected={isSelected}
                  onPointerMove={() => setActiveIndex(i)}
                  onClick={() => choose(i)}
                  className="relative flex h-10 cursor-pointer items-center gap-2.5 rounded-md px-3 text-sm [&_svg]:size-4"
                >
                  {activeIndex === i && (
                    <motion.span
                      layoutId={`${id}-highlight`}
                      className="absolute inset-0 rounded-md bg-accent"
                      transition={{ type: "spring", bounce: 0, duration: 0.25 }}
                    />
                  )}
                  <span className="relative flex flex-1 items-center gap-2.5 whitespace-nowrap">
                    {option.icon}
                    {option.label}
                  </span>
                  {isSelected && <Check className="relative text-muted-foreground" />}
                </div>
              );
            })}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}