{% extends "base.html" %}

{% block title %}History - kosmikDJ{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Play History</h1>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- History List -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-history me-2"></i>Recently Played</h5>
            <small id="historyInfo" class="text-muted"></small>
        </div>
        <div class="card-body p-0">
            <div id="historyList" class="list-group list-group-flush">
                <div class="list-group-item text-center text-muted py-4">
                    <i class="fas fa-spinner fa-spin"></i> Loading history...
                </div>
            </div>
        </div>
        <div class="card-footer" id="paginationContainer" style="display: none;">
            <nav>
                <ul class="pagination justify-content-center mb-0">
                    <li class="page-item" id="prevPageItem">
                        <a class="page-link" href="#" id="prevPage">Previous</a>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link" id="pageInfo">Page 1</span>
                    </li>
                    <li class="page-item" id="nextPageItem">
                        <a class="page-link" href="#" id="nextPage">Next</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentPage = 1;

// Get page from URL parameter
function getPageFromUrl() {
    const params = new URLSearchParams(window.location.search);
    return parseInt(params.get('page')) || 1;
}

// Update URL with page parameter
function setPageInUrl(page) {
    const url = new URL(window.location);
    url.searchParams.set('page', page);
    window.history.pushState({}, '', url);
}

async function loadHistory(page = 1) {
    if (!window.currentServerId) {
        document.getElementById('historyList').innerHTML = `
            <div class="list-group-item text-center text-muted py-4">
                <a href="/profile">Select a server first</a>
            </div>
        `;
        document.getElementById('paginationContainer').style.display = 'none';
        return;
    }
    
    currentPage = page;
    setPageInUrl(page);
    
    try {
        const response = await fetch(`/api/history/${window.currentServerId}?page=${page}`);
        const data = await response.json();
        
        const historyList = document.getElementById('historyList');
        const historyInfo = document.getElementById('historyInfo');
        const paginationContainer = document.getElementById('paginationContainer');
        
        if (data.total === 0) {
            historyList.innerHTML = `
                <div class="list-group-item text-center text-muted py-4">
                    No play history yet
                </div>
            `;
            historyInfo.textContent = '';
            paginationContainer.style.display = 'none';
            return;
        }
        
        // Update info
        const start = (data.page - 1) * data.per_page + 1;
        const end = Math.min(data.page * data.per_page, data.total);
        historyInfo.textContent = `${start}-${end} of ${data.total}`;
        
        // Update pagination
        document.getElementById('pageInfo').textContent = `Page ${data.page} of ${data.total_pages}`;
        document.getElementById('prevPageItem').classList.toggle('disabled', !data.has_prev);
        document.getElementById('nextPageItem').classList.toggle('disabled', !data.has_next);
        paginationContainer.style.display = data.total_pages > 1 ? 'block' : 'none';
        
        historyList.innerHTML = data.history.map(item => {
            const playedAt = new Date(item.played_at);
            const timeStr = playedAt.toLocaleString('de-DE', {
                day: '2-digit',
                month: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
            
            return `
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>${escapeHtml(item.title)}</strong>
                            <br>
                            <small class="text-muted">${escapeHtml(item.artist)}</small>
                            ${item.album ? `<br><small class="text-muted"><i class="fas fa-compact-disc me-1"></i>${escapeHtml(item.album)}</small>` : ''}
                        </div>
                        <small class="text-muted">${timeStr}</small>
                    </div>
                </div>
            `;
        }).join('');
    } catch (error) {
        console.error('Error loading history:', error);
        document.getElementById('historyList').innerHTML = `
            <div class="list-group-item text-center text-danger py-4">
                Error loading history
            </div>
        `;
    }
}

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

// Wait for server info to load, then load history
document.addEventListener('DOMContentLoaded', () => {
    const initialPage = getPageFromUrl();
    
    // Pagination click handlers
    document.getElementById('prevPage').addEventListener('click', (e) => {
        e.preventDefault();
        if (currentPage > 1) loadHistory(currentPage - 1);
    });
    
    document.getElementById('nextPage').addEventListener('click', (e) => {
        e.preventDefault();
        loadHistory(currentPage + 1);
    });
    
    // Wait for currentServerId to be set by server_info component
    function waitAndLoad() {
        if (window.currentServerId) {
            loadHistory(initialPage);
        } else {
            setTimeout(waitAndLoad, 100);
        }
    }
    // Start checking after a brief delay
    setTimeout(waitAndLoad, 100);
});
</script>
{% endblock %}