/**
 * 股票估值分析工具前端JS
 */

document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const valuationForm = document.getElementById('valuationForm');
    const stockCodeInput = document.getElementById('stockCode');
    const startDateInput = document.getElementById('startDate');
    const metricSelect = document.getElementById('metric');
    const industryNameSelect = document.getElementById('industryName');
    const conceptNameSelect = document.getElementById('conceptName');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const resetBtn = document.getElementById('resetBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const resultCard = document.getElementById('resultCard');
    const resultTitle = document.getElementById('resultTitle');
    const errorAlert = document.getElementById('errorAlert');
    const errorMessage = document.getElementById('errorMessage');
    const percentileTable = document.getElementById('percentileTable');
    const industryStats = document.getElementById('industryStats');
    const industryStatsTable = document.getElementById('industryStatsTable');
    const conceptStats = document.getElementById('conceptStats');
    const conceptStatsTable = document.getElementById('conceptStatsTable');
    
    // 定义图表实例
    let myChart = null;
    
    // 初始化Select2插件
    $(document).ready(function() {
        // 初始化行业下拉框
        $('#industryName').select2({
            placeholder: '请选择行业',
            allowClear: true,
            width: '100%'
        });
        
        // 初始化概念板块下拉框
        $('#conceptName').select2({
            placeholder: '请选择概念板块',
            allowClear: true,
            width: '100%'
        });
        
        // 加载行业数据
        loadIndustryData();
        
        // 加载概念板块数据
        loadConceptData();
    });
    
    /**
     * 加载行业数据
     */
    function loadIndustryData() {
        fetch('/api/industry/list')
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取行业列表失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // 先清空下拉框（保留第一个选项）
                    while (industryNameSelect.options.length > 1) {
                        industryNameSelect.remove(1);
                    }
                    
                    // 添加选项
                    data.data.forEach(industry => {
                        const option = new Option(industry.name, industry.name);
                        industryNameSelect.add(option);
                    });
                    
                    // 刷新Select2
                    $(industryNameSelect).trigger('change');
                } else {
                    console.error('加载行业数据失败:', data.message);
                }
            })
            .catch(error => {
                console.error('获取行业列表时出错:', error);
            });
    }
    
    /**
     * 加载概念板块数据
     */
    function loadConceptData() {
        fetch('/api/concept/list')
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取概念板块列表失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // 先清空下拉框（保留第一个选项）
                    while (conceptNameSelect.options.length > 1) {
                        conceptNameSelect.remove(1);
                    }
                    
                    // 添加选项
                    data.data.forEach(concept => {
                        const option = new Option(concept.name, concept.name);
                        conceptNameSelect.add(option);
                    });
                    
                    // 刷新Select2
                    $(conceptNameSelect).trigger('change');
                } else {
                    console.error('加载概念板块数据失败:', data.message);
                    // 加载失败时使用硬编码的常见概念作为备用
                    loadFallbackConcepts();
                }
            })
            .catch(error => {
                console.error('获取概念板块列表时出错:', error);
                // 出错时使用硬编码的常见概念作为备用
                loadFallbackConcepts();
            });
    }
    
    /**
     * 加载备用的概念板块数据（硬编码）
     */
    function loadFallbackConcepts() {
        const commonConcepts = [
            "人工智能", "大数据", "云计算", "物联网", "5G", "新能源", "新材料", 
            "生物医药", "半导体", "芯片", "消费电子", "智能汽车", "区块链", 
            "虚拟现实", "元宇宙", "工业互联网", "智能制造", "网络安全", "数字经济"
        ];
        
        // 先清空下拉框（保留第一个选项）
        while (conceptNameSelect.options.length > 1) {
            conceptNameSelect.remove(1);
        }
        
        // 添加选项
        commonConcepts.forEach(concept => {
            const option = new Option(concept, concept);
            conceptNameSelect.add(option);
        });
        
        // 刷新Select2
        $(conceptNameSelect).trigger('change');
    }
    
    // 监听表单提交事件
    valuationForm.addEventListener('submit', function(event) {
        event.preventDefault();
        analyzeValuation();
    });
    
    // 监听重置按钮点击事件
    resetBtn.addEventListener('click', function() {
        resetForm();
    });
    
    /**
     * 分析股票估值
     */
    function analyzeValuation() {
        // 显示加载中状态
        showLoading(true);
        
        // 隐藏之前的结果和错误信息
        resultCard.classList.add('d-none');
        errorAlert.classList.add('d-none');
        
        // 获取表单数据
        const stockCode = stockCodeInput.value.trim();
        const startDate = startDateInput.value;
        const metric = metricSelect.value;
        const industryName = industryNameSelect.value.trim();
        const conceptName = conceptNameSelect.value.trim();
        
        // 构建请求URL
        let url = `/api/valuation_analysis?stock_code=${stockCode}&start_date=${startDate}&metric=${metric}`;
        
        if (industryName) {
            url += `&industry_name=${encodeURIComponent(industryName)}`;
        }
        
        if (conceptName) {
            url += `&concept_name=${encodeURIComponent(conceptName)}`;
        }
        
        // 发送API请求
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.message || '请求失败');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    // 渲染分析结果
                    renderValuationResults(data);
                } else {
                    showError(data.message || '分析失败，请稍后再试');
                }
            })
            .catch(error => {
                showError(error.message || '请求失败，请检查网络连接');
            })
            .finally(() => {
                showLoading(false);
            });
    }
    
    /**
     * 渲染估值分析结果
     */
    function renderValuationResults(data) {
        // 显示结果卡片（在渲染图表前确保容器可见）
        resultCard.classList.remove('d-none');
        
        // 更新标题
        resultTitle.textContent = data.data.title.text;
        
        // 渲染分位数据表格
        renderPercentileTable(data.data.percentiles, data.data.yAxis.name);
        
        // 渲染行业统计（如果有）
        if (data.data.industry_stats) {
            renderIndustryStats(data.data.industry_stats, data.data.yAxis.name);
            industryStats.classList.remove('d-none');
        } else {
            industryStats.classList.add('d-none');
        }
        
        // 渲染概念板块统计（如果有）
        if (data.data.concept_stats) {
            renderConceptStats(data.data.concept_stats, data.data.yAxis.name);
            conceptStats.classList.remove('d-none');
        } else {
            conceptStats.classList.add('d-none');
        }
        
        // 渲染图表（等待DOM更新后）
        setTimeout(() => {
            renderChart(data.data);
            // 滚动到结果区域
            resultCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 100);
    }
    
    /**
     * 渲染ECharts图表
     */
    function renderChart(chartData) {
        // 初始化图表
        const chartContainer = document.getElementById('valuationChart');
        
        // 确保容器可见
        resultCard.classList.remove('d-none');
        
        // 如果已经存在图表实例，则销毁
        if (myChart) {
            myChart.dispose();
        }
        
        // 创建新的图表实例
        myChart = echarts.init(chartContainer);
        
        // 调整股票线的系列配置
        if (chartData.series && chartData.series.length > 0) {
            // 获取第一个系列（股票主线）
            const mainSeries = chartData.series[0];
            
            // 移除当前值的markLine，只保留其他几条线
            if (mainSeries.markLine && mainSeries.markLine.data) {
                mainSeries.markLine.data = mainSeries.markLine.data.filter(item => 
                    item.name !== "当前值"
                );
                
                // 调整分位线颜色
                mainSeries.markLine.data.forEach(item => {
                    if (item.name === "最小值" || item.name === "第一四分位数") {
                        item.lineStyle = { color: '#28a745', type: 'dashed' }; // 绿色
                    } else if (item.name === "最大值" || item.name === "第三四分位数") {
                        item.lineStyle = { color: '#dc3545', type: 'dashed' }; // 红色
                    } else if (item.name === "均值") {
                        item.lineStyle = { color: '#9400d3', type: 'dashed' }; // 紫色
                    }
                });
            }
        }
        
        // 调整行业和概念线的颜色
        if (chartData.series && chartData.series.length > 1) {
            // 行业线（通常是第二个系列）
            if (chartData.series[1]) {
                chartData.series[1].lineStyle = {
                    color: '#1e90ff',  // 深蓝色
                    width: 2
                };
                // 增加透明度以区分
                chartData.series[1].itemStyle = {
                    color: '#1e90ff',
                    opacity: 0.9
                };
            }
            
            // 概念线（通常是第三个系列）
            if (chartData.series[2]) {
                chartData.series[2].lineStyle = {
                    color: '#ff7f50',  // 珊瑚色
                    width: 2
                };
                // 增加透明度以区分
                chartData.series[2].itemStyle = {
                    color: '#ff7f50',
                    opacity: 0.9
                };
            }
        }
        
        // 设置图表选项
        const option = {
            title: {
                text: chartData.title.text,
                subtext: chartData.title.subtext,
                left: 'center',
                top: 5
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: chartData.legend.data,
                top: 60
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: 100,
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: chartData.xAxis.data,
                axisLabel: {
                    rotate: 45,
                    interval: Math.floor(chartData.xAxis.data.length / 10)
                }
            },
            yAxis: {
                type: 'value',
                name: chartData.yAxis.name,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: chartData.series,
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    start: 0,
                    end: 100
                }
            ]
        };
        
        // 为所有markLine添加标签
        option.series.forEach(series => {
            if (series.markLine && series.markLine.data) {
                series.markLine.label = {
                    formatter: '{b}: {c}',
                    position: 'middle'
                };
            }
        });
        
        // 设置图表选项
        myChart.setOption(option);
        
        // 手动触发一次resize，确保图表正确渲染
        setTimeout(() => {
            myChart.resize();
        }, 50);
        
        // 响应式调整
        window.addEventListener('resize', function() {
            if (myChart) {
                myChart.resize();
            }
        });
    }
    
    /**
     * 渲染分位数表格
     */
    function renderPercentileTable(percentiles, metricName) {
        // 清空表格
        percentileTable.innerHTML = '';
        
        // 格式化函数
        const formatValue = value => value ? value.toFixed(2) : 'N/A';
        
        // 获取百分位类别
        const getPercentileClass = value => {
            if (value <= 33) return 'percent-low';
            if (value <= 66) return 'percent-medium';
            return 'percent-high';
        };
        
        // 创建表格行
        const rows = [
            { 
                label: '当前值', 
                value: formatValue(percentiles.current),
                class: 'current-value'  // 添加特殊样式类
            },
            { 
                label: '百分位', 
                value: `${formatValue(percentiles.percentile)}%`,
                class: getPercentileClass(percentiles.percentile)
            },
            { 
                label: '最小值', 
                value: formatValue(percentiles.min),
                class: 'percent-low'  // 绿色
            },
            { 
                label: '最大值', 
                value: formatValue(percentiles.max),
                class: 'percent-high'  // 红色
            },
            { 
                label: '均值', 
                value: formatValue(percentiles.mean)
            },
            { 
                label: '中位数', 
                value: formatValue(percentiles.median)
            },
            { 
                label: '第一四分位数', 
                value: formatValue(percentiles.q1),
                class: 'percent-low'  // 绿色
            },
            { 
                label: '第三四分位数', 
                value: formatValue(percentiles.q3),
                class: 'percent-high'  // 红色
            }
        ];
        
        // 添加行到表格
        rows.forEach(row => {
            const tr = document.createElement('tr');
            
            // 添加特殊类以突出当前值行
            if (row.label === '当前值' || row.label === '百分位') {
                tr.classList.add('highlight-row');
            }
            
            const tdLabel = document.createElement('td');
            tdLabel.textContent = row.label;
            tr.appendChild(tdLabel);
            
            const tdValue = document.createElement('td');
            tdValue.textContent = row.value;
            
            if (row.class) {
                tdValue.classList.add('percent-value', row.class);
            }
            
            tr.appendChild(tdValue);
            percentileTable.appendChild(tr);
        });
    }
    
    /**
     * 渲染行业统计数据
     */
    function renderIndustryStats(stats, metricName) {
        // 清空表格
        industryStatsTable.innerHTML = '';
        
        // 创建表格行
        const rows = [
            { label: '行业名称', value: stats.name },
            { label: '成份股数量', value: `${stats.min_count} - ${stats.max_count}` },
            { label: '平均成份股', value: stats.avg_count.toFixed(1) + '只' },
            { label: `平均${metricName}`, value: stats.avg_value.toFixed(2) }
        ];
        
        // 添加行到表格
        rows.forEach(row => {
            const tr = document.createElement('tr');
            
            const tdLabel = document.createElement('td');
            tdLabel.textContent = row.label;
            tr.appendChild(tdLabel);
            
            const tdValue = document.createElement('td');
            tdValue.textContent = row.value;
            tr.appendChild(tdValue);
            
            industryStatsTable.appendChild(tr);
        });
    }
    
    /**
     * 渲染概念板块统计数据
     */
    function renderConceptStats(stats, metricName) {
        // 清空表格
        conceptStatsTable.innerHTML = '';
        
        // 创建表格行
        const rows = [
            { label: '概念名称', value: stats.name },
            { label: '成份股数量', value: `${stats.min_count} - ${stats.max_count}` },
            { label: '平均成份股', value: stats.avg_count.toFixed(1) + '只' },
            { label: `平均${metricName}`, value: stats.avg_value.toFixed(2) }
        ];
        
        // 添加行到表格
        rows.forEach(row => {
            const tr = document.createElement('tr');
            
            const tdLabel = document.createElement('td');
            tdLabel.textContent = row.label;
            tr.appendChild(tdLabel);
            
            const tdValue = document.createElement('td');
            tdValue.textContent = row.value;
            tr.appendChild(tdValue);
            
            conceptStatsTable.appendChild(tr);
        });
    }
    
    /**
     * 显示错误信息
     */
    function showError(message) {
        errorMessage.textContent = message;
        errorAlert.classList.remove('d-none');
        
        // 滚动到错误信息
        errorAlert.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    /**
     * 重置表单
     */
    function resetForm() {
        valuationForm.reset();
        
        // 重置Select2下拉框
        $(industryNameSelect).val('').trigger('change');
        $(conceptNameSelect).val('').trigger('change');
        
        // 隐藏结果和错误信息
        resultCard.classList.add('d-none');
        errorAlert.classList.add('d-none');
        
        // 销毁图表
        if (myChart) {
            myChart.dispose();
            myChart = null;
        }
    }
    
    /**
     * 显示/隐藏加载状态
     */
    function showLoading(isLoading) {
        if (isLoading) {
            loadingSpinner.classList.remove('d-none');
            analyzeBtn.disabled = true;
        } else {
            loadingSpinner.classList.add('d-none');
            analyzeBtn.disabled = false;
        }
    }
}); 