@extends('layouts.app')
@section('title', 'Mini-jeu')
@section('content')
<div class="fond3 equilibre">
    <div>
        <h2 class="text-center" style="color:var(--blanc);">Mini-Jeu : Attrape les gâteaux et fais gaffe aux souris !</h2>
        <div class="text-center" style="margin-bottom:10px; color:var(--blanc);">
            Temps restant : <span id="time">60</span>s |
            Score : <span id="score">0</span> |
            Meilleur score : <span id="bestScore">{{ $player->best_score ?? 0 }}</span>
        </div>
        <canvas id="gameCanvas" width="600" height="400" class="gameCanvas"> </canvas>
        <button id="startBtn" class="bouton bouton2 startbtn">Commencer le jeu</button>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    // Joueur
    const playerImg = new Image();
    playerImg.src = '/images/player.png';
    const playerWidth = 100;
    const playerHeight = 100;
    let playerX = canvas.width / 2 - playerWidth / 2;
    const playerY = canvas.height - playerHeight;

    let leftPressed = false;
    let rightPressed = false;

    // Items
    let items = [];
    let gameInterval;
    let animationId;

    // Score
    let score = 0;
    const scoreDisplay = document.getElementById('score');
    let bestScore = {{ $player->best_score ?? 0 }};
    const bestScoreDisplay = document.getElementById('bestScore');

    // Timer
    let gameTime = 60;
    const timeDisplay = document.getElementById('time');
    let timerInterval;

    // Contrôles clavier
    document.addEventListener("keydown", e => {
        if(e.key === "ArrowLeft") leftPressed = true;
        if(e.key === "ArrowRight") rightPressed = true;
    });
    document.addEventListener("keyup", e => {
        if(e.key === "ArrowLeft") leftPressed = false;
        if(e.key === "ArrowRight") rightPressed = false;
    });

    // Créer un item
    function createItem() {
        const type = Math.random() < 0.5 ? 'gift' : 'mouse';
        const item = {
            x: Math.random() * (canvas.width - 20),
            y: -20,
            width: 40,
            height: 40,
            type: type,
            img: new Image()
        };
        item.img.onload = () => items.push(item);
        item.img.src = type === 'gift' ? '/images/cake.png' : '/images/mouse.png';
    }

    // Dessiner
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Déplacement joueur
        if(leftPressed && playerX > 0) playerX -= 7;
        if(rightPressed && playerX + playerWidth < canvas.width) playerX += 7;

        // Dessiner joueur
        ctx.drawImage(playerImg, playerX, playerY, playerWidth, playerHeight);

        // Dessiner items
        items.forEach((item, index) => {
            item.y += 3; // vitesse de descente
            ctx.drawImage(item.img, item.x, item.y, item.width, item.height);

            // Collision avec hitbox réduite
            const hitboxPadding = 20;
            const hitboxX = playerX + hitboxPadding;
            const hitboxY = playerY + hitboxPadding;
            const hitboxWidth = playerWidth - hitboxPadding * 2;
            const hitboxHeight = playerHeight - hitboxPadding * 2;

            if(item.y + item.height >= hitboxY &&
               item.y <= hitboxY + hitboxHeight &&
               item.x + item.width >= hitboxX &&
               item.x <= hitboxX + hitboxWidth) {

                score += item.type === 'gift' ? 1 : -1;
                scoreDisplay.textContent = score;

                items.splice(index,1);
            }

            // Supprimer si hors canvas
            if(item.y > canvas.height) items.splice(index,1);
        });

        animationId = requestAnimationFrame(draw);
    }

    // Sauvegarder le meilleur score à la fin de la partie
    function saveBestScore() {
        fetch('/deborah/game/{{ $player->code }}/score', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ score: score })
        })
        .then(res => res.json())
        .then(data => {
            bestScore = data.best_score;
            bestScoreDisplay.textContent = bestScore;
        });
    }

    // Démarrer le jeu
    document.getElementById('startBtn').addEventListener('click', () => {
        items = [];
        if(gameInterval) clearInterval(gameInterval);
        if(animationId) cancelAnimationFrame(animationId);
        if(timerInterval) clearInterval(timerInterval);

        // Réinitialiser score et timer
        score = 0;
        gameTime = 60;
        scoreDisplay.textContent = score;
        timeDisplay.textContent = gameTime;

        draw();
        gameInterval = setInterval(createItem, 800);

        // Timer
        timerInterval = setInterval(() => {
            gameTime--;
            timeDisplay.textContent = gameTime;

            if(gameTime <= 0){
                clearInterval(timerInterval);
                clearInterval(gameInterval);
                cancelAnimationFrame(animationId);

                // Afficher "JEU FINI !" sur le canvas
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.fillStyle = 'black';
                ctx.font = '48px Arial';
                ctx.textAlign = 'center';
                ctx.fillText('JEU FINI !', canvas.width/2, canvas.height/2);

                saveBestScore(); // mettre à jour best_score si record

                // Laisser le message 10s
                setTimeout(() => {
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                }, 10000);
            }
        }, 1000);
    });
});
</script>
@endsection