{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0 bg-dark text-white rounded-4 overflow-hidden">
                <div class="card-header bg-primary py-4 text-center">
                    <h2 class="fw-bold mb-0 text-uppercase tracking-wider">🚀 Studio AI Automático</h2>
                    <p class="mb-0 opacity-75">CGI Studio - Cinema Digital Inteligente</p>
                </div>
                <div class="card-body p-5">
                    <form action="{% url 'generate_production' %}" method="POST" id="ai-form">
                        {% csrf_token %}
                        
                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary">Tipo de Produção</label>
                            <select name="project_type" class="form-select form-select-lg bg-dark text-white border-secondary">
                                <option value="MOVIE">Filme de Cinema</option>
                                <option value="SERIES">Série Original</option>
                                <option value="DOCUMENTARY">Documentário Especial</option>
                                <option value="SHORT">Curta Metragem</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary">Categoria / Gênero</label>
                            <input type="text" name="category" class="form-control form-control-lg bg-dark text-white border-secondary" placeholder="Ex: Sci-Fi, Cyberpunk, Suspense, Ação..." required>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold text-primary">Voz Narrativa Principal (Human-Like)</label>
                            <select name="voice_preset" class="form-select form-select-lg bg-dark text-white border-secondary">
                                <option value="male_1">James (Natural Male - Realista)</option>
                                <option value="male_2">Robert (Deep Narrative - Narrador)</option>
                                <option value="female_1">Emma (Soft Female - Melódica)</option>
                                <option value="female_2">Sophia (Professional - Executiva)</option>
                                <option value="robot">CGI Assist (Neural AI)</option>
                            </select>
                            <div class="form-text text-light opacity-50">Vozes baseadas em padrões reais de cinema.</div>
                        </div>

                        <div class="mb-5">
                            <label class="form-label fw-bold text-primary">Tema ou Enredo Central</label>
                            <textarea name="theme" rows="4" class="form-control bg-dark text-white border-secondary" placeholder="Descreva brevemente a história que você quer que a IA crie, gere e direcione..." required></textarea>
                        </div>

                        <div class="text-center d-grid">
                            <button type="submit" class="btn btn-primary btn-lg py-3 fw-bold rounded-pill shadow" id="generate-btn">
                                <i class="bi bi-magic me-2"></i> INICIAR SUPER PRODUÇÃO AUTOMÁTICA
                            </button>
                        </div>
                    </form>

                    <div id="loading-state" class="text-center py-5 d-none">
                        <div class="spinner-border text-primary mb-3" style="width: 3rem; height: 3rem;" role="status"></div>
                        <h4 class="fw-bold text-primary">A IA está Gerando sua Super Produção...</h4>
                        <p class="text-light opacity-75">Criando roteiro, escalando personagens, gerando vídeos cinematográficos e integrando vozes reais.</p>
                        <p class="small text-secondary">Isso pode levar até 2 minutos devido ao processamento de vídeo.</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 text-center">
                <a href="{% url 'production_library' %}" class="btn btn-outline-light rounded-pill">
                    <i class="bi bi-collection-play me-2"></i> Ver Biblioteca de Produções
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('ai-form').addEventListener('submit', function() {
        document.getElementById('ai-form').classList.add('d-none');
        document.getElementById('loading-state').classList.remove('d-none');
        
        let messages = [
            "Escrevendo roteiro hollywoodiano...",
            "Gerando personagens CGI realistas...",
            "Integrando vozes reais dos atores...",
            "Buscando sets de filmagem cinematográficos...",
            "Renderizando cenas em alta definição...",
            "Finalizando edição e sonoplastia..."
        ];
        let idx = 0;
        let msgEl = document.querySelector('#loading-state p');
        setInterval(() => {
            msgEl.innerText = messages[idx % messages.length];
            idx++;
        }, 8000);
    });
</script>

<style>
    body { background-color: #0a0a0a; }
    .tracking-wider { letter-spacing: 0.1rem; }
    .card { border: 1px solid rgba(255,255,255,0.1) !important; }
    .form-control:focus, .form-select:focus {
        background-color: #151515;
        border-color: #0d6efd;
        color: white;
        box-shadow: 0 0 10px rgba(13, 110, 253, 0.2);
    }
</style>
{% endblock %}