// Zaubertrank-Brauküche (Felix Felicis Potion Brewing Engine - SVG Overhaul)
(function() {
    let currentStep = 1; // 1: Ingredients, 2: Stirring, 3: Heat, 4: Done
    const ingredients = {
        dragon: 0,
        mandrake: 0,
        star: 0
    };
    const targetIngredients = {
        dragon: 2,
        mandrake: 1,
        star: 1
    };

    // DOM Elements
    const stepBadge = document.getElementById('stepBadge');
    const stepInstruction = document.getElementById('stepInstruction');
    const stepSubtext = document.getElementById('stepSubtext');
    const step1Wrapper = document.getElementById('step1Wrapper');
    const totalIngredientsCount = document.getElementById('totalIngredientsCount');

    // SVG Elements
    const gradStop1 = document.getElementById('gradStop1');
    const gradStop2 = document.getElementById('gradStop2');
    const gradStop3 = document.getElementById('gradStop3');
    const liquidSurface = document.getElementById('liquidSurface');
    const stirSpoon = document.getElementById('stirSpoon');
    const dropItemAnim = document.getElementById('dropItemAnim');

    // Controls
    const stirPanel = document.getElementById('stirPanel');
    const stirCountSpan = document.getElementById('stirCount');
    const stirBtn = document.getElementById('stirBtn');
    const heatPanel = document.getElementById('heatPanel');
    const tempIndicator = document.getElementById('tempIndicator');
    const heatTimerSpan = document.getElementById('heatTimer');
    const successPanel = document.getElementById('successPanel');

    // Step 1: Add Ingredient
    window.addIngredient = function(type) {
        if (currentStep !== 1) return;
        if (ingredients[type] >= targetIngredients[type]) return;

        ingredients[type]++;
        if (window.soundFX) window.soundFX.playBottleClink();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(30);

        // Update UI Badge
        if (type === 'dragon') {
            document.getElementById('countDragon').innerText = `${ingredients.dragon} / ${targetIngredients.dragon}`;
            if (ingredients.dragon >= targetIngredients.dragon) document.getElementById('ingDragon').classList.add('done');
        } else if (type === 'mandrake') {
            document.getElementById('countMandrake').innerText = `${ingredients.mandrake} / ${targetIngredients.mandrake}`;
            if (ingredients.mandrake >= targetIngredients.mandrake) document.getElementById('ingMandrake').classList.add('done');
        } else if (type === 'star') {
            document.getElementById('countStar').innerText = `${ingredients.star} / ${targetIngredients.star}`;
            if (ingredients.star >= targetIngredients.star) document.getElementById('ingStar').classList.add('done');
        }

        const total = ingredients.dragon + ingredients.mandrake + ingredients.star;
        if (totalIngredientsCount) totalIngredientsCount.innerText = total;

        // Visual drop animation in SVG
        if (dropItemAnim) {
            const icons = { dragon: '🐉', mandrake: '🌿', star: '✨' };
            dropItemAnim.textContent = icons[type];
            dropItemAnim.style.display = 'block';
            dropItemAnim.style.animation = 'ingredientDropAnim 0.5s ease-out forwards';
            setTimeout(() => {
                dropItemAnim.style.display = 'none';
            }, 550);
        }

        // Ripple pulse on liquid
        if (liquidSurface) {
            liquidSurface.style.transform = 'scale(1.06)';
            setTimeout(() => liquidSurface.style.transform = 'scale(1)', 200);
        }

        // Check if all ingredients added
        if (total === 4) {
            setTimeout(startStep2, 600);
        }
    };

    // Step 2: Stirring
    let completedStirs = 0;

    function startStep2() {
        currentStep = 2;
        stepBadge.innerText = "Schritt 2: Gleichmäßig rühren";
        stepInstruction.innerText = "Rühre den Kessel 3-mal um!";
        stepSubtext.innerText = "Tippe auf den großen Rühr-Button, um die Essenzen zu vermengen.";
        if (step1Wrapper) step1Wrapper.style.display = 'none';
        if (stirPanel) stirPanel.style.display = 'flex';

        // Show wooden spoon in cauldron
        if (stirSpoon) stirSpoon.style.display = 'block';

        // Shift liquid color to mystical purple
        if (gradStop1 && gradStop2 && gradStop3) {
            gradStop1.setAttribute('stop-color', '#9b59b6');
            gradStop2.setAttribute('stop-color', '#8e44ad');
            gradStop3.setAttribute('stop-color', '#341f47');
        }

        if (window.soundFX) window.soundFX.playStoneSlide();
    }

    window.doStir = function() {
        if (currentStep !== 2) return;
        completedStirs++;
        if (stirCountSpan) stirCountSpan.innerText = completedStirs;
        if (stirBtn) stirBtn.innerHTML = `🥄 Kessel umrühren! (<span>${completedStirs}</span> / 3)`;

        if (window.soundFX) window.soundFX.playBottleClink();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(35);

        // Animate stirring spoon
        if (stirSpoon) {
            stirSpoon.classList.remove('stirring-active');
            void stirSpoon.offsetWidth; // re-flow
            stirSpoon.classList.add('stirring-active');
        }

        if (completedStirs >= 3) {
            setTimeout(() => {
                if (stirSpoon) stirSpoon.style.display = 'none';
                if (stirPanel) stirPanel.style.display = 'none';
                startStep3();
            }, 600);
        }
    };

    // Step 3: Heat Control
    let currentTemp = 35; // percent (0-100)
    let heatTimer = 0.0;
    let heatInterval = null;

    function startStep3() {
        currentStep = 3;
        stepBadge.innerText = "Schritt 3: Hitze balancieren";
        stepInstruction.innerText = "Pumpe mit dem Blasebalg, um die Flammen zu nähren!";
        stepSubtext.innerText = "Halte die Anzeige für 3 Sekunden im grünen Idealbereich (45% - 85%).";
        if (heatPanel) heatPanel.classList.add('active');

        // Shift liquid color to fiery orange
        if (gradStop1 && gradStop2 && gradStop3) {
            gradStop1.setAttribute('stop-color', '#e67e22');
            gradStop2.setAttribute('stop-color', '#d35400');
            gradStop3.setAttribute('stop-color', '#561d00');
        }

        if (window.soundFX) window.soundFX.playWhoosh();

        heatInterval = setInterval(updateHeatLoop, 50);
    }

    window.pumpHeat = function() {
        if (currentStep !== 3) return;
        currentTemp = Math.min(100, currentTemp + 18);
        if (window.soundFX) window.soundFX.playWhoosh();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate(20);

        const bellows = document.getElementById('bellowsBtn');
        if (bellows) {
            bellows.style.transform = 'scale(0.92)';
            setTimeout(() => bellows.style.transform = 'scale(1)', 100);
        }
    };

    function updateHeatLoop() {
        if (currentStep !== 3) return;

        // Gentle cooling down
        currentTemp = Math.max(0, currentTemp - 0.45);
        if (tempIndicator) tempIndicator.style.width = currentTemp + '%';

        // Check ideal zone (45% to 85%) - forgiving on mobile!
        if (currentTemp >= 45 && currentTemp <= 85) {
            heatTimer += 0.05;
            if (heatTimerSpan) heatTimerSpan.innerText = heatTimer.toFixed(1);
            if (tempIndicator) tempIndicator.style.background = '#2ecc71';
        } else {
            if (tempIndicator) tempIndicator.style.background = 'linear-gradient(90deg, #3498db, #f39c12, #e74c3c)';
        }

        if (heatTimer >= 3.0) {
            clearInterval(heatInterval);
            finishPotionBrew();
        }
    }

    // Step 4: Victory
    async function finishPotionBrew() {
        currentStep = 4;
        stepBadge.innerText = "✅ Trank vollendet!";
        stepBadge.style.background = "rgba(46, 204, 113, 0.3)";
        stepBadge.style.borderColor = "#2ecc71";
        stepBadge.style.color = "#2ecc71";

        stepInstruction.innerText = "Felix Felicis strahlt in reinem Gold!";
        stepSubtext.innerText = "Dein Zaubertrank ist meisterhaft gelungen.";

        if (heatPanel) heatPanel.classList.remove('active');

        // Turn liquid into sparkling golden elixir
        if (gradStop1 && gradStop2 && gradStop3) {
            gradStop1.setAttribute('stop-color', '#fff6a5');
            gradStop2.setAttribute('stop-color', '#ffd700');
            gradStop3.setAttribute('stop-color', '#b7950b');
        }

        if (window.soundFX) window.soundFX.playMagicSuccess();
        if (window.navigator && window.navigator.vibrate) window.navigator.vibrate([50, 100, 150]);

        // API Completion Call
        try {
            const res = await fetch('/api/brew/complete', { method: 'POST' });
            const data = await res.json();
            if (data.new_item && window.notifyNewItem) {
                window.notifyNewItem(data.new_item);
            }
        } catch (e) {
            console.error("Brew complete error:", e);
        }

        if (successPanel) successPanel.style.display = 'block';
    }
})();