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

{% block content %}
<div class="container-fluid p-0 bg-dark" style="height: 100vh; overflow: hidden;">
    <div class="d-flex flex-column h-100">
        <!-- Game Header -->
        <div class="bg-black text-white p-2 d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <a href="{% url 'catalog' %}" class="btn btn-outline-light btn-sm me-3">
                    <i class="bi bi-arrow-left"></i> Voltar
                </a>
                <h5 class="mb-0">{{ game.title }}</h5>
            </div>
            <div>
                <span class="badge bg-primary">{{ game.get_genre_display }}</span>
            </div>
        </div>

        <!-- Game Content -->
        <div class="flex-grow-1 bg-dark position-relative">
            {% if game.external_url %}
                <iframe src="{{ game.external_url }}" 
                        style="width: 100%; height: 100%; border: none;" 
                        allow="autoplay; fullscreen; gamepad"
                        id="game-frame">
                </iframe>
            {% elif game.script_code %}
                <iframe id="game-frame" 
                        style="width: 100%; height: 100%; border: none;" 
                        allow="autoplay; fullscreen; gamepad">
                </iframe>
                <script>
                    const frame = document.getElementById('game-frame');
                    const scriptCode = `{{ game.script_code|escapejs }}`;
                    frame.srcdoc = scriptCode;
                </script>
            {% else %}
                <!-- Fallback to Simulated Game -->
                <div id="game-container" style="width: 100%; height: 100%; background: #111;">
                    <div class="d-flex flex-column justify-content-center align-items-center h-100 text-white">
                        <h3>Jogo Simulado</h3>
                        <p class="text-muted">Este jogo está em desenvolvimento.</p>
                        <canvas id="gameCanvas" width="800" height="600" style="border: 2px solid #333; max-width: 90%; max-height: 80%;"></canvas>
                    </div>
                </div>
                <script>
                    const canvas = document.getElementById('gameCanvas');
                    if (canvas) {
                        const ctx = canvas.getContext('2d');
                        let x = 50, y = 50;
                        function draw() {
                            ctx.fillStyle = 'black';
                            ctx.fillRect(0, 0, canvas.width, canvas.height);
                            ctx.fillStyle = 'lime';
                            ctx.fillRect(x, y, 40, 40);
                            ctx.fillStyle = 'white';
                            ctx.fillText("Use as setas para mover (Simulação)", 10, 20);
                        }
                        window.addEventListener('keydown', (e) => {
                            if (e.key === 'ArrowRight') x += 10;
                            if (e.key === 'ArrowLeft') x -= 10;
                            if (e.key === 'ArrowUp') y -= 10;
                            if (e.key === 'ArrowDown') y += 10;
                            draw();
                        });
                        draw();
                    }
                </script>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
