{{--
    x-classroom-reactions-bar
    Floating emoji reactions bar — positioned by parent #reactions-wrapper

    FIX BUG-R1: Added client-side throttle (1 reaction per 1.5 seconds per user).
    FIX BUG-R2: reaction-float-container uses overflow:visible so reactions
                don't clip at the top of the viewport.
    FIX BUG-C1: sendReaction() now POSTs to /classroom/{session}/reaction
                which broadcasts ClassroomReactionBroadcast (not ClassroomChatPosted).
--}}
@props(['sessionId'])

<div id="reactions-bar"
     class="flex items-center gap-2 bg-gray-800/90 backdrop-blur-sm rounded-full px-4 py-2 border border-gray-700 shadow-lg">
    @foreach(['👍','❤️','😂','😮','🎉','🔥','👏','💯'] as $emoji)
    <button onclick="sendReaction('{{ $emoji }}')"
            class="text-xl hover:scale-125 active:scale-95 transition-transform leading-none select-none"
            title="{{ $emoji }}"
            aria-label="React with {{ $emoji }}">{{ $emoji }}</button>
    @endforeach
</div>

{{--
    FIX BUG-R2: overflow:visible ensures reactions float above the bar
    without being clipped. pointer-events:none prevents blocking clicks.
--}}
<div id="reaction-float-container"
     class="fixed inset-0 pointer-events-none z-[199] overflow-visible"
     aria-hidden="true"></div>

<script>
/**
 * Spawn a floating emoji animation at a random horizontal position.
 * Called both locally (optimistic) and from Echo listener (remote reactions).
 */
function spawnReactionFloat(emoji) {
    const container = document.getElementById('reaction-float-container');
    if (!container) return;

    const el = document.createElement('span');
    el.textContent = emoji;
    el.className   = 'reaction-float absolute text-4xl select-none';

    // Random horizontal position 15–85% of viewport width
    const left = 15 + Math.random() * 70;
    el.style.cssText = `left:${left}%;bottom:120px;`;

    container.appendChild(el);

    // Remove after animation completes (2.4s matches floatUp keyframe)
    setTimeout(() => el.remove(), 2400);
}

/**
 * FIX BUG-R1: Client-side throttle — max 1 reaction per 1500ms per user.
 * Prevents server flood from rapid clicking.
 */
let _reactionThrottleTimer = null;

function sendReaction(emoji) {
    // Throttle: ignore if a reaction was sent in the last 1.5 seconds
    if (_reactionThrottleTimer) return;

    _reactionThrottleTimer = setTimeout(() => {
        _reactionThrottleTimer = null;
    }, 1500);

    // Optimistic local float immediately
    spawnReactionFloat(emoji);

    // POST to dedicated reaction endpoint (ClassroomReactionBroadcast)
    const sessionId = document.querySelector('meta[name="session-id"]')?.content
                   || (typeof SESSION_ID !== 'undefined' ? SESSION_ID : null);

    if (!sessionId) return;

    const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

    fetch(`/classroom/${sessionId}/reaction`, {
        method : 'POST',
        headers: {
            'Content-Type' : 'application/json',
            'Accept'       : 'application/json',
            'X-CSRF-TOKEN' : csrf,
        },
        body: JSON.stringify({ emoji }),
    }).catch(() => {
        // Silently ignore network errors — local float already shown
    });
}

// Called from Echo listener in live.blade.php for remote reactions
window.showRemoteReaction = spawnReactionFloat;
</script>