'use client';
import { Search, X } from 'lucide-react';

interface Props {
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
  className?: string;
}

/**
 * 列表搜索框（标题 + 编号模糊匹配，外部需配合 useDebouncedValue 防抖）
 */
export function SearchInput({ value, onChange, placeholder = '搜索标题或编号', className = '' }: Props) {
  return (
    <div className={`relative inline-flex items-center ${className}`}>
      <Search className="absolute left-2.5 h-3.5 w-3.5 text-[var(--ink-muted)] pointer-events-none" />
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="h-8 w-72 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] pl-8 pr-7 text-[12px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
      />
      {value && (
        <button
          onClick={() => onChange('')}
          className="absolute right-1.5 p-0.5 rounded hover:bg-[var(--bg-subtle)]"
          title="清除"
        >
          <X className="h-3 w-3 text-[var(--ink-muted)]" />
        </button>
      )}
    </div>
  );
}

/**
 * 标题 + 编号模糊匹配（case-insensitive）
 */
export function matchTitleOrNo(item: { title: string; no?: string }, keyword: string): boolean {
  if (!keyword) return true;
  const k = keyword.trim().toLowerCase();
  if (!k) return true;
  if (item.title.toLowerCase().includes(k)) return true;
  if (item.no && item.no.toLowerCase().includes(k)) return true;
  return false;
}