{% extends "templates/base.html" %}
{% set game_name = "Moje halloweenská dýně" %}
{% block content %}

<div id="appContainer" class="full-screen-app bg-light">
    
    <button id="fsBtn" class="btn btn-outline-secondary position-absolute top-0 end-0 m-3 shadow" style="z-index: 10050;" onclick="toggleFullscreen()">
        <i class="fa-solid fa-expand fa-2x"></i>
    </button>

    <!-- Úvodní obrazovka s generováním tajného kódu pěstitele -->
    <div id="setupScreen" class="container d-flex flex-column justify-content-center align-items-center h-100 text-center">
        <div class="mb-3">
            <i class="fa-solid fa-wand-magic-sparkles text-warning display-1"></i>
        </div>
        <h1 class="mb-4 text-center fw-bold text-dark display-5">
            Vypěstuj si halloweenskou dýni!
        </h1>
        <div id="loadingPin" class="text-center mb-4">
            <div class="spinner-border text-warning mb-3" style="width: 3rem; height: 3rem;" role="status"></div>
            <h4 class="text-secondary">Hledám pro tebe unikátní barvy semínka...</h4>
        </div>
        <div id="pinReady" class="text-center w-100" style="display: none;">
            <h4 class="mb-4 text-secondary">Tohle je tvůj tajný kód pěstitele. Dobře si ho pamatuj na stanovištích!</h4>
            <div class="d-flex justify-content-center gap-3 mb-5" id="pinDisplay">
                <div class="pin-slot border rounded-circle shadow-lg" style="width: 100px; height: 100px;"></div>
                <div class="pin-slot border rounded-circle shadow-lg" style="width: 100px; height: 100px;"></div>
                <div class="pin-slot border rounded-circle shadow-lg" style="width: 100px; height: 100px;"></div>
            </div>
            <button id="startBtn" class="btn btn-warning btn-lg px-5 py-4 fs-1 shadow-lg fw-bold text-dark" onclick="startGame()">
                <i class="fa-solid fa-seedling"></i> ZASADIT SEMÍNKO!
            </button>
        </div>
    </div>

    <!-- Hlavní herní obrazovka -->
    <div id="gameScreen" class="container-fluid flex-column h-100 d-none p-0" style="position: relative; overflow: hidden; background: linear-gradient(180deg, #fbf7f0 0%, #f0ede6 100%);">
        
        <!-- Zobrazení kódu pěstitele v rohu -->
        <div class="d-flex gap-2 position-absolute top-0 start-0 m-3" style="z-index: 20;">
            <div class="border rounded-circle shadow-sm mini-pin" style="width: 36px; height: 36px;"></div>
            <div class="border rounded-circle shadow-sm mini-pin" style="width: 36px; height: 36px;"></div>
            <div class="border rounded-circle shadow-sm mini-pin" style="width: 36px; height: 36px;"></div>
        </div>

        <!-- Výstražný box (Ošetřování / Nemocná dýně) -->
        <div id="alertBox" class="alert text-center shadow-lg position-absolute start-50 translate-middle-x" 
             style="display: none; top: 8vh; width: 90%; max-width: 520px; z-index: 100; border-radius: 16px;">
            <h2 id="alertHeading" class="alert-heading fw-bold fs-3 mb-1">Pozor!</h2>
            <p class="fs-5 mb-0" id="alertReason">Zpráva...</p>
        </div>

        <!-- Hlavní vizuál dýně a ukazatel růstu -->
        <div class="d-flex flex-column align-items-center justify-content-end flex-grow-1 pb-3" style="min-height: 0;">
            <div class="position-relative d-flex justify-content-center align-items-end" style="flex-grow: 1; min-height: 0;">
                <img id="flowerVisual" src="pumpkin_stage1.png" alt="Halloweenská dýně">
            </div>
            
            <div class="text-center w-100 px-4 mt-3 flex-shrink-0" style="max-width: 650px;">
                <div class="d-flex justify-content-between align-items-center mb-1">
                    <h3 class="mb-0 fw-bold text-dark"><span id="stageText">1. Semínko v zemi</span></h3>
                    <span id="growthBadge" class="badge bg-warning text-dark px-3 py-2 fs-6 rounded-pill fw-bold">Roste</span>
                </div>
                <div class="progress shadow-sm" style="height: 38px; font-size: 1.3rem; border-radius: 20px; border: 3px solid #fff; background-color: #e9ecef;">
                    <div id="xpBar" class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark fw-bold" role="progressbar" style="width: 0%;">0 %</div>
                </div>
            </div>
        </div>

        <!-- Spodní lišta se třemi základními potřebami dýně -->
        <div class="row text-center w-100 m-0 pb-3 pt-2 bg-white border-top shadow-sm flex-shrink-0">
            <div class="col-4 px-2">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
                    <i class="fa-solid fa-droplet text-primary fs-3"></i>
                    <span class="fw-bold d-none d-sm-inline text-secondary">Zálivka</span>
                </div>
                <div class="progress shadow-sm" style="height: 36px; border: 2px solid #e2e8f0; border-radius: 12px;">
                    <div id="waterBar" class="progress-bar bg-primary fs-6 fw-bold" style="width: 50%;">50 %</div>
                </div>
            </div>
            
            <div class="col-4 px-2">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
                    <i class="fa-solid fa-sun text-warning fs-3"></i>
                    <span class="fw-bold d-none d-sm-inline text-secondary">Slunce</span>
                </div>
                <div class="progress shadow-sm" style="height: 36px; border: 2px solid #e2e8f0; border-radius: 12px;">
                    <div id="sunBar" class="progress-bar bg-warning fs-6 fw-bold text-dark" style="width: 50%;">50 %</div>
                </div>
            </div>
            
            <div class="col-4 px-2">
                <div class="d-flex align-items-center justify-content-center gap-2 mb-1">
                    <i class="fa-solid fa-seedling fs-3" style="color: #2e7d32;"></i>
                    <span class="fw-bold d-none d-sm-inline text-secondary">Živiny</span>
                </div>
                <div class="progress shadow-sm" style="height: 36px; border: 2px solid #e2e8f0; border-radius: 12px;">
                    <div id="fertBar" class="progress-bar fs-6 fw-bold text-white" style="background-color: #2e7d32; width: 50%;">50 %</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Výherní obrazovka (Vypěstovaná a vyřezaná dýně) -->
    <div id="winScreen" class="container py-4 flex-column h-100 text-center justify-content-center align-items-center d-none" style="background: radial-gradient(circle, #2d1345 0%, #110520 100%); color: white;">
        <h1 class="display-3 fw-bold text-warning mb-2">
            <i class="fa-solid fa-ghost"></i> Halloweenský rituál dokončen!
        </h1>
        <h3 class="mb-4 text-light">Vypěstoval a probudil jsi dokonalou strašidelnou dýni Jack-o'-Lantern!</h3>
        
        <img id="winVisual" src="pumpkin_win.png" class="pulse-anim mb-4" style="max-height: 44vh; width: 85vw; max-width: 550px; object-fit: contain;" alt="Vítězná halloweenská dýně">
        
        <div>
            <button class="btn btn-warning btn-lg px-5 py-3 fs-2 shadow fw-bold mt-2 text-dark" onclick="resetGame()">
                <i class="fa-solid fa-seedling"></i> ZASADIT NOVOU DÝNI
            </button>
        </div>
    </div>

</div>

<style>
    .full-screen-app { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; }
    body { user-select: none; -webkit-user-select: none; }
    
    #flowerVisual { 
        height: auto; 
        max-height: 48vh; 
        width: 82vw; 
        max-width: 560px; 
        object-fit: contain; 
        transition: all 0.4s ease-out; 
        display: block; 
        margin: 0 auto; 
    }

    .pulse-anim { animation: pulse 2s infinite ease-in-out; }
    @keyframes pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(255, 170, 0, 0.4)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 30px rgba(255, 170, 0, 0.9)); } 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(255, 170, 0, 0.4)); } }
</style>

<script>
    forrestHubLib = ForrestHubLib.getInstance(true);
    const varPrefix = "flower_"; 
    const availableColors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
    
    let myPin = [];
    let myId = "";
    let myFlower = { status: "ok", water: 50, sun: 50, fertilizer: 50, stage: 1, xp: 0 };
    let globalSettings = { speedSlow: 1, speedNormal: 2, speedPerfect: 4 };
    let gameLoop;

    document.addEventListener('DOMContentLoaded', generateUniquePin);

    function toggleFullscreen() {
        const el = document.documentElement;
        if (!document.fullscreenElement) {
            if (el.requestFullscreen) el.requestFullscreen();
            else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
        }
    }

    async function generateUniquePin() {
        try {
            let isUnique = false;
            let safetyCounter = 0;
            while (!isUnique && safetyCounter < 50) {
                let tempPin = [
                    availableColors[Math.floor(Math.random() * availableColors.length)],
                    availableColors[Math.floor(Math.random() * availableColors.length)],
                    availableColors[Math.floor(Math.random() * availableColors.length)]
                ];
                let tempId = tempPin.join('_');
                let exists = await forrestHubLib.dbVarKeyExists(varPrefix + tempId);
                if (!exists) { myPin = tempPin; myId = tempId; isUnique = true; }
                safetyCounter++;
            }
            document.querySelectorAll('.pin-slot').forEach((slot, index) => { slot.style.backgroundColor = myPin[index]; });
            document.getElementById('loadingPin').style.display = 'none';
            document.getElementById('pinReady').style.display = 'block';
        } catch (error) { console.error(error); }
    }

    async function startGame() {
        await forrestHubLib.dbVarSetKey(varPrefix + myId, myFlower);
        document.querySelectorAll('.mini-pin').forEach((slot, idx) => { slot.style.backgroundColor = myPin[idx]; });
        document.getElementById('setupScreen').classList.add('d-none');
        document.getElementById('setupScreen').classList.remove('d-flex');
        document.getElementById('gameScreen').classList.remove('d-none');
        document.getElementById('gameScreen').classList.add('d-flex');
        updateUI();
        startMainLoop();
    }

    function startMainLoop() {
        gameLoop = setInterval(async () => {
            if (myFlower.status === "won") return; 
            try {
                let settingsData = await forrestHubLib.dbVarGetKey("global_flower_settings");
                if (settingsData) { globalSettings = settingsData; }
                let serverData = await forrestHubLib.dbVarGetKey(varPrefix + myId);
                if (serverData) {
                    if (myFlower.status === "sick" && serverData.status === "ok") {
                        myFlower.status = "ok";
                        myFlower.water = serverData.water; myFlower.sun = serverData.sun; myFlower.fertilizer = serverData.fertilizer;
                    }
                    else if (serverData.status === "busy" && myFlower.status !== "busy") { myFlower.status = "busy"; } 
                    else if ((serverData.status === "ok" || serverData.status === "sick") && myFlower.status === "busy") {
                        myFlower.status = serverData.status; 
                        myFlower.water = serverData.water; myFlower.sun = serverData.sun; myFlower.fertilizer = serverData.fertilizer;
                    }
                    if (myFlower.status !== "busy" && myFlower.status !== "sick") {
                        if (serverData.water > myFlower.water) myFlower.water = serverData.water;
                        if (serverData.sun > myFlower.sun) myFlower.sun = serverData.sun;
                        if (serverData.fertilizer > myFlower.fertilizer) myFlower.fertilizer = serverData.fertilizer;
                    }
                }
            } catch(e) {}

            if (myFlower.status !== "ok") { updateUI(); return; }

            // Každé 2 vteřiny dýně spotřebuje 1 jednotku vláhy, slunce a živin
            myFlower.water = Math.max(0, myFlower.water - 1);
            myFlower.sun = Math.max(0, myFlower.sun - 1);
            myFlower.fertilizer = Math.max(0, myFlower.fertilizer - 1);

            // Při překročení 100 % dýně onemocní (přelití / spálení sluncem / přehnojení)
            if (myFlower.water > 100 || myFlower.sun > 100 || myFlower.fertilizer > 100) myFlower.status = "sick";

            if (myFlower.status === "ok") {
                let isStarving = (myFlower.water < 15 || myFlower.sun < 15 || myFlower.fertilizer < 15);
                let isVerySlow = !isStarving && (myFlower.water < 30 || myFlower.sun < 30 || myFlower.fertilizer < 30);
                let isPerfect = (myFlower.water >= 60 && myFlower.water <= 90 && myFlower.sun >= 60 && myFlower.sun <= 90 && myFlower.fertilizer >= 60 && myFlower.fertilizer <= 90);
                
                if (isStarving) {
                    myFlower.xp -= 1;
                    if (myFlower.xp < 0) {
                        if (myFlower.stage > 1) { myFlower.stage--; myFlower.xp = 90; } 
                        else { myFlower.xp = 0; }
                    }
                } else {
                    let growthSpeed = isVerySlow ? globalSettings.speedSlow : (isPerfect ? globalSettings.speedPerfect : globalSettings.speedNormal);
                    myFlower.xp += growthSpeed;
                    if (myFlower.xp >= 100) {
                        if (myFlower.stage < 4) { myFlower.stage++; myFlower.xp = 0; } 
                        else { myFlower.xp = 100; myFlower.status = "won"; showWinScreen(); }
                    }
                }
            }
            updateUI();
            if (myFlower.status !== "won") await forrestHubLib.dbVarSetKey(varPrefix + myId, myFlower);
        }, 2000);
    }

    function updateUI() {
        if (myFlower.status === "won") return;
        document.getElementById('waterBar').style.width = `${Math.min(100, myFlower.water)}%`;
        document.getElementById('waterBar').innerText = `${myFlower.water}%`;
        document.getElementById('sunBar').style.width = `${Math.min(100, myFlower.sun)}%`;
        document.getElementById('sunBar').innerText = `${myFlower.sun}%`;
        document.getElementById('fertBar').style.width = `${Math.min(100, myFlower.fertilizer)}%`;
        document.getElementById('fertBar').innerText = `${myFlower.fertilizer}%`;
        
        let totalProgress = Math.floor(((myFlower.stage - 1) * 25) + (myFlower.xp / 4));
        document.getElementById('xpBar').style.width = `${totalProgress}%`; 
        document.getElementById('xpBar').innerText = `${totalProgress}%`;

        const visual = document.getElementById('flowerVisual');
        const alertBox = document.getElementById('alertBox');
        const badge = document.getElementById('growthBadge');
        
        if (myFlower.stage === 1) { 
            document.getElementById('stageText').innerText = "1. Semínko v zemi"; 
            visual.src = "pumpkin_stage1.png"; 
        } else if (myFlower.stage === 2) { 
            document.getElementById('stageText').innerText = "2. Kvetoucí šlahoun"; 
            visual.src = "pumpkin_stage2.png"; 
        } else if (myFlower.stage === 3) { 
            document.getElementById('stageText').innerText = "3. Zrající dýně"; 
            visual.src = "pumpkin_stage3.png"; 
        } else if (myFlower.stage === 4) { 
            document.getElementById('stageText').innerText = "4. Velká zralá dýně"; 
            visual.src = "pumpkin_stage4.png"; 
        }

        let isStarving = (myFlower.water < 15 || myFlower.sun < 15 || myFlower.fertilizer < 15);
        let isPerfect = (myFlower.water >= 60 && myFlower.water <= 90 && myFlower.sun >= 60 && myFlower.sun <= 90 && myFlower.fertilizer >= 60 && myFlower.fertilizer <= 90);

        if (isStarving) {
            badge.className = "badge bg-danger text-white px-3 py-2 fs-6 rounded-pill fw-bold";
            badge.innerText = "Chřadne (-1 XP)";
        } else if (isPerfect) {
            badge.className = "badge bg-success text-white px-3 py-2 fs-6 rounded-pill fw-bold";
            badge.innerText = "Ideální růst (4x XP)";
        } else {
            badge.className = "badge bg-warning text-dark px-3 py-2 fs-6 rounded-pill fw-bold";
            badge.innerText = "Běžný růst";
        }

        if (myFlower.status === "busy") {
            visual.style.filter = "drop-shadow(0 0 20px #0dcaf0) brightness(1.05)";
            alertBox.style.display = 'block'; alertBox.className = "alert alert-info text-center shadow-lg position-absolute start-50 translate-middle-x";
            document.getElementById('alertHeading').innerText = "O dýni se pečuje";
            document.getElementById('alertReason').innerText = "Běží ošetřování na stanici...";
        } 
        else if (myFlower.status === "sick") {
            visual.style.filter = "drop-shadow(0 0 30px #dc3545) sepia(60%)"; 
            alertBox.style.display = 'block'; alertBox.className = "alert alert-danger text-center shadow-lg position-absolute start-50 translate-middle-x";
            document.getElementById('alertHeading').innerText = "Dýně chřadne a vadne!";
            document.getElementById('alertReason').innerText = "Rychle utíkej k Rostlinnému lékaři!";
        } 
        else { visual.style.filter = "none"; alertBox.style.display = 'none'; }
    }

    function showWinScreen() {
        document.getElementById('gameScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('winScreen').classList.replace('d-none', 'd-flex');
    }

    async function resetGame() {
        try { await forrestHubLib.dbVarDeleteKey(varPrefix + myId); } catch(e) {}
        location.reload(); 
    }
</script>

{% endblock %}