// ExportBar — sticky bar that sits at the top of the Upload page's
// streaming section and lets the user select-all / deselect-all the
// streamed claims and trigger the batch X12 export.
//
// Tri-state "Select all" checkbox:
//   - all selected  → checked
//   - none selected → unchecked
//   - mixed         → indeterminate (the dash / line state)
//
// The Export button is disabled when the selection is empty (no point
// sending an empty bundle) or when an export is already in flight
// (don't double-fire the network call).

import { CheckSquare, Download, Loader2, Square } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export interface ExportBarProps {
  /** Total claims in the stream (denominator for "X of Y selected"). */
  total: number;
  /** Current selection size (numerator). */
  selectedCount: number;
  /** When true, the export button shows a spinner and is disabled. */
  exporting: boolean;
  /** Called when the user toggles the select-all checkbox. */
  onToggleAll: () => void;
  /** Called when the user clicks the Export button. */
  onExport: () => void;
}

export function ExportBar({
  total,
  selectedCount,
  exporting,
  onToggleAll,
  onExport,
}: ExportBarProps) {
  const allSelected = total > 0 && selectedCount === total;
  const noneSelected = selectedCount === 0;
  // Indeterminate = some selected, but not all. Bound to the input via
  // a ref because the `indeterminate` attribute is not a real HTML
  // attribute — it's a JS property only.
  const indeterminate = !allSelected && !noneSelected;

  return (
    <div
      className={cn(
        "flex items-center gap-4 px-3 py-2 rounded-md border bg-background/40",
        "flex-wrap",
      )}
      style={{ borderColor: "hsl(var(--border) / 0.6)" }}
      data-testid="export-bar"
    >
      <label
        className="inline-flex items-center gap-2 cursor-pointer select-none text-[12px] mono uppercase tracking-[0.14em] font-semibold text-muted-foreground hover:text-foreground"
        onClick={(e) => e.stopPropagation()}
        data-testid="export-bar-toggle-all"
      >
        {allSelected ? (
          <CheckSquare
            className="h-3.5 w-3.5"
            strokeWidth={1.75}
            style={{ color: "hsl(var(--accent))" }}
          />
        ) : (
          <Square
            className="h-3.5 w-3.5"
            strokeWidth={1.75}
            style={{
              color: indeterminate
                ? "hsl(var(--accent) / 0.7)"
                : "hsl(var(--muted-foreground) / 0.6)",
            }}
          />
        )}
        <input
          type="checkbox"
          checked={allSelected}
          ref={(el) => {
            if (el) el.indeterminate = indeterminate;
          }}
          onChange={onToggleAll}
          className="sr-only"
          aria-label={
            allSelected
              ? "Deselect all claims"
              : noneSelected
                ? "Select all claims"
                : `Select all claims (${selectedCount} of ${total} currently selected)`
          }
        />
        {allSelected ? "Deselect all" : "Select all"}
      </label>

      <span
        className="text-[11.5px] mono text-muted-foreground/70"
        aria-live="polite"
      >
        <span className="text-foreground">{selectedCount}</span> of{" "}
        <span className="text-foreground">{total}</span> selected
      </span>

      <div className="ml-auto flex items-center gap-2">
        <Button
          size="sm"
          variant="default"
          onClick={onExport}
          disabled={noneSelected || exporting}
          data-testid="export-bar-export"
          aria-label={`Export ${selectedCount} claims as X12 ZIP`}
        >
          {exporting ? (
            <>
              <Loader2 className="h-3.5 w-3.5 animate-spin" />
              Exporting…
            </>
          ) : (
            <>
              <Download className="h-3.5 w-3.5" />
              Export ({selectedCount})
            </>
          )}
        </Button>
      </div>
    </div>
  );
}
