<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背诵排序 - 转盘抽背</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/recitation.css') }}">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🎯 背诵排序工具</h1>
            <p class="subtitle">随机抽背，高效复习</p>
        </header>

        <nav class="nav">
            <a href="/" class="nav-item">首页</a>
            <a href="/recitation" class="nav-item active">背诵排序</a>
        </nav>

        <main class="main">
            <div class="recitation-container">
                <!-- 输入区域 -->
                <div class="input-section">
                    <h2>第一步：输入背诵内容</h2>
                    <p class="hint">请粘贴包含知识点列表的文本（支持从表格、列表等形式中自动识别）</p>
                    <textarea 
                        id="textInput" 
                        class="text-input" 
                        placeholder="请粘贴或输入需要背诵的知识点列表&#10;例如：&#10;第一章 西周&#10;夏商学校名称&#10;西周学在官府&#10;国学乡学&#10;六艺..."
                        rows="10"
                    ></textarea>
                    <button id="extractBtn" class="btn btn-primary">识别知识点</button>
                </div>

                <!-- 提取结果显示 -->
                <div id="extractedSection" class="extracted-section" style="display: none;">
                    <h2>第二步：确认知识点列表</h2>
                    <p class="info">已识别到 <span id="itemCount">0</span> 个知识点</p>
                    <div id="itemsList" class="items-list"></div>
                    <button id="sortBtn" class="btn btn-primary">开始随机排序</button>
                </div>

                <!-- 转盘区域 -->
                <div id="wheelSection" class="wheel-section" style="display: none;">
                    <h2>第三步：转盘抽背</h2>
                    <div class="wheel-container">
                        <div id="wheel" class="wheel"></div>
                        <div class="wheel-pointer"></div>
                    </div>
                    <button id="spinBtn" class="btn btn-spin">转动转盘</button>
                    <div id="currentItem" class="current-item"></div>
                    <div id="masteryButtons" class="mastery-buttons" style="display: none;">
                        <button id="masteredBtn" class="btn btn-mastered">✅ 背会了</button>
                        <button id="forgotBtn" class="btn btn-forgot">❌ 忘记了</button>
                    </div>
                    <div id="masteryInfo" class="mastery-info">
                        <span id="remainingCount">剩余 <span id="remainingNum">0</span> 个知识点</span>
                    </div>
                </div>

                <!-- 排序结果显示 -->
                <div id="resultSection" class="result-section" style="display: none;">
                    <h2>随机排序结果</h2>
                    <div class="export-buttons">
                        <button id="exportTxtBtn" class="btn btn-export">导出为TXT</button>
                        <button id="exportJsonBtn" class="btn btn-export">导出为JSON</button>
                        <button id="exportCsvBtn" class="btn btn-export">导出为CSV</button>
                    </div>
                    <div id="sortedList" class="sorted-list"></div>
                    <button id="resetBtn" class="btn btn-secondary">清空所有内容，重新开始</button>
                </div>
            </div>
        </main>

        <footer class="footer">
            <p>&copy; 2024 个性化饮食推荐助手</p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/recitation.js') }}"></script>
</body>
</html>
