{% extends "base.html" %}

{% block title %}学习主页 - 儿童语言学习系统{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 彩虹背景装饰 -->
    <div class="rainbow-bg"></div>
    
    <!-- 天空太阳 -->
    <div class="sky-sun"></div>
    
    <!-- 天空云朵 -->
    <div class="sky-clouds">
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
    </div>
    
    <!-- 天空星星 -->
    <div class="sky-stars">
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="star star4"></div>
        <div class="star star5"></div>
    </div>
    
    <div class="container py-4">
        <!-- 欢迎区域 - 更活泼的设计 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="welcome-card-kid">
                    <div class="floating-shapes">
                        <div class="shape shape-1">🌟</div>
                        <div class="shape shape-2">🎈</div>
                        <div class="shape shape-3">🎊</div>
                        <div class="shape shape-4">✨</div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="welcome-title">
                                <span class="wave">👋</span>
                                早安，<span class="highlight">{{ current_user.name }}</span>小朋友！
                            </h1>
                            <p class="welcome-subtitle">
                                🚀 准备好今天的语言学习冒险了吗？让我们一起探索神奇的语言世界吧！
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="welcome-mascot">
                                <i class="fas fa-robot"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐场景区域 - 前置并增加更多场景 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="section-header">
                    <h2 class="section-title">
                        🌈 今日推荐场景
                        <span class="badge bg-gradient-fun">超人气</span>
                    </h2>
                    <p class="section-subtitle">选择你喜欢的场景，开始有趣的对话学习！</p>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-5">
            <!-- 社交互动场景 -->
            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid social-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <span class="difficulty-badge easy">简单</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">和小兔子交朋友</h5>
                        <p class="scenario-desc">遇到了可爱的小兔子，快来学习如何打招呼和交朋友吧！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-social">社交互动</span>
                            <span class="tag tag-basic">基础对话</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>168人完成</span>
                            <span><i class="fas fa-star me-1"></i>4.8分</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="1">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid daily-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-utensils"></i>
                        </div>
                        <span class="difficulty-badge medium">中等</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">美食小当家</h5>
                        <p class="scenario-desc">来到神奇餐厅，学会如何礼貌点餐，成为小小美食家！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-daily">日常生活</span>
                            <span class="tag tag-polite">礼貌用语</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>142人完成</span>
                            <span><i class="fas fa-star me-1"></i>4.9分</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="2">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid fun-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-gamepad"></i>
                        </div>
                        <span class="difficulty-badge medium">中等</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">游戏时间</h5>
                        <p class="scenario-desc">邀请小伙伴一起玩游戏，学会分享和合作的乐趣！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-fun">游戏娱乐</span>
                            <span class="tag tag-cooperation">团队合作</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>95人完成</span>
                            <span><i class="fas fa-star me-1"></i>4.7分</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="3">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>

            <!-- 新增场景 -->
            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid learning-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <span class="difficulty-badge easy">简单</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">图书馆探险</h5>
                        <p class="scenario-desc">在神奇图书馆里寻找宝藏，学会如何借书和爱护书籍！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-learning">学习探索</span>
                            <span class="tag tag-reading">阅读习惯</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>73人完成</span>
                            <span><i class="fas fa-star me-1"></i>4.6分</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="4">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid nature-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-leaf"></i>
                        </div>
                        <span class="difficulty-badge fun">有趣</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">大自然课堂</h5>
                        <p class="scenario-desc">走进森林，认识小动物们，学会保护环境的重要性！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-nature">自然探索</span>
                            <span class="tag tag-environment">环保意识</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>89人完成</span>
                            <span><i class="fas fa-star me-1"></i>4.8分</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="5">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="scenario-card-kid creative-card">
                    <div class="scenario-header">
                        <div class="scenario-icon-big">
                            <i class="fas fa-palette"></i>
                        </div>
                        <span class="difficulty-badge fun">有趣</span>
                    </div>
                    <div class="scenario-content">
                        <h5 class="scenario-title">小小艺术家</h5>
                        <p class="scenario-desc">在彩虹画室里创作美丽作品，用语言描述你的艺术创想！</p>
                        <div class="scenario-tags">
                            <span class="tag tag-creative">创意表达</span>
                            <span class="tag tag-art">艺术启蒙</span>
                        </div>
                    </div>
                    <div class="scenario-footer">
                        <div class="scenario-stats">
                            <span><i class="fas fa-users me-1"></i>56人完成</span>
                            <span class="tag tag-new">新场景</span>
                        </div>
                        <button class="btn btn-scenario-play" data-scenario="6">
                            <i class="fas fa-play me-2"></i>开始冒险
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我的专属声音区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="section-header">
                    <h2 class="section-title">
                        🎤 我的专属声音
                        <span class="badge bg-gradient-voice">AI魔法</span>
                    </h2>
                    <p class="section-subtitle">让AI学会你的声音，创造专属于你的语音助手！</p>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-5">
            <div class="col-lg-8">
                <div class="voice-clone-card">
                    <div class="voice-clone-content">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div id="voice-status-display">
                                    <!-- 动态加载状态 -->
                                </div>
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="voice-clone-visual">
                                    <div class="voice-wave-container">
                                        <div class="voice-wave"></div>
                                        <div class="voice-wave"></div>
                                        <div class="voice-wave"></div>
                                        <div class="voice-wave"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="voice-clone-actions">
                        <a href="{{ url_for('voice_clone.voice_clone_page') }}" class="btn btn-voice-main">
                            <i class="fas fa-microphone me-2"></i>录制我的声音
                        </a>
                        <button class="btn btn-voice-secondary" id="quick-test-btn" disabled>
                            <i class="fas fa-magic me-2"></i>快速测试
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="voice-tips-card">
                    <h6 class="tips-title">💡 录音小贴士</h6>
                    <ul class="tips-list">
                        <li><i class="fas fa-check text-success me-2"></i>在安静的地方录音</li>
                        <li><i class="fas fa-check text-success me-2"></i>说话要清晰洪亮</li>
                        <li><i class="fas fa-check text-success me-2"></i>录制3-10秒即可</li>
                        <li><i class="fas fa-check text-success me-2"></i>用自然的语调</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 快速开始区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="section-header">
                    <h2 class="section-title">
                        ⚡ 快速开始
                    </h2>
                    <p class="section-subtitle">选择你想要的功能，立即开始学习冒险！</p>
                </div>
            </div>
        </div>

        <div class="row g-4 mb-5">
            <div class="col-md-6 col-lg-3">
                <div class="quick-action-card-kid test-card">
                    <div class="action-icon-container">
                        <i class="fas fa-flask"></i>
                    </div>
                    <h6 class="action-title">API 测试</h6>
                    <p class="action-desc">体验语音技术的神奇魔法</p>
                    <a href="{{ url_for('voice_test.voice_test_page') }}" class="btn btn-action-test">
                        <i class="fas fa-rocket me-2"></i>开始测试
                    </a>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="quick-action-card-kid record-card">
                    <div class="action-icon-container">
                        <i class="fas fa-microphone"></i>
                    </div>
                    <h6 class="action-title">录制声音</h6>
                    <p class="action-desc">让AI学会你的声音</p>
                    <a href="{{ url_for('voice_clone.voice_clone_page') }}" class="btn btn-action-record">
                        <i class="fas fa-upload me-2"></i>开始录制
                    </a>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="quick-action-card-kid chat-card">
                    <div class="action-icon-container">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h6 class="action-title">开始对话</h6>
                    <p class="action-desc">和AI朋友聊天学习</p>
                    <button class="btn btn-action-chat" disabled>
                        <i class="fas fa-play me-2"></i>选择场景
                    </button>
                    <div class="coming-soon">即将上线</div>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="quick-action-card-kid progress-card">
                    <div class="action-icon-container">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h6 class="action-title">学习报告</h6>
                    <p class="action-desc">查看你的学习成果</p>
                    <button class="btn btn-action-progress" disabled>
                        <i class="fas fa-eye me-2"></i>查看报告
                    </button>
                    <div class="coming-soon">即将上线</div>
                </div>
            </div>
        </div>

        <!-- 学习成就区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="section-header">
                    <h2 class="section-title">
                        🏆 我的学习成就
                    </h2>
                    <p class="section-subtitle">看看你在语言学习路上取得的进步！</p>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-6 col-lg-3">
                <div class="achievement-card time-card">
                    <div class="achievement-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="achievement-number">0</div>
                    <div class="achievement-label">学习时长(分钟)</div>
                    <div class="achievement-progress">
                        <div class="progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
            
            <div class="col-6 col-lg-3">
                <div class="achievement-card conversation-card">
                    <div class="achievement-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <div class="achievement-number">0</div>
                    <div class="achievement-label">对话次数</div>
                    <div class="achievement-progress">
                        <div class="progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
            
            <div class="col-6 col-lg-3">
                <div class="achievement-card star-card">
                    <div class="achievement-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="achievement-number">0</div>
                    <div class="achievement-label">获得星星</div>
                    <div class="achievement-progress">
                        <div class="progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
            
            <div class="col-6 col-lg-3">
                <div class="achievement-card medal-card">
                    <div class="achievement-icon">
                        <i class="fas fa-medal"></i>
                    </div>
                    <div class="achievement-number">0</div>
                    <div class="achievement-label">完成场景</div>
                    <div class="achievement-progress">
                        <div class="progress-bar" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}