import { Link, useNavigate } from "@tanstack/react-router";
import { inputClass } from "./ui/Field";
import { cn } from "~/utils/cn";

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

export function RefSwitcher({ owner, repo, current, branches, tags, path, mode }: Props) {
  const navigate = useNavigate();
  const known = branches.includes(current) || tags.includes(current);
  const groups = [
    { label: "Branches", refs: branches },
    { label: "Tags", refs: tags },
  ].filter((group) => group.refs.length > 0);

  function go(ref: string) {
    const splat = path ? `${ref}/${path}` : ref;
    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 } });
  }

  return (
    <>
      <label htmlFor="ref-switcher" className="sr-only">
        Switch branch or tag
      </label>
      <select
        id="ref-switcher"
        value={current}
        onChange={(event) => go(event.target.value)}
        className={cn(inputClass, "h-8 w-auto max-w-56 font-mono text-xs")}
      >
        {!known && <option value={current}>{current.slice(0, 12)}</option>}
        {groups.map((group) => (
          <optgroup key={group.label} label={group.label}>
            {group.refs.map((ref) => (
              <option key={ref} value={ref}>
                {ref}
              </option>
            ))}
          </optgroup>
        ))}
      </select>
    </>
  );
}

export function Breadcrumbs({
  owner,
  repo,
  gitRef,
  path,
}: {
  owner: string;
  repo: string;
  gitRef: string;
  path: string;
}) {
  const parts = path.split("/").filter(Boolean);
  return (
    <nav aria-label="Path" className="flex min-w-0 flex-wrap items-center gap-1 font-mono text-sm">
      <Link
        to="/$owner/$repo/tree/$"
        params={{ owner, repo, _splat: gitRef }}
        className="font-medium text-accent-400 hover:underline"
      >
        {repo}
      </Link>
      {parts.map((part, index) => {
        const isLast = index === parts.length - 1;
        const prefix = parts.slice(0, index + 1).join("/");
        return (
          <span key={prefix} className="flex items-center gap-1">
            <span className="text-gray-600">/</span>
            {isLast ? (
              <span className="text-gray-100">{part}</span>
            ) : (
              <Link
                to="/$owner/$repo/tree/$"
                params={{ owner, repo, _splat: `${gitRef}/${prefix}` }}
                className="text-accent-400 hover:underline"
              >
                {part}
              </Link>
            )}
          </span>
        );
      })}
    </nav>
  );
}