"use client";

import { useLinkStatus } from "next/link";
import { createPortal } from "react-dom";

import { RouteLoading } from "@/components/RouteLoading";

/**
 * A full-screen loading screen that appears the instant the surrounding
 * `<Link>` starts navigating — before any response arrives — so a slow route
 * never looks like a dead tap. Renders nothing while idle and disappears with
 * the page that owns it.
 *
 * Portalled to <body>: the link sits inside a glass card, and `backdrop-filter`
 * makes such an ancestor a containing block for `position: fixed` — rendered
 * in place, the overlay was confined to a 44px strip of the card instead of the
 * viewport.
 */
export function LinkLoadingScreen({ messageKey }: { messageKey: string }) {
  const { pending } = useLinkStatus();

  if (!pending || typeof document === "undefined") return null;

  return createPortal(
    <div className="pointer-events-none fixed inset-0 z-50 bg-[color-mix(in_oklab,var(--page)_88%,transparent)]">
      <RouteLoading messageKey={messageKey} />
    </div>,
    document.body,
  );
}