import { isAtomCommandInterrupted } from "@t3tools/client-runtime/state/runtime";import type { EnvironmentId, PullRequestRef } from "@t3tools/contracts";import { cloneElement, useState, type ComponentPropsWithoutRef, type ReactElement } from "react"; import { formatRelativeTimeLabel } from "~/timestampFormat";import { pullRequestEnvironment } from "~/state/pullRequests";import { useAtomQueryRunner } from "~/state/use-atom-query-runner";import { useEnvironmentQuery } from "~/state/query"; import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "../ui/preview-card";import { PullRequestActorAvatar, resolvePullRequestState } from "./pullRequestPresentation"; interface PullRequestLinkPreviewTarget {  readonly environmentId: EnvironmentId;  readonly input: PullRequestRef;} type PullRequestLinkElement = ReactElement<ComponentPropsWithoutRef<"a">>; export function PullRequestLinkPreview({  link,  originalUrl,  target,  confirmBeforeOpen,  onOpenPullRequest,  onOpenFallback,}: {  link: PullRequestLinkElement;  originalUrl: string;  target: PullRequestLinkPreviewTarget;  confirmBeforeOpen: boolean;  onOpenPullRequest: (url: string) => boolean;  onOpenFallback: (url: string) => Promise<void>;}) {  const [open, setOpen] = useState(false);  const [resolvingClick, setResolvingClick] = useState(false);  const detailQuery = useEnvironmentQuery(    open      ? pullRequestEnvironment.detail({          environmentId: target.environmentId,          input: target.input,        })      : null,  );  const readDetail = useAtomQueryRunner(pullRequestEnvironment.detail, {    reportFailure: false,    reportDefect: false,  });   const trigger = confirmBeforeOpen    ? cloneElement(link, {        onClick: (event) => {          if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;          event.preventDefault();          event.stopPropagation();          if (resolvingClick) return;          setOpen(false);          setResolvingClick(true);          void readDetail({ environmentId: target.environmentId, input: target.input })            .then(async (result) => {              if (isAtomCommandInterrupted(result)) return;              if (result._tag === "Success" && onOpenPullRequest(result.value.url)) return;              await onOpenFallback(originalUrl);            })            .catch((error: unknown) => {              console.error("[pull-request-link-preview] failed to open link", error);            })            .finally(() => setResolvingClick(false));        },      })    : link;  const detail = detailQuery.data;  const state =    detail === null      ? null      : resolvePullRequestState({ state: detail.state, isDraft: detail.isDraft });  const authorLabel =    detail?.author === null      ? "ghost"      : detail?.author.name && detail.author.name !== detail.author.login        ? `${detail.author.name} (@${detail.author.login})`        : (detail?.author.login ?? null);   return (    <PreviewCard open={open} onOpenChange={setOpen}>      <PreviewCardTrigger render={trigger} delay={350} closeDelay={120} />      <PreviewCardPopup align="center" className="w-80 max-w-[calc(100vw-2rem)] p-3">        {detail === null ? (          <p className="text-xs leading-relaxed text-muted-foreground wrap-anywhere">            {detailQuery.isPending ? "Loading pull request details…" : originalUrl}          </p>        ) : (          <div className="min-w-0">            <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">              <span className="min-w-0 truncate">{detail.repository}</span>              <span className="shrink-0">#{detail.number}</span>              <span aria-hidden>·</span>              {state === null ? null : (                <span className="inline-flex shrink-0 items-center gap-1">                  <state.Icon aria-hidden className={`size-3 ${state.toneClassName}`} />                  {state.label}                </span>              )}            </div>            <p className="mt-1 text-sm font-medium leading-snug text-foreground text-pretty">              {detail.title}            </p>            <div className="mt-2 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">              <PullRequestActorAvatar actor={detail.author} className="size-4" />              <span className="min-w-0 truncate">{authorLabel}</span>              <span aria-hidden>·</span>              <span className="shrink-0">opened {formatRelativeTimeLabel(detail.createdAt)}</span>            </div>          </div>        )}      </PreviewCardPopup>    </PreviewCard>  );}