{% extends "base.html" %}

{% block title %}阅读理解管理 - FlashExam{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-book"></i>
            阅读理解管理
        </h1>
        <p class="text-muted">托福TPO风格的阅读理解材料管理</p>
    </div>
</div>

<!-- 快速导航 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning-fill"></i>
                    快速导航
                </h6>
            </div>
            <div class="card-body py-2">
                <div class="row">
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-outline-secondary btn-sm me-2">
                            <i class="bi bi-speedometer2"></i> 仪表板
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.questions') }}" class="btn btn-outline-primary btn-sm me-2">
                            <i class="bi bi-question-circle"></i> 传统题目
                        </a>
                    </div>
                    <div class="col-auto">
                        <span class="btn btn-success btn-sm me-2 disabled">
                            <i class="bi bi-book-fill"></i> 阅读理解
                        </span>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.exams') }}" class="btn btn-outline-info btn-sm me-2">
                            <i class="bi bi-journal-text"></i> 考试管理
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('reading_passages.passage_sets') }}" class="btn btn-outline-warning btn-sm">
                            <i class="bi bi-collection"></i> 阅读集合
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计信息 -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="card text-center stats-card">
            <div class="card-body">
                <i class="bi bi-book display-4 text-primary mb-2"></i>
                <h3>{{ stats.total_passages or 0 }}</h3>
                <p class="mb-0">阅读材料</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-center stats-card">
            <div class="card-body">
                <i class="bi bi-question-circle display-4 text-success mb-2"></i>
                <h3>{{ stats.total_questions or 0 }}</h3>
                <p class="mb-0">相关题目</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-center stats-card">
            <div class="card-body">
                <i class="bi bi-tag display-4 text-info mb-2"></i>
                <h3>{{ stats.sources|length or 0 }}</h3>
                <p class="mb-0">来源分类</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-center stats-card">
            <div class="card-body">
                <i class="bi bi-bookmark display-4 text-warning mb-2"></i>
                <h3>{{ stats.topics|length or 0 }}</h3>
                <p class="mb-0">主题分类</p>
            </div>
        </div>
    </div>
</div>

<!-- 操作工具栏 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('reading_passages.import_passages') }}" class="btn btn-primary w-100">
                            <i class="bi bi-upload"></i> 导入阅读材料
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ url_for('reading_passages.create_passage_set') }}" class="btn btn-success w-100">
                            <i class="bi bi-plus-circle"></i> 创建阅读集合
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-info w-100" onclick="toggleFilter()">
                            <i class="bi bi-funnel"></i> 筛选材料
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-warning w-100" onclick="exportPassages()">
                            <i class="bi bi-download"></i> 导出材料
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 筛选区域 -->
<div class="row mb-4" id="filterArea" style="display: none;">
    <div class="col-12">
        <div class="card border-info">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="bi bi-funnel"></i> 阅读材料筛选</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label class="form-label">来源</label>
                        <select class="form-select" id="filterSource">
                            <option value="">全部来源</option>
                            {% for source in stats.sources.keys() %}
                            <option value="{{ source }}">{{ source }} ({{ stats.sources[source] }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">主题</label>
                        <select class="form-select" id="filterTopic">
                            <option value="">全部主题</option>
                            {% for topic in stats.topics.keys() %}
                            <option value="{{ topic }}">{{ topic }} ({{ stats.topics[topic] }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">难度等级</label>
                        <select class="form-select" id="filterDifficulty">
                            <option value="">全部难度</option>
                            <option value="1">1星 ({{ stats.difficulty_levels[1] or 0 }})</option>
                            <option value="2">2星 ({{ stats.difficulty_levels[2] or 0 }})</option>
                            <option value="3">3星 ({{ stats.difficulty_levels[3] or 0 }})</option>
                            <option value="4">4星 ({{ stats.difficulty_levels[4] or 0 }})</option>
                            <option value="5">5星 ({{ stats.difficulty_levels[5] or 0 }})</option>
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">关键词</label>
                        <input type="text" class="form-control" id="filterKeyword" placeholder="搜索标题或内容">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <button type="button" class="btn btn-primary" onclick="applyFilter()">
                            <i class="bi bi-search"></i> 应用筛选
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="resetFilter()">
                            <i class="bi bi-arrow-clockwise"></i> 重置
                        </button>
                        <span class="ms-3 text-muted" id="filterResult"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 阅读材料列表 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="bi bi-book"></i>
                    阅读材料列表
                </h5>
            </div>
            <div class="card-body">
                {% if passages %}
                    <div class="row" id="passagesContainer">
                        {% for passage in passages %}
                        <div class="col-md-6 col-lg-4 mb-4 passage-card" 
                             data-source="{{ passage.source or '' }}" 
                             data-topic="{{ passage.topic or '' }}" 
                             data-difficulty="{{ passage.difficulty_level }}">
                            <div class="card h-100 shadow-sm">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0" title="{{ passage.title }}">
                                        {{ passage.title[:50] }}{% if passage.title|length > 50 %}...{% endif %}
                                    </h6>
                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <span class="badge bg-primary">{{ passage.source or '未分类' }}</span>
                                        <span class="badge bg-info">{{ passage.topic or '未分类' }}</span>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p class="card-text text-muted small">
                                        {{ passage.content[:150] }}{% if passage.content|length > 150 %}...{% endif %}
                                    </p>
                                    
                                    <div class="row text-center mb-3">
                                        <div class="col-4">
                                            <small class="text-muted">字数</small><br>
                                            <strong>{{ passage.word_count }}</strong>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted">阅读时间</small><br>
                                            <strong>{{ passage.reading_time }}分钟</strong>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted">难度</small><br>
                                            <strong>
                                                {% for i in range(passage.difficulty_level) %}
                                                    <i class="bi bi-star-fill text-warning"></i>
                                                {% endfor %}
                                            </strong>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <span class="badge bg-secondary">
                                            <i class="bi bi-question-circle"></i>
                                            {% set questions = [] %}
                                            {% for p in passages %}
                                                {% if p.id == passage.id %}
                                                    {% set _ = questions.extend(reading_db.get_passage_questions(passage.id) if reading_db else []) %}
                                                {% endif %}
                                            {% endfor %}
                                            题目数量: <span id="questionCount{{ passage.id }}">-</span>
                                        </span>
                                        
                                        {% if passage.language == 'cn' %}
                                        <span class="badge bg-danger">中文</span>
                                        {% else %}
                                        <span class="badge bg-success">English</span>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="d-grid gap-2">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewPassage({{ passage.id }})">
                                            <i class="bi bi-eye"></i> 查看详情
                                        </button>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-outline-info btn-sm" onclick="editPassage({{ passage.id }})">
                                                <i class="bi bi-pencil"></i> 编辑
                                            </button>
                                            <button class="btn btn-outline-danger btn-sm" onclick="deletePassage({{ passage.id }})">
                                                <i class="bi bi-trash"></i> 删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5" id="emptyState">
                        <i class="bi bi-book display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">暂无阅读材料</h4>
                        <p class="text-muted">点击"导入阅读材料"开始添加托福TPO风格的阅读理解内容</p>
                        <a href="{{ url_for('reading_passages.import_passages') }}" class="btn btn-primary">
                            <i class="bi bi-upload"></i> 导入阅读材料
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 查看阅读材料详情模态框 -->
<div class="modal fade" id="passageDetailModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">阅读材料详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="passageDetailContent">
                <!-- 详情内容将通过JavaScript加载 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="editFromView()">
                    <i class="bi bi-pencil"></i> 编辑材料
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// 全局变量
let currentPassageId = null;

// 页面加载完成后初始化
$(document).ready(function() {
    // 加载题目数量
    loadQuestionCounts();
});

// 切换筛选区域显示/隐藏
function toggleFilter() {
    const filterArea = document.getElementById('filterArea');
    if (filterArea.style.display === 'none') {
        filterArea.style.display = 'block';
    } else {
        filterArea.style.display = 'none';
    }
}

// 加载每个阅读材料的题目数量
function loadQuestionCounts() {
    const cards = document.querySelectorAll('.passage-card');
    cards.forEach(card => {
        const passageId = card.querySelector('[onclick*="viewPassage"]').getAttribute('onclick').match(/\d+/)[0];
        
        fetch(`/teacher/reading/api/passage/${passageId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const countElement = document.getElementById(`questionCount${passageId}`);
                    if (countElement) {
                        countElement.textContent = data.passage.questions.length;
                    }
                }
            })
            .catch(error => {
                console.error('获取题目数量失败:', error);
            });
    });
}

// 查看阅读材料详情
function viewPassage(passageId) {
    currentPassageId = passageId;
    
    fetch(`/teacher/reading/api/passage/${passageId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayPassageDetail(data.passage);
                $('#passageDetailModal').modal('show');
            } else {
                FlashExam.showMessage('获取详情失败: ' + data.error, 'error');
            }
        })
        .catch(error => {
            console.error('获取阅读材料详情失败:', error);
            FlashExam.showMessage('获取详情失败', 'error');
        });
}

// 显示阅读材料详情
function displayPassageDetail(passage) {
    const difficulty = '★'.repeat(passage.difficulty_level);
    
    let questionsHtml = '';
    if (passage.questions && passage.questions.length > 0) {
        questionsHtml = `
            <h6 class="mt-4">相关题目 (${passage.questions.length}道)</h6>
            <div class="list-group">
        `;
        
        passage.questions.forEach((question, index) => {
            let optionsHtml = '';
            if (question.options && Object.keys(question.options).length > 0) {
                optionsHtml = '<div class="ms-3 mt-2">';
                Object.entries(question.options).forEach(([key, value]) => {
                    const isCorrect = key === question.correct_answer;
                    optionsHtml += `<div class="form-check">
                        <input class="form-check-input" type="radio" disabled ${isCorrect ? 'checked' : ''}>
                        <label class="form-check-label ${isCorrect ? 'text-success fw-bold' : ''}">
                            ${key}. ${value}
                        </label>
                    </div>`;
                });
                optionsHtml += '</div>';
            }
            
            questionsHtml += `
                <div class="list-group-item">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">题目 ${index + 1}</h6>
                        <small>
                            <span class="badge bg-info">${question.type}</span>
                            <span class="badge bg-secondary">${question.skill_focus || '综合理解'}</span>
                        </small>
                    </div>
                    <p class="mb-1">${question.text}</p>
                    ${optionsHtml}
                    <small class="text-success">
                        <strong>正确答案:</strong> ${question.correct_answer}
                        ${question.explanation ? ` | <strong>解析:</strong> ${question.explanation}` : ''}
                    </small>
                </div>
            `;
        });
        
        questionsHtml += '</div>';
    } else {
        questionsHtml = '<p class="text-muted mt-4">暂无相关题目</p>';
    }
    
    const content = `
        <div class="row">
            <div class="col-md-8">
                <h5>${passage.title}</h5>
                <div class="mb-3">
                    <span class="badge bg-primary me-2">${passage.source || '未分类'}</span>
                    <span class="badge bg-info me-2">${passage.topic || '未分类'}</span>
                    <span class="badge bg-warning me-2">难度: ${difficulty}</span>
                    <span class="badge bg-${passage.language === 'cn' ? 'danger' : 'success'}">${passage.language === 'cn' ? '中文' : 'English'}</span>
                </div>
                
                <div class="border rounded p-3 mb-3" style="max-height: 400px; overflow-y: auto;">
                    <pre style="white-space: pre-wrap; font-family: inherit;">${passage.content}</pre>
                </div>
                
                ${questionsHtml}
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">统计信息</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-2">
                            <strong>字数统计:</strong> ${passage.word_count}
                        </div>
                        <div class="mb-2">
                            <strong>阅读时间:</strong> ${passage.reading_time} 分钟
                        </div>
                        <div class="mb-2">
                            <strong>题目数量:</strong> ${passage.questions ? passage.questions.length : 0}
                        </div>
                        <div class="mb-2">
                            <strong>创建时间:</strong> ${passage.created_at ? new Date(passage.created_at).toLocaleString() : '未知'}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('passageDetailContent').innerHTML = content;
}

// 编辑阅读材料
function editPassage(passageId) {
    // TODO: 实现编辑功能
    FlashExam.showMessage('编辑功能正在开发中', 'info');
}

// 从查看模态框跳转到编辑
function editFromView() {
    $('#passageDetailModal').modal('hide');
    if (currentPassageId) {
        editPassage(currentPassageId);
    }
}

// 删除阅读材料
function deletePassage(passageId) {
    if (!confirm('确定要删除这篇阅读材料吗？此操作将同时删除所有相关题目，不可撤销。')) {
        return;
    }
    
    fetch(`/teacher/reading/api/passage/${passageId}/delete`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            FlashExam.showMessage(data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            FlashExam.showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('删除失败:', error);
        FlashExam.showMessage('删除失败', 'error');
    });
}

// 应用筛选
function applyFilter() {
    const filterSource = document.getElementById('filterSource').value;
    const filterTopic = document.getElementById('filterTopic').value;
    const filterDifficulty = document.getElementById('filterDifficulty').value;
    const filterKeyword = document.getElementById('filterKeyword').value.toLowerCase();
    
    const cards = document.querySelectorAll('.passage-card');
    let visibleCount = 0;
    
    cards.forEach(card => {
        const source = card.dataset.source;
        const topic = card.dataset.topic;
        const difficulty = card.dataset.difficulty;
        const title = card.querySelector('h6').textContent.toLowerCase();
        const content = card.querySelector('.card-text').textContent.toLowerCase();
        
        let show = true;
        
        if (filterSource && source !== filterSource) show = false;
        if (filterTopic && topic !== filterTopic) show = false;
        if (filterDifficulty && difficulty !== filterDifficulty) show = false;
        if (filterKeyword && !title.includes(filterKeyword) && !content.includes(filterKeyword)) show = false;
        
        card.style.display = show ? '' : 'none';
        if (show) visibleCount++;
    });
    
    document.getElementById('filterResult').textContent = `筛选结果：${visibleCount} 篇材料`;
    FlashExam.showMessage(`筛选完成，找到 ${visibleCount} 篇材料`, 'info');
}

// 重置筛选
function resetFilter() {
    document.getElementById('filterSource').value = '';
    document.getElementById('filterTopic').value = '';
    document.getElementById('filterDifficulty').value = '';
    document.getElementById('filterKeyword').value = '';
    
    const cards = document.querySelectorAll('.passage-card');
    cards.forEach(card => {
        card.style.display = '';
    });
    
    document.getElementById('filterResult').textContent = '';
    FlashExam.showMessage('筛选已重置', 'info');
}

// 导出阅读材料
function exportPassages() {
    // TODO: 实现导出功能
    FlashExam.showMessage('导出功能正在开发中', 'info');
}
</script>

<style>
.stats-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s;
}

.passage-card .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
    transition: all 0.2s;
}

.passage-card .card-text {
    line-height: 1.4;
}

.badge {
    font-size: 0.7em;
}
</style>
{% endblock %}