{% 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 %}Editar Jogo: {{ project.title }}{% else %}Criar Novo Jogo{% endif %}</h2>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Título do Jogo</label>
                        <input type="text" name="title" class="form-control bg-dark text-white border-secondary" value="{{ project.title }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Gênero</label>
                        <select name="genre" class="form-select bg-dark text-white border-secondary">
                            <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">URL Externa (Para Jogos Online)</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">
                    <small class="text-secondary">Se preenchido, o jogo será carregado via Iframe desta URL.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Prompt de IA / Descrição (Transforma palavras em jogos reais)</label>
                    <textarea name="prompt" rows="3" class="form-control bg-dark text-white border-secondary">{{ project.prompt }}</textarea>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="use_ai" id="use_ai">
                        <label class="form-check-label text-info" for="use_ai">
                            Usar IA para gerar/atualizar o script do jogo (Transformar descrição em Código Script)
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Código Script (HTML/JS/CSS Completo)</label>
                    <textarea name="script_code" rows="12" class="form-control bg-dark text-white border-secondary font-monospace" style="font-size: 0.85rem;">{{ project.script_code }}</textarea>
                    <small class="text-secondary">Se usar a opção de IA, este campo será preenchido automaticamente.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Imagem de Referência (Capa do Jogo)</label>
                    {% if project.image_reference %}
                        <div class="mb-2">
                            <img src="{{ project.image_reference.url }}" alt="Ref" style="height: 100px; border-radius: 8px;">
                        </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">SALVAR JOGO</button>
                    <a href="{% url 'admin_dashboard' %}" class="btn btn-outline-light px-5 rounded-pill">VOLTAR</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
