{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="glass-card">
            <h2 class="mb-4">
                {% if project %}
                    <span class="text-info">🪄 Atualizar:</span> {{ project.title }}
                {% else %}
                    <span class="text-info">🚀 Criar Novo Jogo</span> (Geração Autônoma)
                {% endif %}
            </h2>
            <form method="POST" enctype="multipart/form-data" id="gameForm">
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Título do Jogo</label>
                        <input type="text" name="title" class="form-control bg-dark text-white border-secondary" value="{{ project.title }}" placeholder="Ex: Corrida Espacial" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Gênero</label>
                        <select name="genre" class="form-select bg-dark text-white border-secondary">
                            <option value="arcade" {% if project.genre == 'arcade' %}selected{% endif %}>Arcade (Padrão)</option>
                            <option value="platformer" {% if project.genre == 'platformer' %}selected{% endif %}>Platformer</option>
                            <option value="shooter" {% if project.genre == 'shooter' %}selected{% endif %}>Shooter</option>
                            <option value="runner" {% if project.genre == 'runner' %}selected{% endif %}>Runner</option>
                            <option value="puzzle" {% if project.genre == 'puzzle' %}selected{% endif %}>Puzzle</option>
                            <option value="traditional" {% if project.genre == 'traditional' %}selected{% endif %}>Traditional Script</option>
                            <option value="online" {% if project.genre == 'online' %}selected{% endif %}>Online Link (Iframe)</option>
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">💡 Ideia / História / Prompt de IA</label>
                    <textarea name="prompt" rows="3" class="form-control bg-dark text-white border-secondary" placeholder="Descreva sua ideia. A IA escreverá a história, criará o código e gerará o banner automaticamente.">{{ project.prompt }}</textarea>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="use_ai" id="use_ai" checked>
                        <label class="form-check-label text-info fw-bold" for="use_ai">
                            ATIVAR DESENVOLVEDOR AUTÔNOMO (Gera Script + História + Banner automaticamente)
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">URL Externa (Opcional - Para Jogos Existentes)</label>
                    <input type="url" name="external_url" class="form-control bg-dark text-white border-secondary" value="{{ project.external_url|default:'' }}" placeholder="https://exemplo.com/jogo">
                </div>

                <div class="mb-3" id="scriptContainer" style="display: none;">
                    <label class="form-label">Código Script Manual (HTML/JS/CSS)</label>
                    <textarea name="script_code" rows="8" class="form-control bg-dark text-white border-secondary font-monospace" style="font-size: 0.85rem;">{{ project.script_code }}</textarea>
                </div>
                
                <div class="text-center my-3">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleScript()">Ver/Editar Código Manualmente</button>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Imagem de Capa (Opcional)</label>
                    <p class="small text-secondary">Se deixar em branco, a IA gerará um banner profissional baseado no título.</p>
                    {% if project.image_reference %}
                        <div class="mb-2">
                            <img src="{{ project.image_reference.url }}" alt="Ref" style="height: 120px; border-radius: 8px; border: 1px solid #333;">
                        </div>
                    {% endif %}
                    <input type="file" name="image" class="form-control bg-dark text-white border-secondary">
                </div>

                <div class="mt-4 d-flex gap-3">
                    <button type="submit" class="btn btn-primary px-5 rounded-pill btn-lg" id="submitBtn">
                        {% if project %}ATUALIZAR JOGO{% else %}GERAR JOGO COMPLETO{% endif %}
                    </button>
                    <a href="{% url 'admin_dashboard' %}" class="btn btn-outline-light px-5 rounded-pill btn-lg">CANCELAR</a>
                </div>
            </form>
            
            <div id="loadingOverlay" style="display:none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9999; flex-direction:column; align-items:center; justify-content:center;">
                <div class="spinner-border text-info mb-3" style="width: 3rem; height: 3rem;" role="status"></div>
                <h3 class="text-white">IA TRABALHANDO...</h3>
                <p class="text-info">O Desenvolvedor Autônomo está escrevendo a história e o código do seu jogo.</p>
            </div>
        </div>
    </div>
</div>

<script>
function toggleScript() {
    var x = document.getElementById("scriptContainer");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

document.getElementById('gameForm').onsubmit = function() {
    if (document.getElementById('use_ai').checked) {
        document.getElementById('loadingOverlay').style.display = 'flex';
        document.getElementById('submitBtn').disabled = true;
    }
};
</script>
{% endblock %}