import * as React from 'react';
import { Drawer, Tag, Checkbox, Space, Button } from 'antd';
import './index.scss';

export interface FilterDrawerProps {
    open: boolean;
    onClose: () => void;
    onApplyFilter: (filters: FilterState) => void;
}

export interface FilterState {
    category1: string[];
    category2: string[];
    sort: string;
}

// 一级分类
const CATEGORY_1_OPTIONS = [
    { label: '客户服务', value: 'customer_service' },
    { label: '人力资源', value: 'hr_recruitment' },
    { label: '文档分析', value: 'document_analysis' },
    { label: '法律咨询', value: 'legal' },
    { label: '医疗健康', value: 'medical' },
    { label: '教育培训', value: 'education' },
];

// 二级分类
const CATEGORY_2_OPTIONS = [
    { label: '专业知识', value: 'professional' },
    { label: '职能管理', value: 'functional' },
    { label: '项目级应用', value: 'project' },
];

const FilterDrawer: React.FC<FilterDrawerProps> = ({ open, onClose, onApplyFilter }) => {
    const [selectedCategory1, setSelectedCategory1] = React.useState<string[]>([]);
    const [selectedCategory2, setSelectedCategory2] = React.useState<string[]>([]);
    const [selectedSort, setSelectedSort] = React.useState<string>('综合排序');

    const handleApply = () => {
        onApplyFilter({
            category1: selectedCategory1,
            category2: selectedCategory2,
            sort: selectedSort,
        });
        onClose();
    };

    const handleReset = () => {
        setSelectedCategory1([]);
        setSelectedCategory2([]);
        setSelectedSort('综合排序');
        onApplyFilter({
            category1: [],
            category2: [],
            sort: '综合排序',
        });
        onClose();
    };

    return (
        <Drawer
            title="筛选条件"
            placement="right"
            width={320}
            open={open}
            onClose={onClose}
            className='filter-drawer'
            extra={
                <Space>
                    <Button onClick={handleReset}>重置</Button>
                    <Button type="primary" onClick={handleApply}>
                        应用
                    </Button>
                </Space>
            }
        >
            <div className='filter-content'>
                {/* 一级分类 */}
                <div className='filter-section'>
                    <h4 className='filter-title'>一级分类</h4>
                    <div className='filter-tags'>
                        {CATEGORY_1_OPTIONS.map((item) => (
                            <Tag
                                key={item.value}
                                checked={selectedCategory1.includes(item.value)}
                                onClick={() => {
                                    const newSelected = selectedCategory1.includes(item.value)
                                        ? selectedCategory1.filter(v => v !== item.value)
                                        : [...selectedCategory1, item.value];
                                    setSelectedCategory1(newSelected);
                                }}
                                style={{
                                    cursor: 'pointer',
                                    backgroundColor: selectedCategory1.includes(item.value) ? '#005D80' : '#F3F4F6',
                                    color: selectedCategory1.includes(item.value) ? '#FFFFFF' : '#6B7280',
                                    border: 'none',
                                    padding: '4px 12px',
                                    fontSize: '13px',
                                }}
                            >
                                {item.label}
                            </Tag>
                        ))}
                    </div>
                </div>

                {/* 二级分类 */}
                <div className='filter-section'>
                    <h4 className='filter-title'>二级分类</h4>
                    <div className='filter-tags'>
                        {CATEGORY_2_OPTIONS.map((item) => (
                            <Tag
                                key={item.value}
                                checked={selectedCategory2.includes(item.value)}
                                onClick={() => {
                                    const newSelected = selectedCategory2.includes(item.value)
                                        ? selectedCategory2.filter(v => v !== item.value)
                                        : [...selectedCategory2, item.value];
                                    setSelectedCategory2(newSelected);
                                }}
                                style={{
                                    cursor: 'pointer',
                                    backgroundColor: selectedCategory2.includes(item.value) ? '#005D80' : '#F3F4F6',
                                    color: selectedCategory2.includes(item.value) ? '#FFFFFF' : '#6B7280',
                                    border: 'none',
                                    padding: '4px 12px',
                                    fontSize: '13px',
                                }}
                            >
                                {item.label}
                            </Tag>
                        ))}
                    </div>
                </div>
            </div>
        </Drawer>
    );
};

export default FilterDrawer;
