"use client";

import { sheetSpring } from "@aur-ui/ui/lib/motion";
import { cn } from "@aur-ui/ui/lib/utils";
import { XIcon } from "lucide-react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

/**
 * Floating bulk-selection bar — springs up from the bottom of its positioning
 * container while rows are selected. Give the table wrapper `relative` (or
 * use `fixed` for app-wide placement). Count chip + actions + clear; the bar
 * disappears when the selection empties.
 */
export function BulkActionBar({
  count,
  label,
  onClear,
  clearLabel = "Clear selection",
  position = "absolute",
  className,
  children,
}: {
  /** Number of selected rows; 0 hides the bar. */
  count: number;
  /** Selection text for the count, e.g. `3 selected` / `已选 3 项`. */
  label: ReactNode;
  onClear: () => void;
  clearLabel?: string;
  /** `absolute` floats in the nearest positioned ancestor; `fixed` in the viewport. */
  position?: "absolute" | "fixed";
  className?: string;
  /** Action buttons (ghost/outline read best on the floating surface). */
  children: ReactNode;
}) {
  const reduce = useReducedMotion();

  return (
    <AnimatePresence>
      {count > 0 ? (
        <motion.div
          data-slot="bulk-action-bar"
          initial={reduce ? { opacity: 0 } : { opacity: 0, y: 16 }}
          animate={reduce ? { opacity: 1 } : { opacity: 1, y: 0 }}
          exit={reduce ? { opacity: 0 } : { opacity: 0, y: 16 }}
          transition={sheetSpring}
          className={cn(
            "bottom-4 left-1/2 z-30 -translate-x-1/2",
            position,
            "flex items-center gap-1.5 rounded-overlay bg-surface py-1.5 pr-1.5 pl-3 shadow-overlay",
            className,
          )}
        >
          <span className="rounded-mark bg-brand-soft px-2 py-0.5 text-xs font-semibold whitespace-nowrap text-brand">
            {label}
          </span>
          <div className="flex items-center gap-1">{children}</div>
          <button
            type="button"
            aria-label={typeof clearLabel === "string" ? clearLabel : undefined}
            onClick={onClear}
            className="ml-1 inline-flex size-7 items-center justify-center rounded-control text-ink-400 transition-colors hover:bg-ink-wash hover:text-ink-900"
          >
            <XIcon className="size-3.5" />
          </button>
        </motion.div>
      ) : null}
    </AnimatePresence>
  );
}