// ============================================================
// CanvasFilterBar — 关键词搜索栏（精简版）
//
// 仅保留文件名/描述关键词搜索。
// 资产类型筛选 → 已移至 CategoryTabs（Assets 阶段）。
// 审核状态筛选 → 已移至 CategoryTabs（非 Assets 阶段）。
// ============================================================

import { useCallback } from 'react';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useTheme } from '@/app/providers/ThemeProvider';
import { useCanvasStore } from '../../stores/useCanvasStore';

export function CanvasFilterBar() {
    const { isDark } = useTheme();
    const keywordQuery = useCanvasStore((s) => s.keywordQuery);
    const setFilters = useCanvasStore((s) => s.setFilters);

    const handleKeywordChange = useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            setFilters({ keywordQuery: e.target.value });
        },
        [setFilters],
    );

    const inputStyle: React.CSSProperties = {
        background: isDark ? '#1E1B4B' : '#FFFFFF',
        borderColor: isDark ? '#3E3A6A' : '#D1D5DB',
        color: isDark ? '#E8E6F0' : '#1E1B4B',
        borderRadius: 4,
    };

    return (
        <Input
            placeholder="搜索文件名/描述…"
            prefix={<SearchOutlined />}
            value={keywordQuery}
            onChange={handleKeywordChange}
            allowClear
            size="small"
            style={{ width: 180, ...inputStyle }}
        />
    );
}
