import React, { useState } from 'react';
import { Tabs, Input, Spin } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './index.scss';
import { FilterBarProps } from './types';

/**
 * FilterBar 筛选工具栏组件
 *
 * 用于列表页面的 Tab 切换和搜索功能
 *
 * @example
 * ```tsx
 * <FilterBar
 *     tabs={[
 *         { key: 'all', label: '全部' },
 *         { key: 'mine', label: '我创建的' },
 *     ]}
 *     activeTab={activeTab}
 *     onTabChange={setActiveTab}
 *     searchPlaceholder="请输入搜索内容"
 *     searchValue={searchValue}
 *     onSearchChange={setSearchValue}
 *     searchWidth={300}
 * />
 * ```
 */
const FilterBar: React.FC<FilterBarProps> = ({
    tabs = [],
    activeTab,
    onTabChange,
    searchPlaceholder = '请输入搜索内容',
    searchValue,
    onSearchChange,
    onSearch,
    searchWidth = 300,
    className = '',
    loading: externalLoading,  // 外部传入的 loading（重命名）
}) => {
    const [isFocused, setIsFocused] = useState(false);
    const [internalLoading, setInternalLoading] = useState(false);  // 内部搜索 loading
    
    // 使用外部 loading 或内部 loading
    const loading = externalLoading || internalLoading;

    // 处理搜索
    const handleSearch = async () => {
        if (onSearch) {
            setInternalLoading(true);  // 开始搜索
            try {
                await onSearch(searchValue || '');
            } finally {
                setInternalLoading(false);  // 搜索完成
            }
        }
    };

    // 处理回车搜索
    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
            handleSearch();
        }
    };

    return (
        <div className={`filter-bar ${className || ''}`}>
            {/* Tab 区域 */}
            {tabs.length > 0 && (
                <Tabs
                    activeKey={activeTab}
                    onChange={onTabChange}
                    items={tabs.map(tab => ({
                        key: tab.key,
                        label: tab.label,
                    }))}
                    size="default"
                />
            )}
            
            {/* 搜索区域 - 自定义样式 */}
            {onSearchChange && (
                <div className={`search-wrapper ${isFocused ? 'focused' : ''} ${loading ? 'loading' : ''}`}>
                    <Input
                        placeholder={searchPlaceholder}
                        value={searchValue}
                        onChange={(e) => onSearchChange?.(e.target.value)}
                        onKeyPress={handleKeyPress}
                        onFocus={() => setIsFocused(true)}
                        onBlur={() => setIsFocused(false)}
                        className="search-input"
                        variant="borderless"
                        size="middle"
                    />
                    <button
                        className="search-button"
                        onClick={handleSearch}
                        disabled={loading}
                    >
                        {loading ? (
                            <Spin size="small" />
                        ) : (
                            <SearchOutlined />
                        )}
                    </button>
                </div>
            )}
        </div>
    );
};

export default FilterBar;
