import { useNavigate } from "@tanstack/react-router";
import { useEffect, useId, useRef, useState } from "react";
import { useDismiss } from "~/hooks/use-dismiss";
import { fuzzyFilter } from "~/lib/fuzzy";
import { cn } from "~/utils/cn";

const MAX_RESULTS = 60;
const SHORT_SHA = 12;

type Kind = "branches" | "tags";

type Props = {
  owner: string;
  repo: string;
  current: string;
  branches: string[];
  tags: string[];
  path: string;
  mode: "tree" | "blob" | "commits" | "blame";
};

/**
 * Branch and tag picker: a styled trigger that opens a fuzzy-filterable list, with a branches/tags
 * toggle so hundreds of tags never crowd the branch list. Keyboard: type to filter, arrows, Enter, Escape.
 */
export function RefSwitcher({ owner, repo, current, branches, tags, path, mode }: Props) {
  const navigate = useNavigate();
  const [open, setOpen] = useState(false);
  const [kind, setKind] = useState<Kind>(tags.includes(current) && !branches.includes(current) ? "tags" : "branches");
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listId = useId();
  const ref = useDismiss<HTMLDivElement>(open, () => setOpen(false));

  const refs = kind === "branches" ? branches : tags;
  const results = fuzzyFilter(query, refs, MAX_RESULTS).map((match) => match.path);
  const known = branches.includes(current) || tags.includes(current);

  useEffect(() => {
    if (open) {
      setQuery("");
      setActive(0);
      inputRef.current?.focus();
    }
  }, [open]);

  useEffect(() => {
    setActive(0);
  }, [query, kind]);

  function go(target: string) {
    setOpen(false);
    const splat = path ? `${target}/${path}` : target;
    if (mode === "commits") navigate({ to: "/$owner/$repo/commits/$", params: { owner, repo, _splat: splat } });
    else if (mode === "blame") navigate({ to: "/$owner/$repo/blame/$", params: { owner, repo, _splat: splat } });
    else if (mode === "blob") navigate({ to: "/$owner/$repo/blob/$", params: { owner, repo, _splat: splat } });
    else navigate({ to: "/$owner/$repo/tree/$", params: { owner, repo, _splat: splat } });
  }

  function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      setActive((index) => Math.min(index + 1, results.length - 1));
    } else if (event.key === "ArrowUp") {
      event.preventDefault();
      setActive((index) => Math.max(index - 1, 0));
    } else if (event.key === "Enter") {
      event.preventDefault();
      const target = results[active];
      if (target) go(target);
    } else if (event.key === "Tab" && !event.shiftKey && results.length > 0) {
      event.preventDefault();
      setKind((value) => (value === "branches" ? "tags" : "branches"));
    }
  }

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        aria-label="Switch branch or tag"
        onClick={() => setOpen((value) => !value)}
        className="flex h-8 max-w-64 items-center gap-2 rounded-md border border-gray-700 bg-gray-900/80 px-3 text-xs text-gray-100 hover:border-gray-600 focus:border-accent-500 focus:ring-1 focus:ring-accent-500 focus:outline-none"
      >
        <span className="shrink-0 text-gray-500">
          {tags.includes(current) && !branches.includes(current) ? "⌂" : "⑂"}
        </span>
        <span className="truncate font-mono">{known ? current : current.slice(0, SHORT_SHA)}</span>
        <span aria-hidden className="shrink-0 text-gray-500">
          ▾
        </span>
      </button>
      {open && (
        <div
          aria-label="Switch branch or tag"
          className="animate-rise absolute left-0 z-20 mt-2 w-80 overflow-hidden rounded-md border border-gray-800 bg-gray-950 shadow-2xl shadow-black/60"
        >
          <div className="border-b border-gray-800 p-2">
            <input
              ref={inputRef}
              type="text"
              aria-controls={listId}
              value={query}
              onChange={(event) => setQuery(event.target.value)}
              onKeyDown={onKeyDown}
              placeholder={kind === "branches" ? "Find a branch…" : "Find a tag…"}
              className="h-8 w-full rounded-md border border-gray-700 bg-gray-900 px-2 font-mono text-xs text-gray-100 placeholder:text-gray-600 focus:border-accent-500 focus:outline-none"
            />
          </div>
          <div role="tablist" className="flex border-b border-gray-800 text-xs">
            {(["branches", "tags"] as const).map((item) => (
              <button
                key={item}
                type="button"
                role="tab"
                aria-selected={kind === item}
                onClick={() => setKind(item)}
                className={cn(
                  "flex-1 px-3 py-1.5 capitalize",
                  kind === item ? "border-b-2 border-accent-500 text-white" : "text-gray-400 hover:text-gray-200",
                )}
              >
                {item} <span className="text-gray-600">{item === "branches" ? branches.length : tags.length}</span>
              </button>
            ))}
          </div>
          <ul id={listId} className="max-h-72 overflow-y-auto py-1">
            {results.length === 0 && (
              <li className="px-3 py-2 text-xs text-gray-500">
                {refs.length === 0 ? `No ${kind}` : `Nothing matches “${query}”`}
              </li>
            )}
            {results.map((item, index) => (
              <li key={item} id={`${listId}-${index}`}>
                <button
                  type="button"
                  aria-current={item === current ? "true" : undefined}
                  tabIndex={-1}
                  onMouseEnter={() => setActive(index)}
                  onClick={() => go(item)}
                  className={cn(
                    "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-left font-mono text-xs",
                    index === active ? "bg-gray-900 text-white" : "text-gray-300",
                  )}
                >
                  <span className={cn("w-3 shrink-0 text-accent-400", item !== current && "invisible")}>✓</span>
                  <span className="truncate">{item}</span>
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}