import * as React from "react";
import { useRouterState } from "@tanstack/react-router";

import { cn } from "../lib/utils";
import { CardStack } from "./card-stack";

/**
 * A floating action bar that pins itself to the bottom of the nearest
 * positioned ancestor (usually a scroll container with `position: relative`).
 *
 * Rendered as a `CardStack` so it picks up the card visual — wrap action
 * buttons as children; they'll be right-aligned inside the card.
 *
 * To pin to the bottom even when content is short, the parent should be a
 * flex column filling the scroll container (so `mt-auto` pushes the actions
 * down). `sticky bottom-4` also keeps it visible while scrolling long content.
 *
 * Hidden while the router is navigating/loading so the actions don't flash
 * on top of a loading state.
 */
function FloatActions({ className, children }: { className?: string; children: React.ReactNode }) {
  const isLoading = useRouterState({ select: (s) => s.isLoading });

  if (isLoading) {
    return null;
  }

  return (
    // `transform-gpu` promotes the bar to its own compositing layer. Without it,
    // when an action button changes width (e.g. "Add integration" -> "Adding...")
    // the right-aligned row reflows and Chromium can leave a stale paint of the
    // sticky bar, rendering it doubled/ghosted. A dedicated layer repaints
    // atomically and avoids the artifact. Transforming the sticky element itself
    // does not affect its stickiness.
    <CardStack
      className={cn(
        "sticky shadow-lg bottom-4 left-0 right-0 mt-auto w-full transform-gpu",
        className,
      )}
    >
      <div className="flex items-center justify-end gap-3 px-4 py-3">{children}</div>
    </CardStack>
  );
}

export { FloatActions };