{% extends "base.html" %}

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

{% block content %}
<div class="container py-4">
    <!-- 欢迎区域 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="welcome-card bg-gradient-primary text-white rounded-4 p-4">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h2 class="fw-bold mb-2">
                            <i class="fas fa-sun me-2"></i>
                            早安，{{ current_user.name }}小朋友！
                        </h2>
                        <p class="mb-0 opacity-90">
                            准备好今天的语言学习之旅了吗？让我们一起探索有趣的世界吧！
                        </p>
                    </div>
                    <div class="col-md-4 text-end">
                        <i class="fas fa-rocket" style="font-size: 4rem; opacity: 0.3;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速开始区域 -->
    <div class="row mb-4">
        <div class="col-12">
            <h3 class="fw-bold mb-3">
                <i class="fas fa-play-circle text-primary me-2"></i>快速开始
            </h3>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-6 col-lg-4">
            <div class="quick-action-card h-100">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center p-4">
                        <div class="action-icon mb-3">
                            <i class="fas fa-microphone text-primary"></i>
                        </div>
                        <h5 class="fw-bold mb-2">录制声音</h5>
                        <p class="text-muted small mb-3">
                            上传你的声音样本，让AI学会说话像你一样
                        </p>
                        <button class="btn btn-primary" disabled>
                            <i class="fas fa-upload me-2"></i>开始录制
                        </button>
                        <div class="mt-2">
                            <small class="text-muted">即将上线</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="quick-action-card h-100">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center p-4">
                        <div class="action-icon mb-3">
                            <i class="fas fa-comments text-success"></i>
                        </div>
                        <h5 class="fw-bold mb-2">开始对话</h5>
                        <p class="text-muted small mb-3">
                            选择有趣的场景，和AI朋友一起聊天学习
                        </p>
                        <button class="btn btn-success" disabled>
                            <i class="fas fa-play me-2"></i>选择场景
                        </button>
                        <div class="mt-2">
                            <small class="text-muted">即将上线</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="quick-action-card h-100">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body text-center p-4">
                        <div class="action-icon mb-3">
                            <i class="fas fa-chart-line text-warning"></i>
                        </div>
                        <h5 class="fw-bold mb-2">查看进度</h5>
                        <p class="text-muted small mb-3">
                            了解你的学习情况，看看哪里可以做得更好
                        </p>
                        <button class="btn btn-warning" disabled>
                            <i class="fas fa-eye me-2"></i>查看报告
                        </button>
                        <div class="mt-2">
                            <small class="text-muted">即将上线</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 学习统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <h3 class="fw-bold mb-3">
                <i class="fas fa-trophy text-warning me-2"></i>学习成就
            </h3>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-6 col-md-3">
            <div class="stat-card text-center">
                <div class="card border-0 bg-light">
                    <div class="card-body p-3">
                        <i class="fas fa-clock text-primary mb-2" style="font-size: 2rem;"></i>
                        <h4 class="fw-bold mb-0">0</h4>
                        <small class="text-muted">学习时长(分钟)</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-6 col-md-3">
            <div class="stat-card text-center">
                <div class="card border-0 bg-light">
                    <div class="card-body p-3">
                        <i class="fas fa-comments text-success mb-2" style="font-size: 2rem;"></i>
                        <h4 class="fw-bold mb-0">0</h4>
                        <small class="text-muted">对话次数</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-6 col-md-3">
            <div class="stat-card text-center">
                <div class="card border-0 bg-light">
                    <div class="card-body p-3">
                        <i class="fas fa-star text-warning mb-2" style="font-size: 2rem;"></i>
                        <h4 class="fw-bold mb-0">0</h4>
                        <small class="text-muted">获得星星</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-6 col-md-3">
            <div class="stat-card text-center">
                <div class="card border-0 bg-light">
                    <div class="card-body p-3">
                        <i class="fas fa-medal text-info mb-2" style="font-size: 2rem;"></i>
                        <h4 class="fw-bold mb-0">0</h4>
                        <small class="text-muted">完成场景</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐场景预览 -->
    <div class="row mb-4">
        <div class="col-12">
            <h3 class="fw-bold mb-3">
                <i class="fas fa-sparkles text-info me-2"></i>推荐场景
            </h3>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-md-6 col-lg-4">
            <div class="scenario-preview-card">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start mb-3">
                            <div class="scenario-icon me-3">
                                <i class="fas fa-handshake text-primary"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold mb-1">和小明交朋友</h6>
                                <small class="text-muted">社交互动</small>
                            </div>
                            <span class="badge bg-primary">简单</span>
                        </div>
                        <p class="text-muted small mb-3">
                            学习如何与新朋友进行自我介绍和基础交流
                        </p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="scenario-stats">
                                <small class="text-muted">
                                    <i class="fas fa-users me-1"></i>0人完成
                                </small>
                            </div>
                            <button class="btn btn-outline-primary btn-sm" disabled>
                                即将开放
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="scenario-preview-card">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start mb-3">
                            <div class="scenario-icon me-3">
                                <i class="fas fa-utensils text-success"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold mb-1">餐厅点餐</h6>
                                <small class="text-muted">日常生活</small>
                            </div>
                            <span class="badge bg-warning">中等</span>
                        </div>
                        <p class="text-muted small mb-3">
                            学习在餐厅如何礼貌地点餐和与服务员交流
                        </p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="scenario-stats">
                                <small class="text-muted">
                                    <i class="fas fa-users me-1"></i>0人完成
                                </small>
                            </div>
                            <button class="btn btn-outline-success btn-sm" disabled>
                                即将开放
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="scenario-preview-card">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start mb-3">
                            <div class="scenario-icon me-3">
                                <i class="fas fa-gamepad text-warning"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h6 class="fw-bold mb-1">邀请朋友玩游戏</h6>
                                <small class="text-muted">游戏娱乐</small>
                            </div>
                            <span class="badge bg-warning">中等</span>
                        </div>
                        <p class="text-muted small mb-3">
                            学习如何邀请朋友一起玩游戏并协调活动
                        </p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="scenario-stats">
                                <small class="text-muted">
                                    <i class="fas fa-users me-1"></i>0人完成
                                </small>
                            </div>
                            <button class="btn btn-outline-warning btn-sm" disabled>
                                即将开放
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}