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

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card glass-card border-0 shadow-lg text-white">
                <div class="card-body p-5">
                    <div class="text-center mb-5">
                        <i class="bi bi-cpu-fill text-cyan display-1 mb-3"></i>
                        <h1 class="display-4 fw-bold text-gradient-neon">STUDIO AI AUTOMÁTICO</h1>
                        <p class="lead text-muted">Crie Super-Produções (Filmes e Séries) totalmente automatizadas com IA.</p>
                    </div>

                    <form action="{% url 'generate_production' %}" method="POST" id="aiForm">
                        {% csrf_token %}
                        <div class="mb-4">
                            <label class="form-label text-cyan fw-bold">TIPO DE PRODUÇÃO</label>
                            <select name="project_type" class="form-select bg-dark text-white border-secondary">
                                <option value="MOVIE">Longa-Metragem (Filme)</option>
                                <option value="SERIES">Série de TV</option>
                                <option value="SHORT">Curta-Metragem</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-cyan fw-bold">CATEGORIA / GÊNERO</label>
                            <select name="category" class="form-select bg-dark text-white border-secondary">
                                <option value="Sci-Fi">Ficção Científica</option>
                                <option value="Ação">Ação & Aventura</option>
                                <option value="Drama">Drama Cinematográfico</option>
                                <option value="Terror">Terror Psicológico</option>
                                <option value="Fantasia">Fantasia Épica</option>
                                <option value="Cyberpunk">Cyberpunk / Neon-Noir</option>
                            </select>
                        </div>

                        <div class="mb-4">
                            <label class="form-label text-cyan fw-bold">TEMA OU IDEIA CENTRAL</label>
                            <textarea name="theme" class="form-control bg-dark text-white border-secondary" rows="3" placeholder="Ex: Uma guerra entre IAs e humanos em um Rio de Janeiro futurista..."></textarea>
                            <div class="form-text text-muted">A IA criará personagens reais, cenas e roteiro completo com base nisso.</div>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-lg btn-neon-purple fw-bold py-3" id="generateBtn">
                                <span class="spinner-border spinner-border-sm d-none" id="loader"></span>
                                <i class="bi bi-magic me-2"></i> LANÇAR SUPER-PRODUÇÃO AGORA
                            </button>
                        </div>
                    </form>
                    
                    <div id="loadingMsg" class="text-center mt-4 d-none">
                        <p class="text-cyan animate-pulse">A IA está gerando o roteiro, personagens e cenas... Aguarde o processamento cinematográfico.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('aiForm').onsubmit = function() {
        document.getElementById('generateBtn').disabled = true;
        document.getElementById('loader').classList.remove('d-none');
        document.getElementById('loadingMsg').classList.remove('d-none');
    };
</script>

<style>
    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .5; }
    }
</style>
{% endblock %}
