{{define "title"}}High-Five Room{{end}}

{{define "content"}}
<article>
    <header>
        <h2>High-Five Room <span id="connection-status" class="status status-offline">CONNECTING...</span></h2>
    </header>

    <div class="grid">
        <div>
            <h3>People in the room (<span id="user-count">0</span>)</h3>
            <ul id="users">
                <li><em>Waiting for people to join...</em></li>
            </ul>
        </div>
        <div>
            <h3>Activity</h3>
            <ul id="activities">
                <li><em>No activity yet...</em></li>
            </ul>
        </div>
    </div>

</article>

<style>
#users, #activities {
    max-height: 400px;
    overflow-y: auto;
    padding-left: 1rem;
}
#users li, #activities li {
    margin-bottom: 0.5rem;
}
#users button {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.activity-time {
    color: var(--pico-muted-color);
    font-size: 0.75rem;
}
</style>
{{end}}

{{define "scripts"}}
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<script>
const myDID = "{{.Session.DID | js}}";
const myHandle = "{{.Session.Handle | js}}";
let ws = null;
let users = new Map();  // DID -> {did, handle}
let isReconnect = false;
let activityCount = 0;
let sessionExpired = false;

function connect() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    let wsUrl = protocol + '//' + window.location.host + '/ws';
    if (isReconnect) {
        wsUrl += '?reconnect=true';
    }
    ws = new WebSocket(wsUrl);

    ws.onopen = function() {
        document.getElementById('connection-status').textContent = 'CONNECTED';
        document.getElementById('connection-status').className = 'status status-live';
        if (!isReconnect) {
            addActivity('Connected to the high-five room');
        }
    };

    ws.onmessage = function(event) {
        const msg = JSON.parse(event.data);
        handleMessage(msg);
    };

    ws.onclose = function() {
        document.getElementById('connection-status').textContent = 'DISCONNECTED';
        document.getElementById('connection-status').className = 'status status-offline';
        if (!sessionExpired) {
            addActivity('Disconnected - reconnecting...');
            isReconnect = true;
            setTimeout(connect, 2000);
        }
    };

    ws.onerror = function(err) {
        console.error('WebSocket error:', err);
    };
}

function handleMessage(msg) {
    switch (msg.type) {
        case 'identity_joined':
            addUser(msg.payload.did, msg.payload.handle);
            addActivity('@' + msg.payload.handle + ' joined the room');
            break;

        case 'identity_left':
            removeUser(msg.payload.did);
            addActivity('@' + msg.payload.handle + ' left the room');
            break;

        case 'populate_room':
            const identities = msg.payload.identities || [];
            identities.forEach(u => addUser(u.did, u.handle));
            break;

        case 'high_five_event':
            addActivity('@' + msg.payload.from.handle + ' gave @' + msg.payload.to.handle + ' a high-five!');
            fireHighFiveConfetti();
            break;

        case 'error':
            addActivity('Error: ' + msg.payload.error);
            break;

        case 'session_timeout':
            handleSessionTimeout(msg.payload.message);
            break;

        default:
            console.log('Unhandled message type:', msg.type, msg);
    }
}

function addUser(did, handle) {
    if (!did || did === myDID) return;  // Don't show self
    if (users.has(did)) return;

    users.set(did, {did, handle});
    renderUsers();
}

function removeUser(did) {
    users.delete(did);
    renderUsers();
}

function renderUsers() {
    const list = document.getElementById('users');
    const count = users.size;
    document.getElementById('user-count').textContent = count;

    if (count === 0) {
        list.innerHTML = '<li><em>Waiting for people to join...</em></li>';
        return;
    }

    list.innerHTML = '';
    users.forEach((user, did) => {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = '@' + user.handle;

        const button = document.createElement('button');
        button.textContent = 'High Five!';
        button.addEventListener('click', () => sendHighFive(did));

        li.appendChild(span);
        li.appendChild(document.createTextNode(' '));
        li.appendChild(button);
        list.appendChild(li);
    });
}

function sendHighFive(subjectDID) {
    if (!ws || ws.readyState !== WebSocket.OPEN) {
        addActivity('Error: Not connected');
        return;
    }
    ws.send(JSON.stringify({type: 'high_five', payload: {subject: subjectDID}}));
}

// Fire confetti with raising hands and tada emoji when a high-five occurs
function fireHighFiveConfetti() {
    const emojis = ['\u{1F64C}', '\u{1F389}'];  // Raising hands and tada
    const defaults = {
        spread: 360,
        ticks: 100,
        gravity: 0.5,
        decay: 0.94,
        startVelocity: 30,
        colors: ['#ff6b6b', '#feca57', '#48dbfb', '#ff9ff3', '#54a0ff']
    };

    // Fire emoji confetti from multiple positions
    function fireEmoji() {
        confetti({
            ...defaults,
            particleCount: 30,
            scalar: 2,
            shapes: ['emoji'],
            shapeOptions: {
                emoji: {
                    value: emojis
                }
            },
            origin: { x: Math.random(), y: Math.random() - 0.2 }
        });
    }

    // Fire regular confetti burst
    function fireBurst() {
        confetti({
            ...defaults,
            particleCount: 50,
            origin: { x: 0.5, y: 0.5 }
        });
    }

    // Sequence of effects
    fireBurst();
    setTimeout(fireEmoji, 100);
    setTimeout(fireEmoji, 200);
    setTimeout(fireEmoji, 300);
}

function handleSessionTimeout(message) {
    sessionExpired = true;
    if (ws) {
        ws.close();
    }

    // Update status
    document.getElementById('connection-status').textContent = 'SESSION EXPIRED';
    document.getElementById('connection-status').className = 'status status-offline';

    // Clear users list
    users.clear();
    renderUsers();

    // Show session expired modal
    showSessionExpiredModal(message);
}

function showSessionExpiredModal(message) {
    // Create modal overlay
    const overlay = document.createElement('div');
    overlay.id = 'session-expired-overlay';
    overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;';

    // Create modal content
    const modal = document.createElement('article');
    modal.style.cssText = 'max-width:400px;margin:1rem;text-align:center;';
    modal.innerHTML = '<header><h3>Session Expired</h3></header>' +
        '<p>' + escapeHtml(message) + '</p>' +
        '<footer><a href="/info" role="button">Start New Session</a></footer>';

    overlay.appendChild(modal);
    document.body.appendChild(overlay);
}

function addActivity(message) {
    const list = document.getElementById('activities');

    // Remove the "no activity" placeholder
    if (activityCount === 0) {
        list.innerHTML = '';
    }

    const li = document.createElement('li');
    const time = new Date().toLocaleTimeString();
    li.innerHTML = '<span class="activity-time">[' + time + ']</span> ' + escapeHtml(message);
    list.prepend(li);
    activityCount++;

    // Keep only last 50 activities
    while (list.children.length > 50) {
        list.removeChild(list.lastChild);
    }
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Start connection when page loads
connect();
</script>
{{end}}