/**
 * 筛选栏组件 — 统一搜索、筛选条件展示和工具按钮
 * 支持搜索框、可移除的筛选条件标签、右侧工具区
 */
import { ReactNode } from 'react'
import clsx from 'clsx'
import { Search, X } from 'lucide-react'

interface FilterBarProps {
  searchValue?: string
  searchPlaceholder?: string
  onSearchChange?: (value: string) => void
  filters?: ReactNode
  activeChips?: Array<{ label: string; onRemove: () => void }>
  tools?: ReactNode
  className?: string
}

/**
 * 筛选栏 — 搜索 + 筛选条件 + 工具按钮
 */
export function FilterBar({
  searchValue,
  searchPlaceholder = '搜索…',
  onSearchChange,
  filters,
  activeChips,
  tools,
  className,
}: FilterBarProps) {
  return (
    <div className={clsx('flex flex-col gap-2 mb-3', className)}>
      {/* 第一行：搜索 + 筛选器 + 工具 */}
      <div className="flex flex-wrap items-center gap-2">
        {onSearchChange !== undefined && (
          <div className="relative flex-1 min-w-[180px] max-w-xs">
            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-ink-400" />
            <input
              type="text"
              value={searchValue || ''}
              onChange={(e) => onSearchChange(e.target.value)}
              placeholder={searchPlaceholder}
              className="w-full pl-8 pr-3 py-1.5 rounded-md border border-[#DDE1DD] bg-surface-card text-sm text-ink-900 focus:outline-none focus:ring-2 focus:ring-brand-600/30 focus:border-brand-600 transition-colors"
            />
          </div>
        )}
        {filters && <div className="flex items-center gap-2 flex-wrap">{filters}</div>}
        {tools && <div className="flex items-center gap-2 ml-auto shrink-0">{tools}</div>}
      </div>

      {/* 第二行：激活的筛选条件标签 */}
      {activeChips && activeChips.length > 0 && (
        <div className="flex items-center gap-1.5 flex-wrap">
          {activeChips.map((chip, i) => (
            <span
              key={i}
              className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-surface-muted text-ink-600"
            >
              {chip.label}
              <button
                onClick={chip.onRemove}
                className="hover:text-danger transition-colors"
                aria-label="移除筛选条件"
              >
                <X className="w-3 h-3" />
              </button>
            </span>
          ))}
        </div>
      )}
    </div>
  )
}
