{% extends "layout.html" %}

{% block page_title %}审核题目{% endblock %}

{% block content %}
<div class="flex gap-6">
    <!-- 左侧目录索引 -->
    <div class="w-96 flex-shrink-0">
        <div class="apple-card p-6 sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto">
            <div class="flex items-center justify-between mb-6 pb-3 border-b border-gray-200">
                <h2 class="text-lg font-bold text-gray-800">未审核知识点</h2>
            </div>
            <nav class="space-y-1">
                {% macro render_kp_node(node, level) %}
                <div class="kp-node-item mb-1" data-kp-code="{{ node.kp_code }}" data-level="{{ level }}">
                    <div class="flex items-center gap-1 group">
                        {% if node.children|length > 0 %}
                        <button 
                            onclick="toggleKpNode('{{ node.kp_code }}'); event.stopPropagation();"
                            class="w-6 h-6 rounded flex items-center justify-center text-gray-500 hover:text-orange-600 hover:bg-orange-50 transition-all flex-shrink-0 kp-expand-btn"
                            data-expanded="{% if level == 0 %}true{% else %}false{% endif %}"
                            data-kp-code="{{ node.kp_code }}">
                            {% if level == 0 %}
                            <i class="ri-subtract-line text-sm"></i>
                            {% else %}
                            <i class="ri-add-line text-sm"></i>
                            {% endif %}
                        </button>
                        {% else %}
                        <div class="w-6 h-6 flex items-center justify-center flex-shrink-0">
                            <div class="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
                        </div>
                        {% endif %}
                        <a href="javascript:void(0)" 
                           onclick="loadPendingQuestionsByKp('{{ node.kp_code }}', '{{ node.name }}', this); return false;"
                           data-kp-code="{{ node.kp_code }}"
                           data-kp-name="{{ node.name }}"
                           class="flex-1 block px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-orange-50 hover:to-amber-50 transition-all border-l-2 border-transparent hover:border-orange-400 kp-link">
                            <div class="flex items-center gap-2 flex-nowrap">
                                {% if level == 0 %}
                                <span class="bg-gradient-to-r from-slate-600 to-slate-700 text-white px-2 py-0.5 rounded text-xs font-bold shadow-sm flex-shrink-0">章</span>
                                {% elif level == 1 %}
                                <span class="bg-gradient-to-r from-blue-500 to-blue-600 text-white px-2 py-0.5 rounded text-xs font-bold shadow-sm flex-shrink-0">节</span>
                                {% else %}
                                <span class="bg-gray-200 text-gray-700 px-1.5 py-0.5 rounded text-xs font-medium flex-shrink-0">小节</span>
                                {% endif %}
                                <span class="text-sm {% if level == 0 %}font-bold text-gray-800{% elif level == 1 %}font-semibold text-gray-800{% else %}font-normal text-gray-600{% endif %} group-hover:text-orange-600 transition-colors flex-1 min-w-0 truncate">{{ node.name }}</span>
                                {% set pending_count = node.total_pending_count|default(node.pending_count|default(0)) %}
                                {% if pending_count > 0 %}
                                <span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full text-xs font-bold flex-shrink-0 ml-1">{{ pending_count }}</span>
                                {% endif %}
                            </div>
                        </a>
                    </div>
                    {% if node.children|length > 0 %}
                    <div class="kp-children ml-8 mt-1 {% if level >= 1 %}hidden{% endif %}" id="kp-children-{{ node.kp_code }}" data-level="{{ level }}">
                        {% for child in node.children %}
                            {{ render_kp_node(child, level + 1) }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% endmacro %}
                
                <!-- 其他题目节点 -->
                {% if other_questions_count|default(0) > 0 %}
                <div class="kp-node-item mb-2 pb-2 border-b border-gray-200" data-kp-code="null" data-level="-1">
                    <a href="javascript:void(0)" 
                       onclick="loadPendingQuestionsByKp('null', '其他题目', this); return false;"
                       data-kp-code="null"
                       data-kp-name="其他题目"
                       class="flex-1 block px-3 py-2 rounded-lg hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 transition-all border-l-2 border-transparent hover:border-purple-400 kp-link">
                        <div class="flex items-center gap-2 flex-nowrap">
                            <span class="bg-gradient-to-r from-purple-500 to-pink-500 text-white px-2 py-0.5 rounded text-xs font-bold shadow-sm flex-shrink-0">其他</span>
                            <span class="text-sm font-bold text-gray-800 group-hover:text-purple-600 transition-colors flex-1 min-w-0 truncate">其他题目</span>
                            <span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full text-xs font-bold flex-shrink-0 ml-1">{{ other_questions_count }}</span>
                        </div>
                    </a>
                </div>
                {% endif %}
                
                {% if kp_tree %}
                    {% for root_node in kp_tree %}
                        {{ render_kp_node(root_node, 0) }}
                    {% endfor %}
                {% else %}
                    <div class="text-sm text-gray-500 text-center py-8">暂无未审核题目</div>
                {% endif %}
            </nav>
        </div>
    </div>
    
    <!-- 右侧题目列表区域 -->
    <div class="flex-1">
        <div id="questions-container" class="space-y-4">
            <div class="apple-card p-12 text-center">
                <div class="text-gray-400 mb-4">
                    <i class="ri-file-check-line text-6xl"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-600 mb-2">请选择左侧知识点</h3>
                <p class="text-sm text-gray-500 mb-6">点击知识点查看该知识点下的未审核题目</p>
            </div>
        </div>
    </div>
</div>

<script>
// 知识点目录折叠/展开功能
function toggleKpNode(kpCode) {
    const childrenContainer = document.getElementById(`kp-children-${kpCode}`);
    const expandBtn = document.querySelector(`.kp-expand-btn[data-kp-code="${kpCode}"]`);
    
    if (!childrenContainer || !expandBtn) return;
    
    const isExpanded = expandBtn.getAttribute('data-expanded') === 'true';
    const icon = expandBtn.querySelector('i');
    
    if (isExpanded) {
        // 折叠
        childrenContainer.classList.add('hidden');
        expandBtn.setAttribute('data-expanded', 'false');
        if (icon) {
            icon.className = 'ri-add-line text-sm';
        }
    } else {
        // 展开
        childrenContainer.classList.remove('hidden');
        expandBtn.setAttribute('data-expanded', 'true');
        if (icon) {
            icon.className = 'ri-subtract-line text-sm';
        }
    }
}

// 存储当前知识点的代码和名称
let currentKpCode = null;
let currentKpName = null;

// 加载指定知识点的未审核题目列表（支持分页）
function loadPendingQuestionsByKp(kpCode, kpName, linkElement, page = null) {
    const container = document.getElementById('questions-container');
    if (!container) return;
    
    // 保存当前知识点信息
    currentKpCode = kpCode;
    currentKpName = kpName;
    
    // 更新选中状态
    document.querySelectorAll('.kp-link').forEach(link => {
        link.classList.remove('bg-orange-50', 'border-orange-400');
    });
    if (linkElement) {
        linkElement.classList.add('bg-orange-50', 'border-orange-400');
    }
    
    // 显示加载状态
    container.innerHTML = `
        <div class="apple-card p-12 text-center">
            <div class="text-orange-500 mb-4">
                <i class="ri-loader-4-line text-6xl animate-spin"></i>
            </div>
            <p class="text-gray-600">正在加载未审核题目...</p>
        </div>
    `;
    
    // 如果没有指定页码，从URL参数获取
    if (page === null) {
        const urlParams = new URLSearchParams(window.location.search);
        const pageParam = urlParams.get('page');
        page = pageParam ? parseInt(pageParam) : 1;
    }
    
    // 构建请求URL（添加分页参数）
    let apiUrl = `/api/pending_questions_by_kp/${encodeURIComponent(kpCode)}`;
    if (page > 1) {
        apiUrl += `?page=${page}`;
    }
    
    // 请求未审核题目列表
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                throw new Error(data.error || '加载失败');
            }
            
            const questions = data.questions || [];
            const kpName = data.kp_name || kpCode;
            
            // 获取分页信息（从API返回）
            const pagination = data.pagination || {};
            const currentPage = pagination.page || 1;
            const totalPages = pagination.total_pages || 1;
            const totalCount = pagination.total_count || questions.length;
            const pageSize = pagination.page_size || 20;
            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = Math.min(startIndex + pageSize, totalCount);
            
            // 渲染题目列表
            let html = '';
            
            html += `<div class="space-y-3 ${kpCode === 'null' || kpCode === '' ? '' : 'mt-6'}">`;
            
            // 如果没有题目，显示提示信息
            if (questions.length === 0) {
                html += `
                    <div class="apple-card p-12 text-center">
                        <div class="text-gray-400 mb-4">
                            <i class="ri-file-list-line text-6xl"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-600 mb-2">该知识点下暂无未审核题目</h3>
                        <p class="text-sm text-gray-500">所有题目已审核完成</p>
                    </div>
                `;
            } else {
                // 有题目时，渲染题目列表（完全按照题目管理页面的格式）
                questions.forEach(q => {
                    // 审核状态（待审核）
                    let auditBadge = '<span class="bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-xs font-bold whitespace-nowrap">待审核</span>';
                    
                    // 难度标签
                    let difficultyBadge = '';
                    if (q.difficulty !== null && q.difficulty !== undefined) {
                        const diff = parseFloat(q.difficulty);
                        if (diff === 0.2 || Math.abs(diff - 0.2) < 0.1) {
                            difficultyBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700 border border-green-200 whitespace-nowrap">筑基</span>';
                        } else if (diff === 0.4 || Math.abs(diff - 0.4) < 0.1) {
                            difficultyBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-yellow-100 text-yellow-700 border border-yellow-200 whitespace-nowrap">提分</span>';
                        } else if (diff === 0.7 || Math.abs(diff - 0.7) < 0.1) {
                            difficultyBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-700 border border-orange-200 whitespace-nowrap">培优</span>';
                        }
                    }
                    
                    // 题型标签
                    const typeMap = {'choice': '选择题', 'fill': '填空题', 'answer': '解答题'};
                    const questionTypeText = typeMap[q.question_type] || q.question_type || '未分类';
                    
                    // 年级标签
                    let gradeBadge = '';
                    if (q.grade !== null && q.grade !== undefined) {
                        const grade = parseInt(q.grade);
                        if (grade === 1) {
                            gradeBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-pink-100 text-pink-700 border border-pink-200 whitespace-nowrap">小学</span>';
                        } else if (grade === 2) {
                            gradeBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-blue-100 text-blue-700 border border-blue-200 whitespace-nowrap">初中</span>';
                        } else if (grade === 3) {
                            gradeBadge = '<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700 border border-purple-200 whitespace-nowrap">高中</span>';
                        }
                    }
                    
                    // 题干预览（去除HTML标签，只显示文本）
                    const stemText = (q.stem || '').replace(/<[^>]*>/g, '').substring(0, 150);
                    
                    html += `
                        <a href="/detail/${q.question_code}${currentKpCode ? '?kp_code=' + encodeURIComponent(currentKpCode) : ''}" 
                           class="apple-card p-4 block group hover:shadow-lg transition-all border-l-4 border-transparent hover:border-blue-500">
                            <div class="flex items-center gap-4">
                                <!-- 左侧：题号 -->
                                <div class="flex-shrink-0">
                                    <span class="text-xs font-mono text-gray-500 bg-gray-100 px-3 py-1.5 rounded font-semibold">${q.question_code}</span>
                                </div>
                                
                                <!-- 中间：题干内容 -->
                                <div class="flex-1 min-w-0">
                                    <div class="text-sm text-gray-800 group-hover:text-blue-600 transition-colors line-clamp-1">
                                        ${stemText}${stemText.length >= 150 ? '...' : ''}
                                    </div>
                                </div>

                                <!-- 右侧：标签和操作 -->
                                <div class="flex items-center gap-3 flex-shrink-0">
                                    <span class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded">${questionTypeText}</span>
                                    ${gradeBadge}
                                    ${difficultyBadge}
                                    ${auditBadge}
                                    <span class="text-xs text-blue-600 font-medium opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">查看详情 →</span>
                                </div>
                            </div>
                        </a>
                    `;
                });
                
                // 添加翻页控件（完全按照题目管理页面的格式）
                if (totalPages > 1) {
                    html += `
                        <div class="mt-6 flex items-center justify-between">
                            <div class="text-sm text-gray-600">
                                显示第 ${startIndex + 1}-${endIndex} 题，共 ${totalCount} 题
                            </div>
                            <div class="flex items-center gap-2">
                                <button 
                                    onclick="loadPendingQuestionsByKpPage('${kpCode}', ${currentPage - 1})"
                                    ${currentPage === 1 ? 'disabled' : ''}
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-all border-2 ${
                                        currentPage === 1 
                                            ? 'border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed' 
                                            : 'border-blue-300 bg-white text-blue-700 hover:bg-blue-50'
                                    }">
                                    <i class="ri-arrow-left-s-line"></i> 上一页
                                </button>
                                
                                <div class="flex items-center gap-1">
                                    ${Array.from({length: totalPages}, (_, i) => i + 1).map(page => {
                                        if (page === 1 || page === totalPages || (page >= currentPage - 2 && page <= currentPage + 2)) {
                                            return `
                                                <button 
                                                    onclick="loadPendingQuestionsByKpPage('${kpCode}', ${page})"
                                                    class="px-3 py-2 rounded-lg text-sm font-medium transition-all border-2 ${
                                                        page === currentPage
                                                            ? 'border-blue-500 bg-blue-500 text-white'
                                                            : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
                                                    }">
                                                    ${page}
                                                </button>
                                            `;
                                        } else if (page === currentPage - 3 || page === currentPage + 3) {
                                            return '<span class="px-2 text-gray-400">...</span>';
                                        }
                                        return '';
                                    }).join('')}
                                </div>
                                
                                <button 
                                    onclick="loadPendingQuestionsByKpPage('${kpCode}', ${currentPage + 1})"
                                    ${currentPage === totalPages ? 'disabled' : ''}
                                    class="px-4 py-2 rounded-lg text-sm font-medium transition-all border-2 ${
                                        currentPage === totalPages 
                                            ? 'border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed' 
                                            : 'border-blue-300 bg-white text-blue-700 hover:bg-blue-50'
                                    }">
                                    下一页 <i class="ri-arrow-right-s-line"></i>
                                </button>
                            </div>
                        </div>
                    `;
                }
            }
            
            html += '</div>';
            container.innerHTML = html;
            
            // 渲染数学公式
            if (window.renderMathInElement) {
                container.querySelectorAll('.math-render').forEach(el => {
                    try {
                        window.renderMathInElement(el, {
                            delimiters: [
                                {left: "$$", right: "$$", display: true},
                                {left: "$", right: "$", display: false},
                                {left: "\\(", right: "\\)", display: false},
                                {left: "\\[", right: "\\]", display: true}
                            ],
                            throwOnError: false
                        });
                    } catch (e) {
                        console.warn('数学公式渲染失败:', e);
                    }
                });
            }
        })
        .catch(error => {
            container.innerHTML = `
                <div class="apple-card p-12 text-center">
                    <div class="text-red-400 mb-4">
                        <i class="ri-error-warning-line text-6xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-gray-600 mb-2">加载失败</h3>
                    <p class="text-sm text-red-500">${error.message || '未知错误'}</p>
                </div>
            `;
        });
}

// 分页加载函数（完全按照题目管理页面的格式）
function loadPendingQuestionsByKpPage(kpCode, page) {
    // 更新URL参数，但不刷新页面
    const url = new URL(window.location);
    url.searchParams.set('kp_code', kpCode);
    if (page > 1) {
        url.searchParams.set('page', page);
    } else {
        url.searchParams.delete('page');
    }
    window.history.pushState({}, '', url);
    
    // 重新加载题目列表
    const linkElement = document.querySelector(`.kp-link[data-kp-code="${kpCode}"]`);
    const kpName = linkElement ? (linkElement.getAttribute('data-kp-name') || kpCode) : kpCode;
    loadPendingQuestionsByKp(kpCode, kpName, linkElement, page);
}

// 页面加载完成后，初始化知识点目录
document.addEventListener('DOMContentLoaded', function() {
    // 默认展开第一级节点
    const firstLevelNodes = document.querySelectorAll('.kp-node-item[data-level="0"]');
    firstLevelNodes.forEach(node => {
        const kpCode = node.getAttribute('data-kp-code');
        const expandBtn = node.querySelector('.kp-expand-btn');
        if (expandBtn && expandBtn.getAttribute('data-expanded') === 'true') {
            const childrenContainer = document.getElementById(`kp-children-${kpCode}`);
            if (childrenContainer) {
                childrenContainer.classList.remove('hidden');
            }
        }
    });
});
</script>
{% endblock %}