// 背诵排序功能脚本

let extractedItems = [];
let sortedItems = []; // 原始排序后的所有项目
let availableItems = []; // 当前可用于转盘的项目（排除已掌握的）
let masteredItems = []; // 已掌握的项目列表
let currentSpinIndex = 0;
let currentSelectedItem = null; // 当前转盘选中的项目
let isSpinning = false;

// 颜色配置 - 转盘使用不同颜色
const colors = [
    '#667eea', '#764ba2', '#f093fb', '#f5576c',
    '#4facfe', '#00f2fe', '#43e97b', '#38f9d7',
    '#fa709a', '#fee140', '#30cfd0', '#330867'
];

// DOM元素
const textInput = document.getElementById('textInput');
const extractBtn = document.getElementById('extractBtn');
const extractedSection = document.getElementById('extractedSection');
const itemsList = document.getElementById('itemsList');
const itemCount = document.getElementById('itemCount');
const sortBtn = document.getElementById('sortBtn');
const wheelSection = document.getElementById('wheelSection');
const wheel = document.getElementById('wheel');
const spinBtn = document.getElementById('spinBtn');
const currentItem = document.getElementById('currentItem');
const resultSection = document.getElementById('resultSection');
const sortedList = document.getElementById('sortedList');
const resetBtn = document.getElementById('resetBtn');
const exportTxtBtn = document.getElementById('exportTxtBtn');
const exportJsonBtn = document.getElementById('exportJsonBtn');
const exportCsvBtn = document.getElementById('exportCsvBtn');
const masteredBtn = document.getElementById('masteredBtn');
const forgotBtn = document.getElementById('forgotBtn');
const masteryButtons = document.getElementById('masteryButtons');
const remainingNum = document.getElementById('remainingNum');

// 本地存储键
const STORAGE_KEY_EXTRACTED = 'recitation_extracted_items';
const STORAGE_KEY_SORTED = 'recitation_sorted_items';
const STORAGE_KEY_ORIGINAL_TEXT = 'recitation_original_text';
const STORAGE_KEY_MASTERED = 'recitation_mastered_items';

// 页面加载时恢复数据并清理异常元素
window.addEventListener('DOMContentLoaded', () => {
    // 首先清理任何可能的异常覆盖层或调试元素
    cleanupAbnormalElements();
    
    // 然后恢复保存的数据
    restoreFromStorage();
});

// 清理异常元素 - 移除可能的覆盖层、时间戳等调试元素
function cleanupAbnormalElements() {
    try {
        // 查找所有可能包含时间戳格式的文本节点（如 25-11-03-16, 03-16:41 等）
        const walker = document.createTreeWalker(
            document.body,
            NodeFilter.SHOW_TEXT,
            null,
            false
        );
        
        let node;
        const timestampPattern = /\d{2}-\d{2}-\d{2}-\d{2}|\d{2}-\d{2}:\d{2}/;
        const nodesToRemove = [];
        
        while (node = walker.nextNode()) {
            if (timestampPattern.test(node.textContent.trim())) {
                // 找到包含时间戳的文本节点，移除其父元素（如果它是独立显示的元素）
                const parent = node.parentElement;
                if (parent && (
                    parent.style.opacity && parseFloat(parent.style.opacity) < 1 ||
                    parent.style.position === 'absolute' ||
                    parent.style.position === 'fixed'
                )) {
                    nodesToRemove.push(parent);
                }
            }
        }
        
        // 移除异常元素
        nodesToRemove.forEach(el => {
            if (el && el.parentNode) {
                el.remove();
            }
        });
        
        // 移除任何具有明显时间戳样式的元素（半透明、绝对定位等）
        document.querySelectorAll('*').forEach(el => {
            const style = window.getComputedStyle(el);
            if (style.opacity && parseFloat(style.opacity) < 0.8 &&
                (style.position === 'absolute' || style.position === 'fixed') &&
                el.textContent.match(timestampPattern)) {
                el.remove();
            }
        });
        
    } catch (e) {
        console.warn('清理异常元素时出错:', e);
    }
}

// 保存到本地存储
function saveToStorage() {
    try {
        if (extractedItems.length > 0) {
            localStorage.setItem(STORAGE_KEY_EXTRACTED, JSON.stringify(extractedItems));
        }
        if (sortedItems.length > 0) {
            localStorage.setItem(STORAGE_KEY_SORTED, JSON.stringify(sortedItems));
        }
        if (textInput.value.trim()) {
            localStorage.setItem(STORAGE_KEY_ORIGINAL_TEXT, textInput.value);
        }
        if (masteredItems.length > 0) {
            localStorage.setItem(STORAGE_KEY_MASTERED, JSON.stringify(masteredItems));
        }
    } catch (e) {
        console.error('保存到本地存储失败:', e);
    }
}

// 从本地存储恢复
function restoreFromStorage() {
    try {
        const savedExtracted = localStorage.getItem(STORAGE_KEY_EXTRACTED);
        const savedSorted = localStorage.getItem(STORAGE_KEY_SORTED);
        const savedText = localStorage.getItem(STORAGE_KEY_ORIGINAL_TEXT);
        const savedMastered = localStorage.getItem(STORAGE_KEY_MASTERED);
        
        if (savedText) {
            textInput.value = savedText;
        }
        
        if (savedExtracted) {
            extractedItems = JSON.parse(savedExtracted);
            displayExtractedItems(extractedItems);
            extractedSection.style.display = 'block';
            textInput.disabled = true;
        }
        
        if (savedMastered) {
            masteredItems = JSON.parse(savedMastered);
        }
        
        if (savedSorted) {
            sortedItems = JSON.parse(savedSorted);
            updateAvailableItems(); // 更新可用项目列表
            displaySortedItems(sortedItems);
            createWheel(availableItems);
            wheelSection.style.display = 'block';
            resultSection.style.display = 'block';
            updateMasteryInfo();
        }
    } catch (e) {
        console.error('从本地存储恢复失败:', e);
    }
}

// 清除本地存储 - 完全清理所有相关数据
function clearStorage() {
    try {
        localStorage.removeItem(STORAGE_KEY_EXTRACTED);
        localStorage.removeItem(STORAGE_KEY_SORTED);
        localStorage.removeItem(STORAGE_KEY_ORIGINAL_TEXT);
        localStorage.removeItem(STORAGE_KEY_MASTERED);
        
        // 清除任何可能存在的其他相关键
        const keysToRemove = [];
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key && key.startsWith('recitation_')) {
                keysToRemove.push(key);
            }
        }
        keysToRemove.forEach(key => localStorage.removeItem(key));
    } catch (e) {
        console.error('清除本地存储失败:', e);
    }
}

// 更新可用项目列表（排除已掌握的）
function updateAvailableItems() {
    availableItems = sortedItems.filter(item => !masteredItems.includes(item));
    updateMasteryInfo();
}

// 更新掌握情况信息
function updateMasteryInfo() {
    remainingNum.textContent = availableItems.length;
}

// 提取知识点
extractBtn.addEventListener('click', async () => {
    const text = textInput.value.trim();
    
    if (!text) {
        alert('请输入需要识别的文本');
        return;
    }

    extractBtn.disabled = true;
    extractBtn.textContent = '识别中...';

    try {
        const response = await fetch('/api/extract', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ text })
        });

        const data = await response.json();

        if (data.success) {
            extractedItems = data.items;
            displayExtractedItems(extractedItems);
            extractedSection.style.display = 'block';
            textInput.disabled = true;
            saveToStorage(); // 保存到本地存储
        } else {
            alert(data.message || '提取失败');
        }
    } catch (error) {
        console.error('提取失败:', error);
        alert('提取失败，请检查网络连接');
    } finally {
        extractBtn.disabled = false;
        extractBtn.textContent = '识别知识点';
    }
});

// 显示提取到的项目
function displayExtractedItems(items) {
    itemCount.textContent = items.length;
    itemsList.innerHTML = '';
    
    items.forEach((item, index) => {
        const tag = document.createElement('span');
        tag.className = 'item-tag';
        tag.textContent = `${index + 1}. ${item}`;
        itemsList.appendChild(tag);
    });
}

// 开始排序
sortBtn.addEventListener('click', async () => {
    if (extractedItems.length === 0) {
        alert('请先提取知识点');
        return;
    }

    sortBtn.disabled = true;
    sortBtn.textContent = '排序中...';

    try {
        const response = await fetch('/api/sort', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ items: extractedItems })
        });

        const data = await response.json();

        if (data.success) {
            sortedItems = data.items;
            masteredItems = []; // 重新排序时重置已掌握列表
            updateAvailableItems(); // 更新可用项目
            displaySortedItems(sortedItems);
            createWheel(availableItems);
            wheelSection.style.display = 'block';
            resultSection.style.display = 'block';
            currentSpinIndex = 0;
            currentSelectedItem = null;
            masteryButtons.style.display = 'none';
            saveToStorage(); // 保存到本地存储
        } else {
            alert(data.message || '排序失败');
        }
    } catch (error) {
        console.error('排序失败:', error);
        alert('排序失败，请检查网络连接');
    } finally {
        sortBtn.disabled = false;
        sortBtn.textContent = '开始随机排序';
    }
});

// 创建转盘 - 使用SVG实现真实转盘效果
function createWheel(items) {
    wheel.innerHTML = '';
    
    if (items.length === 0) {
        currentItem.textContent = '所有知识点已掌握！';
        spinBtn.disabled = true;
        return;
    }

    spinBtn.disabled = false;
    const anglePerItem = 360 / items.length;
    const radius = 190; // 转盘半径，考虑边框
    const centerX = 200;
    const centerY = 200;

    // 创建SVG转盘
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', '400');
    svg.setAttribute('height', '400');
    svg.setAttribute('viewBox', '0 0 400 400');
    svg.style.position = 'absolute';
    svg.style.top = '0';
    svg.style.left = '0';
    svg.style.width = '100%';
    svg.style.height = '100%';
    svg.style.transition = 'transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99)';

    items.forEach((item, index) => {
        const startAngle = (index * anglePerItem - 90) * Math.PI / 180;
        const endAngle = ((index + 1) * anglePerItem - 90) * Math.PI / 180;
        
        const x1 = centerX + radius * Math.cos(startAngle);
        const y1 = centerY + radius * Math.sin(startAngle);
        const x2 = centerX + radius * Math.cos(endAngle);
        const y2 = centerY + radius * Math.sin(endAngle);

        const largeArcFlag = anglePerItem > 180 ? 1 : 0;

        const pathData = [
            `M ${centerX} ${centerY}`,
            `L ${x1} ${y1}`,
            `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
            'Z'
        ].join(' ');

        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', pathData);
        const colorIndex = index % colors.length;
        path.setAttribute('fill', colors[colorIndex]);
        path.setAttribute('stroke', '#fff');
        path.setAttribute('stroke-width', '2');
        
        svg.appendChild(path);

        // 添加文本
        const midAngle = (startAngle + endAngle) / 2;
        const textRadius = radius * 0.7;
        const textX = centerX + textRadius * Math.cos(midAngle);
        const textY = centerY + textRadius * Math.sin(midAngle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', textX);
        text.setAttribute('y', textY);
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('fill', 'white');
        text.setAttribute('font-size', items.length > 8 ? '12' : '14');
        text.setAttribute('font-weight', 'bold');
        text.setAttribute('transform', `rotate(${(midAngle * 180 / Math.PI + 90)}, ${textX}, ${textY})`);
        
        const displayText = item.length > 12 ? item.substring(0, 12) + '...' : item;
        text.textContent = displayText;
        
        svg.appendChild(text);
    });

    wheel.appendChild(svg);
}

// 转动转盘
spinBtn.addEventListener('click', () => {
    if (isSpinning || availableItems.length === 0) return;

    isSpinning = true;
    spinBtn.disabled = true;
    currentItem.textContent = '转盘中...';
    masteryButtons.style.display = 'none'; // 隐藏按钮，等待转盘停止
    currentSelectedItem = null;

    // 随机选择一个项目，并增加多圈旋转效果
    const randomIndex = Math.floor(Math.random() * availableItems.length);
    const spins = 3; // 转3圈
    const anglePerItem = 360 / availableItems.length;
    // 计算目标角度：转多圈 + 指向选中项
    const targetAngle = spins * 360 + (360 - (randomIndex * anglePerItem) - anglePerItem / 2);

    // 获取当前角度
    const svg = wheel.querySelector('svg');
    if (!svg) return;
    const currentAngle = getCurrentRotation(svg);
    
    // 计算总旋转角度（考虑当前角度）
    const totalRotation = currentAngle + targetAngle;

    svg.style.transform = `rotate(${totalRotation}deg)`;

    // 转盘停止后显示结果
    setTimeout(() => {
        currentSelectedItem = availableItems[randomIndex];
        currentItem.textContent = `${randomIndex + 1}. ${currentSelectedItem}`;
        currentSpinIndex = randomIndex;
        isSpinning = false;
        spinBtn.disabled = false;
        masteryButtons.style.display = 'flex'; // 显示掌握按钮
    }, 3000);
});

// 获取当前旋转角度
function getCurrentRotation(element) {
    if (!element) return 0;
    const style = window.getComputedStyle(element);
    const transform = style.transform;
    if (transform === 'none') return 0;
    
    const matrix = new DOMMatrix(transform);
    const angle = Math.atan2(matrix.b, matrix.a) * (180 / Math.PI);
    return angle;
}

// 背会了按钮
masteredBtn.addEventListener('click', () => {
    if (!currentSelectedItem) return;
    
    // 添加到已掌握列表
    if (!masteredItems.includes(currentSelectedItem)) {
        masteredItems.push(currentSelectedItem);
    }
    
    // 更新可用项目列表
    updateAvailableItems();
    
    // 重新创建转盘（因为项目数量可能改变）
    createWheel(availableItems);
    
    // 隐藏按钮和当前项目显示
    masteryButtons.style.display = 'none';
    currentItem.textContent = '';
    currentSelectedItem = null;
    
    // 重置转盘角度
    const svg = wheel.querySelector('svg');
    if (svg) {
        svg.style.transform = 'rotate(0deg)';
    }
    
    // 保存状态
    saveToStorage();
    
    // 更新排序结果列表显示（标记已掌握的）
    displaySortedItems(sortedItems);
});

// 忘记了按钮
forgotBtn.addEventListener('click', () => {
    if (!currentSelectedItem) return;
    
    // 忘记了的项目保留在列表中，不做任何操作
    // 隐藏按钮，可以继续转动转盘
    masteryButtons.style.display = 'none';
    currentItem.textContent = '';
    currentSelectedItem = null;
});

// 显示排序结果
function displaySortedItems(items) {
    sortedList.innerHTML = '';
    
    items.forEach((item, index) => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'sorted-item';
        
        // 如果已掌握，添加特殊样式
        if (masteredItems.includes(item)) {
            itemDiv.classList.add('sorted-item-mastered');
        }
        
        const numberSpan = document.createElement('span');
        numberSpan.className = 'sorted-item-number';
        numberSpan.textContent = index + 1;
        
        const textSpan = document.createElement('span');
        textSpan.className = 'sorted-item-text';
        textSpan.textContent = item;
        
        if (masteredItems.includes(item)) {
            const masteredIcon = document.createElement('span');
            masteredIcon.className = 'mastered-icon';
            masteredIcon.textContent = '✓';
            textSpan.appendChild(masteredIcon);
        }
        
        itemDiv.appendChild(numberSpan);
        itemDiv.appendChild(textSpan);
        sortedList.appendChild(itemDiv);
    });
}

// 导出功能
exportTxtBtn.addEventListener('click', () => exportData('txt'));
exportJsonBtn.addEventListener('click', () => exportData('json'));
exportCsvBtn.addEventListener('click', () => exportData('csv'));

function exportData(format) {
    // 导出时只导出当前可用的项目（未掌握的）
    const itemsToExport = availableItems.length > 0 ? availableItems : sortedItems;
    
    if (itemsToExport.length === 0) {
        alert('没有可导出的数据');
        return;
    }
    
    fetch('/api/export/sorted', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        body: JSON.stringify({
            items: itemsToExport,
            format: format
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('导出失败');
        }
        return response.blob();
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '').replace('T', '_');
        a.download = `背诵排序结果_${timestamp}.${format}`;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
    })
    .catch(error => {
        console.error('导出失败:', error);
        alert('导出失败，请稍后重试');
    });
}

// 重置 - 完全清理所有数据和显示
resetBtn.addEventListener('click', () => {
    // 重置所有变量
    extractedItems = [];
    sortedItems = [];
    availableItems = [];
    masteredItems = [];
    currentSpinIndex = 0;
    currentSelectedItem = null;
    isSpinning = false;
    
    // 清理输入框
    textInput.value = '';
    textInput.disabled = false;
    
    // 隐藏所有区域
    extractedSection.style.display = 'none';
    wheelSection.style.display = 'none';
    resultSection.style.display = 'none';
    
    // 清理提取的项目列表显示
    itemsList.innerHTML = '';
    itemCount.textContent = '0';
    
    // 清理转盘
    wheel.innerHTML = '';
    const svg = wheel.querySelector('svg');
    if (svg) {
        svg.style.transform = 'rotate(0deg)';
        svg.remove();
    }
    
    // 清理当前项目显示
    currentItem.textContent = '';
    masteryButtons.style.display = 'none';
    
    // 清理排序结果列表
    sortedList.innerHTML = '';
    
    // 重置按钮状态
    spinBtn.disabled = false;
    extractBtn.disabled = false;
    extractBtn.textContent = '识别知识点';
    sortBtn.disabled = false;
    sortBtn.textContent = '开始随机排序';
    
    // 更新掌握情况信息
    remainingNum.textContent = '0';
    
    // 清除本地存储
    clearStorage();
    
    // 强制清理DOM中可能残留的元素
    document.querySelectorAll('.item-tag').forEach(el => el.remove());
    document.querySelectorAll('.sorted-item').forEach(el => el.remove());
    
    // 确认清理完成
    console.log('已完全重置页面，可以开始新的背诵任务');
});
