// ============================================================
// CanvasFilterBar — 画布筛选栏
//
// 提供：关键词搜索、标签筛选、审核状态筛选、镜头查询、资产类型筛选
// 每个筛选条件变化后触发 useDirectoryScan（防抖 300ms）
// ============================================================

import { useCallback } from 'react';
import { Input, Select } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { useTheme } from '@/components/providers/ThemeProvider';
import { useCanvasStore, type AuditStatus, type AssetTypeFilter } from '../store/useCanvasStore';

const AUDIT_OPTIONS: Array<{ value: AuditStatus | 'all'; label: string }> = [
    { value: 'all', label: '全部审核' },
    { value: 'pending', label: '待审核' },
    { value: 'approved', label: '已通过' },
    { value: 'rework', label: '需返工' },
    { value: 'deprecated', label: '已废弃' },
];

const ASSET_TYPE_OPTIONS: Array<{ value: AssetTypeFilter; label: string }> = [
    { value: '全部', label: '全部资产' },
    { value: '角色', label: '角色' },
    { value: '道具', label: '道具' },
    { value: '场景', label: '场景' },
];

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

    const isAssets = currentStage === 'Assets';

    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 (
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1 }}>
            {/* 关键词搜索 */}
            <Input
                placeholder="搜索文件名/描述…"
                prefix={<SearchOutlined />}
                value={keywordQuery}
                onChange={handleKeywordChange}
                allowClear
                size="small"
                style={{ width: 180, ...inputStyle }}
            />

            {/* 审核状态筛选（仅可审核阶段） */}
            {!isAssets && (
                <Select
                    value={auditFilter}
                    onChange={(v) => setFilters({ auditFilter: v })}
                    size="small"
                    style={{ width: 110 }}
                    options={AUDIT_OPTIONS}
                />
            )}

            {/* 资产类型筛选（仅 Assets 阶段） */}
            {isAssets && (
                <Select
                    value={assetTypeFilter}
                    onChange={(v) => setFilters({ assetTypeFilter: v })}
                    size="small"
                    style={{ width: 110 }}
                    options={ASSET_TYPE_OPTIONS}
                />
            )}
        </div>
    );
}
