// src/components/ui/floating-bulk-bar.tsx — barre de sélection flottante,
// centrée bas d'écran, apparition/disparition animées en CSS (pas de lib).
// Le nœud reste MONTÉ quand `show` passe à false (translateY + opacity +
// pointer-events-none) : cela évite de re-monter les DropdownMenu enfants.
//
// Note : les DropdownMenu rendus à l'intérieur doivent passer `side="top"`
// (DropdownMenuContent) pour s'ouvrir vers le HAUT, la barre étant ancrée bas.
"use client";

import type * as React from "react";
import { cn } from "@/lib/utils";

export function FloatingBulkBar({
  show,
  children,
  className,
}: {
  show: boolean;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      // `inert` retire aussi les ~10 boutons de l'ordre de tabulation quand la
      // barre est invisible (aria-hidden seul laisserait des descendants
      // focusables — violation ARIA, et Entrée déclencherait des actions
      // invisibles). Supporté nativement par React 19.
      inert={!show}
      aria-hidden={!show}
      className={cn(
        "-translate-x-1/2 fixed bottom-6 left-1/2 z-40 flex items-center gap-2.5",
        "max-w-[calc(100vw-2rem)] overflow-x-auto rounded-2xl border bg-popover px-4 py-2.5",
        "shadow-[0_24px_60px_-18px_rgba(0,0,0,0.45)] transition-all duration-[250ms] ease-out",
        show
          ? "translate-y-0 opacity-100"
          : "pointer-events-none translate-y-5 opacity-0",
        className,
      )}
    >
      {children}
    </div>
  );
}

/** Vertical hairline separator for grouping actions inside the bar. */
export function FloatingBulkBarSeparator({
  className,
}: {
  className?: string;
}) {
  return (
    <span
      aria-hidden
      className={cn("h-5 w-px shrink-0 bg-border", className)}
    />
  );
}