"use client"

import * as React from "react"
import { cva } from "class-variance-authority"

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

const filterButtonVariants = cva(
  "relative inline-flex aspect-square size-8 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
  {
    variants: {
      active: {
        true: "bg-accent text-accent-foreground hover:bg-accent/90",
        false: "icon-button-chrome hover:bg-interactive-hover",
      },
    },
    defaultVariants: {
      active: false,
    },
  },
)

const filterCountOverlayClassName =
  "pointer-events-none absolute -end-1.5 -top-1.5 z-10 h-4 min-w-4 justify-center rounded-full border-transparent px-1 py-0"

export interface FilterButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Active filter count — when > 0, shows a Badge count overlay on the funnel icon. */
  activeCount?: number
  /**
   * Accent fill on the trigger. Defaults to `activeCount > 0`.
   * Set `false` when filters are applied but the inline bar is collapsed.
   */
  highlighted?: boolean
}

/**
 * Hub / DataTable filter trigger — size-8 funnel icon with optional Badge count overlay.
 * See Badge docs · Count overlay for the same top-end pattern on notification triggers.
 */
export function FilterButton({
  activeCount = 0,
  highlighted: highlightedProp,
  className,
  type = "button",
  "aria-label": ariaLabel,
  ...props
}: FilterButtonProps) {
  const hasActive = activeCount > 0
  const highlighted = highlightedProp ?? hasActive
  const resolvedLabel =
    ariaLabel ??
    (hasActive
      ? `Filters (${activeCount} active). Open filter settings.`
      : "Add filter")
  const displayCount = activeCount > 99 ? "99+" : activeCount

  return (
    <button
      type={type}
      aria-label={resolvedLabel}
      data-compact-touch=""
      className={cn(filterButtonVariants({ active: highlighted }), className)}
      {...props}
    >
      <i
        className={cn(highlighted ? "fa-solid" : "fa-light", "fa-filter text-icon")}
        aria-hidden="true"
      />
      {hasActive ? (
        <Badge variant="count" aria-hidden className={filterCountOverlayClassName}>
          {displayCount}
        </Badge>
      ) : null}
    </button>
  )
}