import { Link } from "@tanstack/react-router";
import { Icon } from "~/ui/Icon";
import { cn } from "~/utils/cn";
import type { usePull } from "~/hooks/use-pull";

type StackEntry = ReturnType<typeof usePull>["stack"][number];

function stateOf(entry: StackEntry): { label: string; dot: string } {
  if (entry.merged) return { label: "Merged", dot: "bg-merged-500" };
  if (entry.state === "closed") return { label: "Closed", dot: "bg-danger-500" };
  if (entry.draft) return { label: "Draft", dot: "bg-gray-500" };
  return { label: "Open", dot: "bg-success-500" };
}

/** The stack this pull request belongs to, newest on top and the trunk at the bottom, like `gt log`. */
export function PullStack({ owner, repo, stack }: { owner: string; repo: string; stack: StackEntry[] }) {
  if (stack.length === 0) return null;
  const trunk = stack[0]?.baseRef;
  const position = stack.findIndex((entry) => entry.current) + 1;
  return (
    <nav aria-label="Stack" className="rounded-lg border border-kumo-hairline bg-kumo-canvas/60">
      <header className="flex items-center gap-2 border-b border-kumo-hairline px-4 py-2 text-xs text-kumo-subtle">
        <Icon name="stack" className="text-accent-400" />
        <span className="font-medium text-kumo-default">Stack</span>
        <span>
          {position} of {stack.length}
        </span>
      </header>
      <ol className="relative px-4 py-2">
        <span aria-hidden className="absolute top-4 bottom-4 left-[1.3rem] w-px bg-kumo-fill" />
        {[...stack].reverse().map((entry) => {
          const state = stateOf(entry);
          return (
            <li key={entry.issueId} className="relative flex items-center gap-3 py-1">
              <span
                title={state.label}
                className={cn(
                  "relative z-10 size-2.5 shrink-0 rounded-full ring-4 ring-gray-950",
                  state.dot,
                  entry.current && "ring-accent-500/40",
                )}
              />
              <Link
                to="/$owner/$repo/pull/$number"
                params={{ owner, repo, number: String(entry.number) }}
                aria-current={entry.current ? "page" : undefined}
                className={cn(
                  "flex min-w-0 flex-1 items-baseline gap-2 rounded px-2 py-0.5 text-sm hover:bg-kumo-tint",
                  entry.current ? "bg-kumo-base font-medium text-white" : "text-kumo-default",
                  (entry.merged || entry.state === "closed") && "text-kumo-subtle",
                )}
              >
                <span className="shrink-0 font-mono text-xs text-kumo-subtle">#{entry.number}</span>
                <span className="truncate">{entry.title}</span>
                <span className="ml-auto hidden shrink-0 font-mono text-xs text-kumo-inactive sm:inline">
                  {entry.headRef}
                </span>
              </Link>
            </li>
          );
        })}
        {trunk && (
          <li className="relative flex items-center gap-3 py-1 text-xs text-kumo-subtle">
            <span className="relative z-10 size-2.5 shrink-0 rounded-full bg-kumo-interact ring-4 ring-gray-950" />
            <span className="px-2 font-mono">{trunk}</span>
          </li>
        )}
      </ol>
    </nav>
  );
}