{{--
    Decorative pixel-art cat mascot, bottom-right corner of every App panel
    page (injected once via a panel render hook — see AppPanelProvider).

    The sprite sheet (public/img/cat/cat-sprite.png, generated by tracing the
    user-supplied reference pixel-art cat — see scratchpad/build_james_sprite.py
    for the generator) has 8 frames of 128x128px, displayed at 160x160, in
    order: idle_a, idle_b, look, play, startled, walk_a, walk_b, peek.

    Everything below is a single self-contained IIFE: no Alpine/Livewire
    dependency, so it survives Livewire's wire:navigate page swaps without
    needing to re-hydrate any component state. The "recently fled" flag is
    kept in localStorage so a click doesn't just reset on the next page load.
--}}
<div
    id="cat-companion"
    style="
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        width: 160px;
        height: 160px;
        z-index: 40;
        cursor: pointer;
        will-change: transform;
    "
>
    <div
        id="cat-companion-sprite"
        style="
            width: 160px;
            height: 160px;
            background-image: url('{{ asset('img/cat/cat-sprite.png') }}');
            background-repeat: no-repeat;
            background-size: 1280px 160px;
            image-rendering: pixelated;
        "
    ></div>
</div>

<script>
(function () {
    // Guard against double-init if the render hook's markup is ever
    // re-injected (e.g. a future full page reload while this script is
    // still attached from a previous DOM).
    if (window.__catCompanionInit) return;
    window.__catCompanionInit = true;

    var FRAME = 160;
    var FRAMES = { idle_a: 0, idle_b: 1, look: 2, play: 3, startled: 4, walk_a: 5, walk_b: 6, peek: 7 };
    var FLED_KEY = 'catCompanionFledAt';
    var FLED_DURATION_MS = 45 * 1000; // how long the cat stays away

    var el = document.getElementById('cat-companion');
    var sprite = document.getElementById('cat-companion-sprite');
    if (!el || !sprite) return;

    function setFrame(name) {
        sprite.style.backgroundPositionX = (-FRAMES[name] * FRAME) + 'px';
    }

    function setPosition(x, y) {
        el.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
    }

    // Animates the run/return slide by hand (rAF) rather than a CSS
    // transition, so we can add a little hopping bounce instead of a flat glide.
    function animateSlide(fromX, fromY, toX, toY, duration, onDone) {
        var start = null;
        function step(ts) {
            if (start === null) start = ts;
            var t = Math.min(1, (ts - start) / duration);
            var eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
            var x = fromX + (toX - fromX) * eased;
            var y = fromY + (toY - fromY) * eased + Math.sin(t * Math.PI * 3) * -8;
            setPosition(x, y);
            if (t < 1) requestAnimationFrame(step);
            else if (onDone) onDone();
        }
        requestAnimationFrame(step);
    }

    function runWalkCycle(duration, onTick) {
        var walkFrame = 'walk_a';
        setFrame(walkFrame);
        var anim = setInterval(function () {
            walkFrame = walkFrame === 'walk_a' ? 'walk_b' : 'walk_a';
            setFrame(walkFrame);
            if (onTick) onTick();
        }, 120);
        setTimeout(function () { clearInterval(anim); }, duration);
    }

    var idleTimer, flourishTimeout, blinkState = 'idle_a';

    function startIdleLoop() {
        clearInterval(idleTimer);
        idleTimer = setInterval(function () {
            blinkState = blinkState === 'idle_a' ? 'idle_b' : 'idle_a';
            if (!el.classList.contains('is-away')) setFrame(blinkState);
        }, 2600);
        scheduleFlourish();
    }

    function scheduleFlourish() {
        clearTimeout(flourishTimeout);
        flourishTimeout = setTimeout(function () {
            if (el.classList.contains('is-away')) return;
            var flourish = Math.random() < 0.5 ? 'look' : 'play';
            setFrame(flourish);
            setTimeout(function () {
                if (!el.classList.contains('is-away')) setFrame(blinkState);
                scheduleFlourish();
            }, 1500);
        }, 6000 + Math.random() * 9000);
    }

    function flee() {
        if (el.classList.contains('is-away')) return;
        el.classList.add('is-away');
        clearTimeout(flourishTimeout);

        // A quick startled beat before bolting — much more "alive" than
        // just sliding away instantly.
        setFrame('startled');

        setTimeout(function () {
            runWalkCycle(650);
            animateSlide(0, 0, 190, 30, 650, function () {
                localStorage.setItem(FLED_KEY, String(Date.now()));
                scheduleReturn(FLED_DURATION_MS);
            });
        }, 220);
    }

    function scheduleReturn(delay) {
        setTimeout(peekThenReturn, delay);
    }

    function peekThenReturn() {
        setPosition(40, 0);
        setFrame('peek');

        setTimeout(function () {
            runWalkCycle(650);
            animateSlide(40, 0, 0, 0, 650, function () {
                el.classList.remove('is-away');
                localStorage.removeItem(FLED_KEY);
                setFrame(blinkState);
                startIdleLoop();
            });
        }, 1500);
    }

    el.addEventListener('click', flee);

    // Resume a still-fled state across a reload/navigation instead of
    // popping back in as if nothing happened.
    var fledAt = parseInt(localStorage.getItem(FLED_KEY) || '0', 10);
    if (fledAt && Date.now() - fledAt < FLED_DURATION_MS) {
        el.classList.add('is-away');
        setPosition(190, 30);
        setFrame('walk_a');
        scheduleReturn(FLED_DURATION_MS - (Date.now() - fledAt));
    } else {
        localStorage.removeItem(FLED_KEY);
        setFrame(blinkState);
        startIdleLoop();
    }
})();
</script>