// concept_interaction.js - 处理概念卡片的交互

// 页面加载完成后初始化交互
document.addEventListener('DOMContentLoaded', function() {
    console.log('概念交互模块已加载');
    setupConceptCardInteractions();
    setupImageEnhancements();
});

// 设置概念卡片交互
function setupConceptCardInteractions() {
    // 使用事件委托处理所有卡片点击
    document.body.addEventListener('click', function(event) {
        const card = event.target.closest('.concept-card');
        if (!card) return;
        
        const conceptId = card.getAttribute('data-concept-id');
        if (!conceptId) {
            console.error('卡片没有设置 data-concept-id 属性');
            return;
        }
        
        console.log(`点击了概念卡片: ${conceptId}`);
        
        // 显示加载动画
        showLoadingInDetailPanel();
        
        // 更新选中状态
        updateSelectedCard(card);
        
        // 触发 Gradio 事件
        triggerConceptSelection(conceptId);
    });
}

// 在详情面板显示加载动画
function showLoadingInDetailPanel() {
    const detailContainer = document.querySelector('.concept-detail-box');
    if (detailContainer) {
        detailContainer.innerHTML = `
            <div class="loading">
                <div class="loading-spinner"></div>
                <div class="loading-text">正在生成概念详细解释...</div>
            </div>
        `;
    }
}

// 更新选中的卡片样式
function updateSelectedCard(selectedCard) {
    document.querySelectorAll('.concept-card').forEach(card => {
        card.classList.remove('selected-card');
    });
    selectedCard.classList.add('selected-card');
}

// 触发 Gradio 输入事件
function triggerConceptSelection(conceptId) {
    const conceptSelection = document.getElementById('concept-selection');
    if (conceptSelection) {
        conceptSelection.value = conceptId;
        // 使用 input 事件，更可靠地触发 Gradio
        conceptSelection.dispatchEvent(new Event('input', { bubbles: true }));
        console.log(`已触发概念选择事件: ${conceptId}`);
    } else {
        console.error('找不到概念选择输入框 (concept-selection)');
    }
}

// 增强图像显示
function setupImageEnhancements() {
    const graphContainer = document.getElementById('concept-graph');
    if (!graphContainer) return;
    
    // 监视节点变化
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
                const img = graphContainer.querySelector('img');
                if (img) {
                    enhanceImage(img);
                }
            }
        });
    });
    
    observer.observe(graphContainer, { childList: true, subtree: true });
}

// 增强图像显示效果
function enhanceImage(img) {
    img.style.maxWidth = '100%';
    img.style.height = 'auto';
    img.style.borderRadius = '8px';
    img.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    img.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
    
    // 添加悬停效果
    img.onmouseover = function() {
        this.style.transform = 'scale(1.01)';
        this.style.boxShadow = '0 6px 12px rgba(0,0,0,0.15)';
    };
    img.onmouseout = function() {
        this.style.transform = 'scale(1)';
        this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
    };
}

// 诊断功能：检查所有概念卡片ID
function checkAllConceptCards() {
    const cards = document.querySelectorAll('.concept-card');
    console.log(`发现 ${cards.length} 个概念卡片`);
    
    const idMap = {};
    cards.forEach((card, index) => {
        const id = card.getAttribute('data-concept-id');
        console.log(`卡片 #${index + 1}: ID=${id}`);
        if (id) {
            idMap[id] = (idMap[id] || 0) + 1;
        }
    });
    
    // 检查ID是否有重复
    const duplicates = Object.entries(idMap).filter(([id, count]) => count > 1);
    if (duplicates.length > 0) {
        console.error('发现重复的概念ID:', duplicates);
    }
    
    return {
        totalCards: cards.length,
        cardsWithIds: Object.keys(idMap).length,
        duplicateIds: duplicates.map(([id]) => id)
    };
}

// 提供全局诊断接口
window.diagnoseConcepts = checkAllConceptCards;

// 添加调试和错误日志
window.addEventListener('error', function(e) {
    console.error('🔴 JavaScript 错误:', e.message, 'at', e.filename, 'line', e.lineno);
});