{% extends "base.html" %}
{% block title %}Queue{% endblock %}
{% block body_class %}queue-page{% endblock %}

{% block content %}
<div class="queue-layout">
    <div class="now-playing-section">
        <h2>Now Playing</h2>
        <div id="now-playing" class="now-playing-card">
            <p class="empty-state">Connecting...</p>
        </div>
    </div>

    <div class="queue-section">
        <h2>Up Next</h2>
        <div id="queue-list" class="queue-list">
            <p class="empty-state">Connecting...</p>
        </div>
        <div id="queue-summary" class="queue-summary"></div>
    </div>

    <div class="queue-info-sidebar">
        <div id="schedule-info" class="schedule-info hidden">
            <h3>Scheduled Playlist</h3>
            <p id="schedule-label"></p>
            <p id="schedule-time"></p>
        </div>
        <div class="queue-stats">
            <p>Status: <span id="ws-status" class="ws-disconnected">● Disconnected</span></p>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let ws = null;
let reconnectTimer = null;

function connectWebSocket() {
    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    ws = new WebSocket(`${proto}//${location.host}/ws`);

    ws.onopen = () => {
        const el = document.getElementById('ws-status');
        el.className = 'ws-connected';
        el.textContent = '● Live';
    };

    ws.onclose = () => {
        const el = document.getElementById('ws-status');
        el.className = 'ws-disconnected';
        el.textContent = '● Disconnected';
        reconnectTimer = setTimeout(connectWebSocket, 3000);
    };

    ws.onmessage = (event) => {
        const msg = JSON.parse(event.data);
        if (msg.type === 'queue_state' || msg.type === 'queue_update') {
            renderQueue(msg.data);
        } else if (msg.type === 'pong') {
            // keepalive ack
        } else if (msg.type === 'schedule_fired') {
            showToast(`Scheduled playlist loaded: ${msg.data.playlist_name}`);
        }
    };

    // Keepalive
    setInterval(() => {
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({type: 'ping'}));
        }
    }, 30000);
}

function renderQueue(state) {
    const npEl = document.getElementById('now-playing');
    const qlEl = document.getElementById('queue-list');
    const sumEl = document.getElementById('queue-summary');

    if (state.now_playing) {
        const np = state.now_playing;
        const elapsed = np.currentTime || 0;
        const total = np.duration || 0;
        const remaining = Math.max(0, total - elapsed);
        npEl.innerHTML = `
            <div class="np-cover">${coverHtml(np)}</div>
            <div class="np-info">
                <h3>${escapeHtml(np.title || 'Unknown')}</h3>
                <div class="np-meta">
                    ${np.paid_by ? `<span class="np-user">Queued by ${escapeHtml(np.paid_by)}</span>` : ''}
                </div>
                <div class="np-progress">
                    <div class="progress-bar" style="width: ${total > 0 ? (elapsed / total * 100) : 0}%"></div>
                </div>
                <div class="np-times">
                    <span class="np-time">${formatTime(elapsed)} / ${formatTime(total)}</span>
                    <span class="np-remaining">${formatTime(remaining)} remaining</span>
                </div>
            </div>
        `;
    } else {
        npEl.innerHTML = '<p class="empty-state">Nothing playing</p>';
    }

    if (state.items && state.items.length > 0) {
        const totalDuration = state.items.reduce((sum, i) => sum + (i.duration_sec || 0), 0);
        sumEl.innerHTML = `<span>${state.items.length} items · ${formatTime(totalDuration)} total</span>`;

        qlEl.innerHTML = state.items.map((item, i) => `
            <div class="queue-item ${item.is_pay ? 'queue-item-paid' : ''}" data-uid="${item.uid}">
                <span class="qi-drag" title="Drag to reorder">☰</span>
                <span class="qi-pos">${i + 1}</span>
                <div class="qi-cover">${coverHtml(item)}</div>
                <div class="qi-info">
                    <span class="qi-title">${escapeHtml(item.title || 'Unknown')}</span>
                    <span class="qi-meta">
                        ${item.paid_by ? `<span class="qi-user">by ${escapeHtml(item.paid_by)}</span>` : ''}
                        ${item.is_pay ? `<span class="qi-badge badge-paid">${escapeHtml(item.tier || '')}</span>` : ''}
                    </span>
                </div>
                <div class="qi-right">
                    <span class="qi-duration">${formatTime(item.duration_sec || 0)}</span>
                    ${item.estimated_start_at ? `<span class="qi-eta">~${formatEta(item.estimated_start_at)}</span>` : ''}
                </div>
            </div>
        `).join('');
    } else {
        qlEl.innerHTML = '<p class="empty-state">Queue is empty</p>';
        sumEl.innerHTML = '';
    }
}

function formatTime(sec) {
    sec = Math.floor(sec);
    const h = Math.floor(sec / 3600);
    const m = Math.floor((sec % 3600) / 60);
    const s = sec % 60;
    if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    return `${m}:${s.toString().padStart(2, '0')}`;
}

function coverHtml(item) {
    if (item.cover_art_path) {
        return `<img src="/images/${item.cover_art_path}/200.webp" alt="" loading="lazy">`;
    }
    if (item.thumbnail_url) {
        return `<img src="${escapeHtml(item.thumbnail_url)}" alt="" loading="lazy">`;
    }
    const letter = (item.title || '?').trim().charAt(0) || '?';
    return `<div class="cover-placeholder">${escapeHtml(letter)}</div>`;
}

function formatEta(isoStr) {
    const d = new Date(isoStr);
    return d.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
}

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

// Initial load via HTTP (in case WS takes a moment)
async function initialLoad() {
    try {
        const resp = await fetch('/queue/state', {credentials: 'same-origin'});
        if (resp.ok) {
            const state = await resp.json();
            renderQueue(state);
        }
    } catch (e) { /* WS will take over */ }
}

initialLoad();
connectWebSocket();
</script>
{% endblock %}