{% extends "base.html" %}

{% block title %}我的专属声音 - 儿童语言学习系统{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- 页面标题 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center">
                <a href="{{ url_for('main.dashboard') }}" class="btn btn-outline-secondary me-3">
                    <i class="fas fa-arrow-left me-2"></i>返回主页
                </a>
                <div>
                    <h2 class="fw-bold mb-1 text-kid-primary">
                        🎤 我的专属声音
                    </h2>
                    <p class="text-muted mb-0">让AI学会你的声音，创造专属于你的语音助手</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态卡片 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm" id="status-card">
                <div class="card-body p-4">
                    <div id="voice-status-content">
                        <!-- 动态加载状态内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 录制区域 -->
    <div class="row mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm kid-feature-card">
                <div class="card-body p-4">
                    <h5 class="fw-bold text-kid-accent mb-3">
                        <i class="fas fa-microphone me-2"></i>录制你的声音
                    </h5>
                    
                    <form id="voice-upload-form" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label class="form-label">选择音频文件：</label>
                            <input type="file" class="form-control" id="voice-file" 
                                   accept=".wav,.mp3,.m4a" style="border-radius: 15px;">
                            <div class="form-text">建议：清晰朗读3-10秒，说一句完整的话</div>
                        </div>
                        
                        <div class="text-center mb-3">
                            <span class="text-muted">或者</span>
                        </div>
                        
                        <div class="text-center mb-3">
                            <button type="button" id="start-record" class="btn btn-kid-primary me-2">
                                <i class="fas fa-record-vinyl me-2"></i>开始录音
                            </button>
                            <button type="button" id="stop-record" class="btn btn-secondary" disabled>
                                <i class="fas fa-stop me-2"></i>停止录音
                            </button>
                            <div class="mt-2">
                                <small id="record-status" class="text-muted">点击开始录音按钮</small>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-kid-accent w-100" disabled id="upload-btn">
                            <i class="fas fa-upload me-2"></i>上传并训练我的声音
                        </button>
                    </form>
                    
                    <!-- 音频预览 -->
                    <div id="audio-preview" class="mt-3" style="display: none;">
                        <div class="alert alert-info">
                            <h6><i class="fas fa-headphones me-2"></i>预览录音：</h6>
                            <audio controls class="w-100 mt-2" id="preview-audio">
                                <source id="preview-source" type="audio/wav">
                            </audio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm kid-feature-card">
                <div class="card-body p-4">
                    <h5 class="fw-bold text-kid-secondary mb-3">
                        <i class="fas fa-magic me-2"></i>用我的声音说话
                    </h5>
                    
                    <form id="speech-generate-form">
                        <div class="mb-3">
                            <label class="form-label">想说什么？</label>
                            <textarea class="form-control" id="speech-text" rows="4" 
                                      placeholder="输入你想让AI用你的声音说的话..." 
                                      style="border-radius: 15px;">你好，这是我的专属声音！听起来是不是很像我呢？</textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-kid-secondary w-100" disabled id="generate-btn">
                            <i class="fas fa-magic me-2"></i>生成我的声音
                        </button>
                    </form>
                    
                    <!-- 生成结果 -->
                    <div id="speech-result" class="mt-3" style="display: none;">
                        <div class="alert alert-success">
                            <h6><i class="fas fa-volume-up me-2"></i>生成的语音：</h6>
                            <audio controls class="w-100 mt-2" id="generated-audio">
                                <source id="generated-source" type="audio/wav">
                            </audio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用说明 -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h5 class="fw-bold text-center mb-4">
                        <i class="fas fa-lightbulb text-warning me-2"></i>使用小贴士
                    </h5>
                    
                    <div class="row">
                        <div class="col-md-3 text-center mb-3">
                            <div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #FF6B6B, #FF8E53);">
                                <i class="fas fa-microphone text-white"></i>
                            </div>
                            <h6 class="fw-bold">清晰发音</h6>
                            <p class="small text-muted">说话要清楚，声音要洪亮</p>
                        </div>
                        
                        <div class="col-md-3 text-center mb-3">
                            <div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #4ECDC4, #44A08D);">
                                <i class="fas fa-clock text-white"></i>
                            </div>
                            <h6 class="fw-bold">合适时长</h6>
                            <p class="small text-muted">录音3-10秒，一句话就够了</p>
                        </div>
                        
                        <div class="col-md-3 text-center mb-3">
                            <div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #A8E6CF, #DCEDC8);">
                                <i class="fas fa-volume-up text-white"></i>
                            </div>
                            <h6 class="fw-bold">安静环境</h6>
                            <p class="small text-muted">在安静的地方录音效果更好</p>
                        </div>
                        
                        <div class="col-md-3 text-center mb-3">
                            <div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #FFB347, #FFCC02);">
                                <i class="fas fa-smile text-white"></i>
                            </div>
                            <h6 class="fw-bold">自然语调</h6>
                            <p class="small text-muted">用你平时说话的语调</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <h5 id="loading-message">正在处理中...</h5>
                <p id="loading-detail" class="text-muted">请稍候...</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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