import * as React from 'react';
import { Search, X } from 'lucide-react';
import { clsx } from 'clsx';
import { Button } from './Button.js';
import { Input } from './Input.js';

export interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
  searchLabel?: string;
  searchPlaceholder?: string;
  searchValue?: string;
  onSearchChange?: (value: string) => void;
  filters?: React.ReactNode;
  chips?: React.ReactNode;
  actions?: React.ReactNode;
  onReset?: () => void;
}

export function FilterBar({
  searchLabel = 'Search',
  searchPlaceholder = 'Search...',
  searchValue,
  onSearchChange,
  filters,
  chips,
  actions,
  onReset,
  className,
  ...props
}: FilterBarProps) {
  return (
    <div
      className={clsx(
        'grid gap-3 rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-3 shadow-sm shadow-black/[0.03]',
        className
      )}
      {...props}
    >
      <div className="flex min-w-0 flex-col gap-2 lg:flex-row lg:items-center">
        {onSearchChange && (
          <div className="relative min-w-0 flex-1">
            <Search
              className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--bl-text-tertiary,var(--bl-text-secondary))]"
              aria-hidden="true"
            />
            <Input
              aria-label={searchLabel}
              className="pl-9"
              placeholder={searchPlaceholder}
              value={searchValue ?? ''}
              onChange={event =>
                onSearchChange((event.currentTarget as unknown as { value: string }).value)
              }
            />
          </div>
        )}
        {filters && <div className="flex min-w-0 flex-wrap items-center gap-2">{filters}</div>}
        {(actions || onReset) && (
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            {onReset && (
              <Button type="button" variant="subtle" size="sm" onClick={onReset}>
                <X className="h-4 w-4" aria-hidden="true" />
                Reset
              </Button>
            )}
            {actions}
          </div>
        )}
      </div>
      {chips && <div className="flex min-w-0 flex-wrap gap-2">{chips}</div>}
    </div>
  );
}
