import { Link } from "@tanstack/react-router";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button, buttonClass } from "~/ui/Button";
import { Callout } from "~/ui/Callout";
import { useBranchPushSuggestions } from "~/hooks/use-branch-push-suggestions";
import { cn } from "~/utils/cn";
import { Code } from "~/ui/Code";

type Props = { owner: string; repo: string; defaultBranch: string; className?: string };

export function BranchPushSuggestions({ owner, repo, defaultBranch, className }: Props) {
  const { pushes, dismiss } = useBranchPushSuggestions(owner, repo);
  if (pushes.length === 0) return null;
  return (
    <ul className={cn("space-y-2", className)} aria-label="Recently pushed branches">
      {pushes.map((push) => (
        <Callout as="li" key={push.branch} tone="warning" className="flex flex-wrap items-center gap-3">
          <span className="min-w-0 flex-1">
            You pushed <Code>{push.branch}</Code> <RelativeTime timestamp={push.pushedAt} />
          </span>
          <Link
            to="/$owner/$repo/compare/$"
            params={{ owner, repo, _splat: `${defaultBranch}...${push.branch}` }}
            className={buttonClass("primary", "sm")}
          >
            Compare &amp; pull request
          </Link>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => dismiss(push.branch)}
            aria-label={`Dismiss suggestion for ${push.branch}`}
          >
            ×
          </Button>
        </Callout>
      ))}
    </ul>
  );
}