{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between align-items-end mb-4">
    <div>
        <h1 class="h2 mb-1">{{ game.title }}</h1>
        <p class="text-info mb-0">Sessão validada. Divirta-se!</p>
    </div>
    <a href="{% url 'catalog' %}" class="btn btn-outline-light rounded-pill">Sair do Jogo</a>
</div>

<div class="glass-card p-0 overflow-hidden shadow-2xl" style="height: 75vh; background: #000; position: relative;">
    {% if game.script_code %}
        <iframe id="gameFrame" srcdoc="{{ game.script_code|escape }}" style="width: 100%; height: 100%; border: none;" allow="autoplay; fullscreen; keyboard"></iframe>
    {% else %}
        <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center">
            <!-- FALLBACK SIMULATED GAME CANVAS -->
            <canvas id="gameCanvas" width="800" height="450" class="img-fluid bg-dark shadow-lg border border-secondary"></canvas>
            <div class="mt-4">
                <p class="text-secondary small">Este jogo ainda não possui script. Exibindo simulador.</p>
                <div class="badge bg-warning text-dark">Aguardando IA</div>
            </div>
        </div>
    {% endif %}
</div>

<div class="mt-4 row">
    <div class="col-md-8">
        <h4 class="mb-3">Sobre o Jogo</h4>
        <p class="text-secondary">{{ game.prompt }}</p>
    </div>
    <div class="col-md-4">
        <div class="p-3 border border-secondary rounded-3 bg-dark bg-opacity-50">
            <h5 class="small text-uppercase text-secondary">Status da Sessão</h5>
            <div class="h4 text-success" id="timer">Ativo ✅</div>
            <div class="small text-secondary mt-1">Sua compra foi validada com sucesso.</div>
        </div>
    </div>
</div>

{% block extra_js %}
{% if not game.script_code %}
<script>
    // Simple canvas animation to simulate a game
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    let x = 400, y = 225, dx = 2, dy = -2;

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        ctx.strokeStyle = '#1e293b';
        ctx.lineWidth = 1;
        for(let i=0; i<canvas.width; i+=40) {
            ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, canvas.height); ctx.stroke();
        }
        for(let i=0; i<canvas.height; i+=40) {
            ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(canvas.height); ctx.stroke();
        }

        ctx.fillStyle = '#6366F1';
        ctx.shadowBlur = 15;
        ctx.shadowColor = '#6366F1';
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI*2);
        ctx.fill();
        
        if(x + dx > canvas.width-20 || x + dx < 20) dx = -dx;
        if(y + dy > canvas.height-20 || y + dy < 20) dy = -dy;
        
        x += dx; y += dy;
        requestAnimationFrame(draw);
    }
    draw();
</script>
{% endif %}
{% endblock %}
{% endblock %}