// src/views/Community/components/IndustryCascader.js
import React, { useState, useCallback } from 'react';
import { Card, Form, Cascader } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { fetchIndustryData, selectIndustryData, selectIndustryLoading } from '../../../store/slices/industrySlice';
import { logger } from '../../../utils/logger';

const IndustryCascader = ({ onFilterChange, loading }) => {
    const [industryCascaderValue, setIndustryCascaderValue] = useState([]);

    // 使用 Redux 获取行业数据
    const dispatch = useDispatch();
    const industryData = useSelector(selectIndustryData);
    const industryLoading = useSelector(selectIndustryLoading);

    // Cascader 获得焦点时加载数据
    const handleCascaderFocus = useCallback(async () => {
        if (!industryData || industryData.length === 0) {
            logger.debug('IndustryCascader', 'Cascader 获得焦点，开始加载行业数据');
            await dispatch(fetchIndustryData());
        }
    }, [dispatch, industryData]);

    // Cascader 选择变化
    const handleIndustryCascaderChange = (value, selectedOptions) => {
        setIndustryCascaderValue(value);

        if (value && value.length > 0) {
            // value[0] = 分类体系名称
            // value[1...n] = 行业代码（一级~四级）
            const industryCode = value[value.length - 1]; // 最后一级的 code
            const classification = value[0]; // 分类体系名称

            onFilterChange('industry_classification', classification);
            onFilterChange('industry_code', industryCode);

            logger.debug('IndustryCascader', 'Cascader 选择变化', {
                value,
                classification,
                industryCode,
                path: selectedOptions.map(o => o.label).join(' > ')
            });
        } else {
            // 清空
            onFilterChange('industry_classification', '');
            onFilterChange('industry_code', '');
        }
    };

    return (
        <Card className="industry-cascader" title="行业分类" style={{ marginBottom: 16 }}>
            <Form layout="vertical">
                <Form.Item label="选择行业分类体系和具体行业">
                    <Cascader
                        options={industryData || []}
                        value={industryCascaderValue}
                        onChange={handleIndustryCascaderChange}
                        onFocus={handleCascaderFocus}
                        changeOnSelect
                        placeholder={industryLoading ? "加载中..." : "请选择行业分类体系和具体行业"}
                        disabled={loading || industryLoading}
                        loading={industryLoading}
                        allowClear
                        expandTrigger="hover"
                        displayRender={(labels) => labels.join(' > ')}
                        showSearch={{
                            filter: (inputValue, path) =>
                                path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
                        }}
                        style={{ width: '100%' }}
                    />
                </Form.Item>
            </Form>
        </Card>
    );
};

export default IndustryCascader;