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

{% block content %}
<div class="container-fluid px-5">
    <div class="row g-4">
        <!-- Sidebar Controls -->
        <div class="col-lg-3">
            <div class="glass p-4 studio-sidebar">
                <div class="d-flex align-items-center mb-4">
                    <div class="flex-grow-1">
                        <h4 class="font-outfit fw-bold mb-0">{{ project.title }}</h4>
                        <span class="badge badge-genre">{{ project.get_genre_display }}</span>
                    </div>
                </div>

                <hr class="opacity-10">

                <div class="mb-4">
                    <label class="small text-muted text-uppercase fw-bold mb-2 d-block">AI Generation Summary</label>
                    <p class="small">{{ project.config_json.ai_summary }}</p>
                </div>

                <div class="mb-4">
                    <label class="small text-muted text-uppercase fw-bold mb-2 d-block">Entity Configuration</label>
                    <div class="code-editor">
                        {{ config_json }}
                    </div>
                </div>

                <div class="d-grid gap-2">
                    <button class="btn btn-outline-light btn-sm">Export Code (C# / JS)</button>
                    <button class="btn btn-outline-light btn-sm">Build for Android (APK)</button>
                    <button class="btn btn-outline-light btn-sm">Download Assets (.zip)</button>
                </div>
            </div>
        </div>

        <!-- Main Viewport -->
        <div class="col-lg-9">
            <div class="glass p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="font-outfit fw-bold mb-0">Live Preview (Web HTML5)</h5>
                    <div>
                        <button class="btn btn-success btn-sm me-2" onclick="restartGame()">Run Build</button>
                        <button class="btn btn-secondary btn-sm">Debug Mode</button>
                    </div>
                </div>

                <div class="game-viewport" id="game-container">
                    <canvas id="gameCanvas"></canvas>
                    <div id="game-overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); flex-direction: column;">
                        <h2 class="font-outfit fw-bold mb-3">AI Engine Initialized</h2>
                        <p>Press 'Run Build' to compile and play</p>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="glass p-3 text-center">
                            <h3 class="fw-bold text-primary mb-1">0</h3>
                            <span class="small text-muted">Bugs Detected</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="glass p-3 text-center">
                            <h3 class="fw-bold text-secondary mb-1">142</h3>
                            <span class="small text-muted">Assets Generated</span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="glass p-3 text-center">
                            <h3 class="fw-bold text-accent mb-1">60</h3>
                            <span class="small text-muted">FPS Stable</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('game-overlay');
    let animationId;
    let particles = [];

    function resize() {
        const container = document.getElementById('game-container');
        canvas.width = container.clientWidth;
        canvas.height = container.clientHeight;
    }

    window.addEventListener('resize', resize);
    resize();

    function restartGame() {
        overlay.style.display = 'none';
        if (animationId) cancelAnimationFrame(animationId);
        
        // Simple "Game" Simulation: Neon Particles
        particles = [];
        for(let i=0; i<50; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                vx: (Math.random() - 0.5) * 5,
                vy: (Math.random() - 0.5) * 5,
                color: Math.random() > 0.5 ? '#6366F1' : '#0EA5E9',
                size: Math.random() * 5 + 2
            });
        }
        animate();
    }

    function animate() {
        ctx.fillStyle = 'rgba(11, 15, 26, 0.2)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        particles.forEach(p => {
            p.x += p.vx;
            p.y += p.vy;

            if(p.x < 0 || p.x > canvas.width) p.vx *= -1;
            if(p.y < 0 || p.y > canvas.height) p.vy *= -1;

            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.fill();
            
            // Neon Glow
            ctx.shadowBlur = 15;
            ctx.shadowColor = p.color;
        });

        animationId = requestAnimationFrame(animate);
    }
</script>
{% endblock %}
