/**
 * BulkActionBar — R6UXS-002
 *
 * Canonical sticky footer shell for bulk-selection surfaces.
 * Renders the count label, optional "select all N matching" shortcut,
 * a Clear button, and a children slot for page-specific action buttons.
 *
 * Visibility: rendered only when effectiveCount > 0; callers gate on
 * selectedIds.size > 0 or always-mount + animate in (implementation choice
 * left to the adopting page).
 *
 * Usage:
 *   <BulkActionBar
 *     selectedCount={selectedIds.size}
 *     totalCount={totalCount}
 *     allMatchingSelected={allMatchingSelected}
 *     onSelectAllMatching={selectAllMatching}
 *     onClear={clearSelection}
 *   >
 *     <Button ...>Send to Recovery Run</Button>
 *   </BulkActionBar>
 */
import { X } from 'lucide-react';

import type { ReactNode } from 'react';

import { Button } from '@/Components/ui/button';
import { Checkbox } from '@/Components/ui/checkbox';
import { formatNumber } from '@/lib/format';

export interface BulkActionBarProps {
  /** Number of explicitly selected items (selectedIds.size). */
  selectedCount: number;
  /**
   * Total items in the current filter cohort (used for "select all N matching").
   * When null, the "select all matching" shortcut is hidden.
   */
  totalCount?: number | null;
  /** When true the entire filter cohort is selected. */
  allMatchingSelected: boolean;
  /**
   * Called when the user clicks "Select all N matching".
   * Required when totalCount is provided and > selectedCount.
   */
  onSelectAllMatching?: () => void;
  /** Called when the user clicks the Clear button. */
  onClear: () => void;
  /**
   * Label suffix used in the count display.
   * Default: 'selected' → "3 selected" / "All 42 matching selected".
   */
  itemLabel?: string;
  /** Page-specific action buttons rendered in the right slot. */
  children?: ReactNode;
  /**
   * When true, show the page-level checkbox in the left slot.
   * allPageSelected / somePageSelected control its checked/indeterminate state.
   */
  showPageCheckbox?: boolean;
  allPageSelected?: boolean;
  somePageSelected?: boolean;
  onTogglePageAll?: () => void;
}

export function BulkActionBar({
  selectedCount,
  totalCount,
  allMatchingSelected,
  onSelectAllMatching,
  onClear,
  itemLabel = 'selected',
  children,
  showPageCheckbox = false,
  allPageSelected = false,
  somePageSelected = false,
  onTogglePageAll,
}: BulkActionBarProps) {
  const showSelectAllMatching =
    !allMatchingSelected &&
    totalCount != null &&
    totalCount > selectedCount &&
    onSelectAllMatching != null;

  const countLabel = allMatchingSelected
    ? `All ${formatNumber(totalCount ?? selectedCount)} matching ${itemLabel}`
    : `${formatNumber(selectedCount)} ${itemLabel}`;

  return (
    <div
      role="toolbar"
      aria-label="Bulk actions"
      className="sticky bottom-0 z-10 border-t border-border bg-card p-4 shadow-lg"
    >
      <div className="container flex items-center justify-between gap-4">
        {/* Left: count + select-all-matching shortcut + clear */}
        <div className="flex items-center gap-2 flex-wrap">
          {showPageCheckbox && onTogglePageAll && (
            <Checkbox
              checked={allMatchingSelected || allPageSelected ? true : somePageSelected ? 'indeterminate' : false}
              onCheckedChange={onTogglePageAll}
              aria-label={
                allMatchingSelected || allPageSelected ? 'Deselect all on page' : 'Select all on page'
              }
              className="mr-1"
            />
          )}
          <span className="font-medium" aria-live="polite">
            {countLabel}
          </span>
          {showSelectAllMatching && (
            <button
              type="button"
              className="text-xs font-medium text-primary underline-offset-4 hover:underline"
              onClick={onSelectAllMatching}
            >
              Select all {formatNumber(totalCount!)} matching
            </button>
          )}
          <Button variant="ghost" size="sm" onClick={onClear}>
            <X className="mr-1 size-4" />
            Clear
          </Button>
        </div>

        {/* Right: page-specific action buttons */}
        {children && (
          <div className="flex items-center gap-2">
            {children}
          </div>
        )}
      </div>
    </div>
  );
}