export function initAnimator() {
    const mascotImg = document.getElementById('mascot-img');
    const statusText = document.getElementById('status-text');
    if (!mascotImg || !statusText) return;

    const style = document.createElement('style');
    style.textContent = `
        @keyframes chillBop {
            0%, 100% { transform: translateY(0) scale(1.0); }
            50% { transform: translateY(-4px) scale(0.97); }
        }
        @keyframes popThink {
            0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
            33% { transform: rotate(8deg) scale(1.1); filter: brightness(1.2); }
            66% { transform: rotate(-8deg) scale(1.1); filter: brightness(1.2); }
        }
        @keyframes happyJump {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-10px) scale(1.1) rotate(5deg); }
        }
        @keyframes ohNoShake {
            0%, 100% { transform: translateX(0); filter: grayscale(0); }
            25% { transform: translateX(-4px) rotate(-5deg); filter: grayscale(0.5); }
            75% { transform: translateX(4px) rotate(5deg); filter: grayscale(0.5); }
        }
        /* Epic Opening Swoop - Larger and Slower */
        @keyframes flyInSwoop {
            0% { transform: translate(-100px, -60px) scale(3) rotate(-45deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(14, 165, 233, 0)); }
            50% { transform: translate(30px, 30px) scale(2.5) rotate(20deg); opacity: 1; filter: drop-shadow(0 25px 30px rgba(14, 165, 233, 0.8)); }
            75% { transform: translate(-15px, -15px) scale(0.8) rotate(-15deg); opacity: 1; filter: drop-shadow(0 10px 15px rgba(14, 165, 233, 0.4)); }
            90% { transform: translate(5px, 8px) scale(1.1) rotate(5deg); opacity: 1; }
            100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 0 transparent); }
        }
        /* Optional CSS Sprite Animation for actual frame-by-frame sprite sheets */
        @keyframes playFlySprite {
            100% { background-position: -100%; }
        }
        
        .mascot-bop { animation: chillBop 2s ease-in-out infinite; }
        .mascot-thinking { animation: popThink 1s ease-in-out infinite; }
        .mascot-action { animation: happyJump 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
        .mascot-err { animation: ohNoShake 0.4s ease-in-out; }
        .mascot-swoop { animation: flyInSwoop 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; z-index: 1000; position: relative; transform-origin: center; }
        
        .mascot-sprite-fly {
            background: url('icons/sprite_fly.png') left center;
            background-size: cover; /* Adjust auto based on sprite structure */
            animation: flyInSwoop 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, playFlySprite 0.8s steps(4) infinite;
            z-index: 1000; position: relative; transform-origin: center;
        }
    `;
    document.head.appendChild(style);

    // Initial swooping opening animation
    mascotImg.classList.add('mascot-swoop');
    // If the user wants to use a sprite image on load, they can uncomment below and comment the line above
    // mascotImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; // hide old img
    // mascotImg.classList.add('mascot-sprite-fly');

    setTimeout(() => {
        mascotImg.classList.remove('mascot-swoop');
        mascotImg.classList.remove('mascot-sprite-fly');
        mascotImg.classList.add('mascot-bop');
    }, 1850);

    const observer = new MutationObserver((mutations) => {
        mutations.forEach(m => {
            if (m.type === 'characterData' || m.type === 'childList') {
                const text = statusText.innerText || '';
                mascotImg.className = '';
                void mascotImg.offsetWidth;

                if (text.includes('Thinking') || text.includes('Analyzing')) {
                    mascotImg.classList.add('mascot-thinking');
                } else if (text.includes('Ready') || text.includes('Complete')) {
                    mascotImg.classList.add('mascot-action');
                    setTimeout(() => mascotImg.classList.add('mascot-bop'), 800);
                } else if (text.includes('Error')) {
                    mascotImg.classList.add('mascot-err');
                    setTimeout(() => mascotImg.classList.add('mascot-bop'), 500);
                } else {
                    mascotImg.classList.add('mascot-bop');
                }
            }
        });
    });

    observer.observe(statusText, { childList: true, characterData: true, subtree: true });
}
