"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

export interface FilterBarProps extends React.ComponentProps<"div"> {
  /** Accessible name for the active-filter group. */
  "aria-label"?: string
}

/**
 * Inline filter chip row — wraps active FilterPill chips, Add filter, and Clear all in hub toolbars.
 *
 * Forwards its ref because whether this rail has wrapped is what tells the
 * toolbar its row is out of horizontal room (see `useWrapCrowding`), and the
 * package still supports React 18, where `ref` is not an ordinary prop.
 */
export const FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(
  function FilterBar({ className, "aria-label": ariaLabel = "Active filters", ...props }, ref) {
    return (
      <div
        ref={ref}
        role="group"
        aria-label={ariaLabel}
        data-slot="filter-bar"
        className={cn("flex min-w-0 flex-1 flex-wrap items-center gap-1.5", className)}
        {...props}
      />
    )
  },
)

export type FilterBarAddButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>

/** Dashed “Add filter” affordance at the end of a {@link FilterBar}. */
export function FilterBarAddButton({
  className,
  type = "button",
  children = "Add filter",
  ...props
}: FilterBarAddButtonProps) {
  return (
    <button
      type={type}
      className={cn(
        // h-8 matches the filter chips and the toolbar's icon buttons; a shorter
        // dashed box reads as a different kind of control instead of the next
        // slot in the same row.
        "secondary-action-chrome inline-flex h-8 cursor-pointer items-center gap-1 rounded border border-dashed border-input/70 px-2.5 text-xs transition-colors",
        "hover:border-input hover:bg-interactive-hover-subtle",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        className,
      )}
      {...props}
    >
      <i className="fa-light fa-plus text-xs" aria-hidden="true" />
      {children}
    </button>
  )
}

export type FilterBarClearButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>

export function FilterBarClearButton({
  className,
  type = "button",
  children = "Clear all",
  ...props
}: FilterBarClearButtonProps) {
  return (
    <button
      type={type}
      className={cn(
        "inline-flex h-8 cursor-pointer items-center rounded px-2 text-xs text-muted-foreground transition-colors hover:text-interactive-hover-foreground",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        className,
      )}
      {...props}
    >
      {children}
    </button>
  )
}