/**
 * Floating action bar that appears when one or more PO line items are
 * checkbox-selected. Provides bulk Remove + Clear selection.
 *
 * Pattern adapted from inventory/src/components/product-import/steps/
 * ValidationStep/components/FloatingSelectionBar.tsx — but stripped down:
 * no zustand store, no template management, no delete confirmation
 * dialog (Remove on the PO page is local-only and instantly reversible
 * by adding the product again, so a confirm step would be friction).
 */

import { memo } from "react";
import { Button } from "@/components/ui/button";
import { X, Trash2 } from "lucide-react";

interface PoFloatingSelectionBarProps {
  selectedCount: number;
  onClear: () => void;
  onRemove: () => void;
}

export const PoFloatingSelectionBar = memo(function PoFloatingSelectionBar({
  selectedCount,
  onClear,
  onRemove,
}: PoFloatingSelectionBarProps) {
  if (selectedCount === 0) return null;

  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-4 duration-200">
      <div className="bg-background border border-border rounded-xl shadow-xl px-4 py-3 flex items-center gap-4">
        <div className="flex items-center gap-2">
          <div className="bg-primary text-primary-foreground text-sm font-medium px-2.5 py-1 rounded-md whitespace-nowrap">
            {selectedCount} selected
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClear}
            className="h-8 w-8 p-0"
            title="Clear selection"
            aria-label="Clear selection"
          >
            <X className="h-4 w-4" />
          </Button>
        </div>

        <div className="h-8 w-px bg-border" />

        <Button
          variant="destructive"
          size="sm"
          onClick={onRemove}
          className="gap-2"
        >
          <Trash2 className="h-4 w-4" />
          Remove
        </Button>
      </div>
    </div>
  );
});
