"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { BadgeCount } from "../ui/badge"
import { Button } from "../ui/button"
import { Kbd, KbdGroup } from "../ui/kbd"
import { Shortcut } from "../ui/dropdown-menu"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "../ui/tooltip"

export interface BulkSelectionBarProps<TData> {
  selected: Set<string | number>
  rows: TData[]
  onClear: () => void
  /** Custom actions; when omitted, Export + Delete placeholders render. */
  actionsSlot?: (selected: Set<string | number>, rows: TData[]) => React.ReactNode
  /** Default Export chord (e.g. `⌘⌥E`). Used only when `actionsSlot` is omitted. */
  exportShortcut?: string
  /** Default Delete chord (e.g. `⌘⌥⌫`). Used only when `actionsSlot` is omitted. */
  deleteShortcut?: string
  className?: string
}

/**
 * Selection chrome for DataTable — count chip, action slot, clear.
 * Parent owns sticky / in-flow placement (HubTable sticky foot vs card footer).
 */
export function BulkSelectionBar<TData>({
  selected,
  rows,
  onClear,
  actionsSlot,
  exportShortcut = "⌘⌥E",
  deleteShortcut = "⌘⌥⌫",
  className,
}: BulkSelectionBarProps<TData>) {

  return (
    <output
      aria-live="polite"
      aria-label={`${selected.size} row${selected.size !== 1 ? "s" : ""} selected`}
      data-exxat-bulk-bar=""
      data-variant="slab"
      className={cn(
        "pointer-events-auto relative z-10 flex w-full min-w-0 items-center gap-3",
        // An inverse slab, not a brand fill. Two earlier attempts tried to host
        // this bar on an accent — `bg-primary` first, then `bg-brand` — and both
        // ran into the same wall: a red Delete on a blue band is 2.5:1, so the
        // one action that most needs to be unmistakable was the hardest to see,
        // and every button on the bar needed a hand-written override to survive
        // the fill. `--slab` takes the canvas ink and `--slab-foreground` takes
        // the canvas, so the band is near-black on a light theme and near-white
        // on a dark one, always at full contrast with the page and neutral
        // enough that accents keep their own meaning.
        "bg-slab text-slab-foreground",
        "border border-slab-border",
        "px-4 py-2",
        "motion-safe:animate-[exxat-bulk-bar-rise_200ms_ease-out]",
        // Ink is `currentColor` on a neutral surface, so outline actions need
        // nothing beyond dropping their own background.
        "[&_[data-slot=button][data-variant=outline]]:border-current/45",
        "[&_[data-slot=button][data-variant=outline]]:bg-transparent",
        "[&_[data-slot=button][data-variant=outline]]:text-current",
        "[&_[data-slot=button][data-variant=outline]]:hover:bg-current/15",
        "[&_[data-slot=button][data-variant=outline]]:hover:text-current",
        "[&_[data-slot=button][data-variant=outline]]:focus-visible:border-current/70",
        "[&_[data-slot=button][data-variant=outline]]:focus-visible:ring-current/35",
        "[&_[data-slot=button][data-variant=outline]]:aria-expanded:bg-current/15",
        className,
      )}
    >
      {/* Everything below inherits the slab's ink rather than naming a colour, so
          it follows the surface when the theme flips it. Pinning these to
          `brand-foreground` made the label, dividers, and Clear button vanish
          the moment the band stopped being brand-coloured. */}
      <div className="flex shrink-0 items-center gap-2">
        <i
          className="fa-light fa-check-double text-sm text-current/80"
          aria-hidden="true"
        />
        <BadgeCount count={selected.size} aria-hidden />
      </div>

      <span
        className="h-5 w-px shrink-0 self-center bg-current/30"
        aria-hidden="true"
      />

      <div
        className={cn(
          "min-w-0 flex-1 self-center",
          "overflow-x-auto overscroll-x-contain [scrollbar-width:thin] [touch-action:pan-x]",
        )}
      >
        <div className="flex w-max flex-nowrap items-center gap-1.5">
          {actionsSlot ? (
            actionsSlot(selected, rows)
          ) : (
            <>
              <Button
                size="sm"
                variant="outline"
                className="shrink-0"
                aria-keyshortcuts={exportShortcut}
              >
                <i className="fa-light fa-arrow-up-from-bracket" aria-hidden="true" /> Export
                <KbdGroup className="ms-1.5">
                  <Kbd variant="bare">{exportShortcut}</Kbd>
                </KbdGroup>
              </Button>
              <Shortcut keys={exportShortcut} onInvoke={() => {}} />
              <Button
                size="sm"
                variant="destructive-solid"
                className="shrink-0"
                aria-keyshortcuts={deleteShortcut}
              >
                <i className="fa-light fa-trash" aria-hidden="true" /> Delete
                <KbdGroup className="ms-1.5">
                  <Kbd variant="bare">{deleteShortcut}</Kbd>
                </KbdGroup>
              </Button>
              <Shortcut keys={deleteShortcut} onInvoke={() => {}} />
            </>
          )}
        </div>
      </div>

      <span
        className="h-5 w-px shrink-0 self-center bg-current/30"
        aria-hidden="true"
      />

      <Tooltip>
        <TooltipTrigger asChild>
          <Button
            type="button"
            size="icon-sm"
            variant="ghost"
            aria-label="Clear selection"
            aria-keyshortcuts="Escape"
            onClick={onClear}
            className={cn(
              "shrink-0 text-current",
              "hover:bg-current/15 hover:text-current",
              "focus-visible:bg-current/15",
              "bg-transparent dark:bg-transparent",
            )}
          >
            <i className="fa-light fa-xmark" aria-hidden="true" />
          </Button>
        </TooltipTrigger>
        <TooltipContent side="top" className="flex flex-wrap items-center gap-1.5">
          <span>Clear selection</span>
          <KbdGroup className="ms-1.5">
            <Kbd>Esc</Kbd>
          </KbdGroup>
        </TooltipContent>
      </Tooltip>
    </output>
  )
}