"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { IconCheck, IconSearch, IconSelector } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { transitions } from "../lib/motion";
import { Button } from "./button";
import { Kbd } from "./spinner";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";

export interface CommandItem {
  value: string;
  label: string;
  description?: string;
  icon?: React.ReactNode;
  group?: string;
  shortcut?: string;
  /** Extra words that should match the search. */
  keywords?: string[];
  disabled?: boolean;
}

function score(item: CommandItem, query: string): number {
  if (!query) return 1;
  const needle = query.toLowerCase();
  const label = item.label.toLowerCase();
  if (label.startsWith(needle)) return 3;
  if (label.includes(needle)) return 2;
  const haystack = [item.description ?? "", ...(item.keywords ?? [])].join(" ").toLowerCase();
  if (haystack.includes(needle)) return 1;
  // Subsequence match ("nwtk" → "new task") as a last resort.
  let position = 0;
  for (const character of needle) {
    position = label.indexOf(character, position);
    if (position === -1) return 0;
    position += 1;
  }
  return 0.5;
}

/**
 * A searchable list with keyboard navigation: type to filter, ↑/↓ to move,
 * Enter to choose. The highlight slides between items.
 */
export function CommandList({
  items,
  onSelect,
  placeholder = "Search",
  selectedValue,
  emptyText = "No matches",
  autoFocus = true,
  className,
}: {
  items: CommandItem[];
  onSelect: (value: string) => void;
  placeholder?: string;
  selectedValue?: string | null;
  emptyText?: string;
  autoFocus?: boolean;
  className?: string;
}) {
  const id = React.useId();
  const [query, setQuery] = React.useState("");
  const [active, setActive] = React.useState(0);
  const listRef = React.useRef<HTMLDivElement | null>(null);
  const filtered = React.useMemo(
    () =>
      items
        .map((item, order) => ({ item, order, score: score(item, query.trim()) }))
        .filter((entry) => entry.score > 0)
        .sort((a, b) => b.score - a.score || a.order - b.order)
        .map((entry) => entry.item),
    [items, query],
  );
  const groups = React.useMemo(() => {
    const map = new Map<string, CommandItem[]>();
    for (const item of filtered) {
      const key = query ? "" : (item.group ?? "");
      map.set(key, [...(map.get(key) ?? []), item]);
    }
    return [...map.entries()];
  }, [filtered, query]);
  const flat = groups.flatMap(([, entries]) => entries);

  React.useEffect(() => {
    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" });
  }, [active]);

  const choose = (item: CommandItem | undefined) => {
    if (item && !item.disabled) onSelect(item.value);
  };

  return (
    <div className={cn("flex flex-col", className)}>
      <div className="flex items-center gap-2 border-b border-border/60 px-3">
        <IconSearch aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
        <input
          role="combobox"
          aria-expanded="true"
          aria-controls={`${id}-list`}
          aria-activedescendant={flat[active] ? `${id}-${active}` : undefined}
          autoFocus={autoFocus}
          value={query}
          placeholder={placeholder}
          onChange={(event) => {
            setQuery(event.target.value);
            setActive(0);
          }}
          onKeyDown={(event) => {
            if (event.key === "ArrowDown") {
              event.preventDefault();
              setActive((index) => Math.min(flat.length - 1, index + 1));
            } else if (event.key === "ArrowUp") {
              event.preventDefault();
              setActive((index) => Math.max(0, index - 1));
            } else if (event.key === "Enter") {
              event.preventDefault();
              choose(flat[active]);
            }
          }}
          className="h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
        />
      </div>
      <div ref={listRef} id={`${id}-list`} role="listbox" className="max-h-72 overflow-y-auto p-1.5">
        {flat.length === 0 ? (
          <p className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
        ) : (
          groups.map(([group, entries]) => (
            <div key={group || "_"} role="group" aria-label={group || undefined}>
              {group ? <p className="px-2 pt-2 pb-1 text-[11px] font-medium text-muted-foreground">{group}</p> : null}
              {entries.map((item) => {
                const index = flat.indexOf(item);
                const isActive = index === active;
                return (
                  <div
                    key={item.value}
                    id={`${id}-${index}`}
                    data-index={index}
                    role="option"
                    aria-selected={selectedValue === item.value}
                    aria-disabled={item.disabled || undefined}
                    onMouseMove={() => setActive(index)}
                    onClick={() => choose(item)}
                    className={cn(
                      "relative flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm",
                      item.disabled ? "opacity-50" : "text-foreground",
                    )}
                  >
                    {isActive ? (
                      <motion.span
                        layoutId={`${id}-highlight`}
                        transition={transitions.indicator}
                        className="absolute inset-0 rounded-lg bg-muted"
                      />
                    ) : null}
                    {item.icon ? <span className="relative flex shrink-0 text-muted-foreground [&_svg]:size-4">{item.icon}</span> : null}
                    <span className="relative min-w-0 flex-1">
                      <span className="block truncate">{item.label}</span>
                      {item.description ? <span className="block truncate text-xs text-muted-foreground">{item.description}</span> : null}
                    </span>
                    {item.shortcut ? <Kbd className="relative">{item.shortcut}</Kbd> : null}
                    {selectedValue === item.value ? <IconCheck className="relative size-4 shrink-0 text-action" /> : null}
                  </div>
                );
              })}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

/** A select with search, for long option lists. */
export function Combobox({
  items,
  value,
  onValueChange,
  placeholder = "Choose…",
  searchPlaceholder = "Search",
  className,
}: {
  items: CommandItem[];
  value: string | null;
  onValueChange: (value: string) => void;
  placeholder?: string;
  searchPlaceholder?: string;
  className?: string;
}) {
  const [open, setOpen] = React.useState(false);
  const selected = items.find((item) => item.value === value);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className={cn("w-full justify-between font-normal", !selected && "text-muted-foreground", className)}
        >
          <span className="flex min-w-0 items-center gap-2 truncate">
            {selected?.icon}
            {selected?.label ?? placeholder}
          </span>
          <IconSelector className="size-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] min-w-56 p-0">
        <CommandList
          items={items}
          selectedValue={value}
          placeholder={searchPlaceholder}
          onSelect={(next) => {
            onValueChange(next);
            setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  );
}