{% extends "base.html" %}

{% block title %}Now Playing{% endblock %}

{% block extra_css %}
<style>
    .music-card {
        transition: all 0.3s ease;
    }
    .music-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .playing-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #28a745;
        border-radius: 50%;
        margin-right: 8px;
        animation: pulse 2s infinite;
    }
    .not-playing-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        background-color: #6c757d;
        border-radius: 50%;
        margin-right: 8px;
    }
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
        }
    }
    .server-name {
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: capitalize;
    }
    .song-info {
        margin-top: 10px;
    }
    .artist-name {
        font-size: 1rem;
        color: #6c757d;
    }
    .song-title {
        font-size: 1.2rem;
        font-weight: 500;
    }
    .album-name {
        font-size: 0.9rem;
        color: #adb5bd;
        font-style: italic;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="mb-0">
                    <i class="fas fa-music me-2"></i> Now Playing
                </h1>
                <button id="refresh-btn" class="btn btn-primary">
                    <i class="fas fa-sync-alt me-1"></i> Aktualisieren
                </button>
            </div>
            <div class="card">
                <div class="card-body">
                    {% if servers %}
                        <div class="row" id="musicServers">
                            {% for server in servers %}
                                <div class="col-md-6 col-lg-4 mb-3">
                                    <div class="card music-card h-100" data-server="{{ server.name }}">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="not-playing-indicator" id="indicator-{{ server.name }}"></span>
                                                <span class="server-name">{{ server.name }}</span>
                                            </div>
                                            
                                            <div class="song-info" id="song-{{ server.name }}">
                                                <div class="text-muted">
                                                    <i class="fas fa-spinner fa-spin"></i> Lädt...
                                                </div>
                                            </div>
                                            
                                            {% if g.is_in_space %}
                                            <div class="mt-3 border-top pt-3">
                                                <div class="btn-group btn-group-sm w-100" role="group">
                                                    <button type="button" class="btn btn-outline-secondary control-btn" 
                                                            data-action="previous" data-server="{{ server.name }}"
                                                            title="Previous">
                                                        <i class="fas fa-step-backward"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary control-btn" 
                                                            data-action="play" data-server="{{ server.name }}"
                                                            title="Play">
                                                        <i class="fas fa-play"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary control-btn" 
                                                            data-action="pause" data-server="{{ server.name }}"
                                                            title="Pause">
                                                        <i class="fas fa-pause"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary control-btn" 
                                                            data-action="next" data-server="{{ server.name }}"
                                                            title="Next">
                                                        <i class="fas fa-step-forward"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-outline-secondary control-btn" 
                                                            data-action="shuffle" data-server="{{ server.name }}"
                                                            title="Toggle Shuffle">
                                                        <i class="fas fa-random"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> No MPD servers configured.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function updateServerStatus(serverName) {
        fetch(`{{ url_for('music.api_nowplaying') }}?name=${serverName}`)
            .then(response => response.json())
            .then(data => {
                const songDiv = document.getElementById(`song-${serverName}`);
                const indicator = document.getElementById(`indicator-${serverName}`);
                
                if (data.success && data.playing) {
                    // Update indicator
                    indicator.className = 'playing-indicator';
                    
                    // Update song info
                    let html = `<div class="song-title">${data.title}</div>`;
                    html += `<div class="artist-name">${data.artist}</div>`;
                    if (data.album) {
                        html += `<div class="album-name mt-1">${data.album}</div>`;
                    }
                    if (data.state === 'pause') {
                        html += `<div class="mt-2"><span class="badge bg-warning text-dark"><i class="fas fa-pause"></i> Paused</span></div>`;
                    }
                    songDiv.innerHTML = html;
                } else {
                    // Update indicator
                    indicator.className = 'not-playing-indicator';
                    
                    // Update song info
                    songDiv.innerHTML = '<div class="text-muted"><i class="fas fa-stop-circle"></i> Nothing playing</div>';
                }
            })
            .catch(error => {
                console.error(`Error fetching status for ${serverName}:`, error);
            });
    }
    
    function refreshAllServers() {
        const servers = document.querySelectorAll('[data-server]');
        servers.forEach(card => {
            const serverName = card.getAttribute('data-server');
            updateServerStatus(serverName);
        });
    }
    
    // Manual refresh button handler
    document.getElementById('refresh-btn').addEventListener('click', function() {
        const icon = this.querySelector('i');
        icon.classList.add('fa-spin');
        refreshAllServers();
        setTimeout(() => {
            icon.classList.remove('fa-spin');
        }, 1000);
    });
    
    // Load all server statuses on page load
    refreshAllServers();
    
    // Control button handlers
    document.querySelectorAll('.control-btn').forEach(button => {
        button.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            const serverName = this.getAttribute('data-server');
            
            // Disable button during request
            this.disabled = true;
            const originalHtml = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            
            // Send control request
            fetch(`/api/control/${action}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name: serverName })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    if (typeof Toastify !== 'undefined') {
                        Toastify({
                            text: data.message,
                            duration: 2000,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "#28a745"
                        }).showToast();
                    }
                    
                    // Refresh status immediately
                    updateServerStatus(serverName);
                } else {
                    // Show error message
                    if (typeof Toastify !== 'undefined') {
                        Toastify({
                            text: data.message,
                            duration: 3000,
                            gravity: "top",
                            position: "right",
                            backgroundColor: "#dc3545"
                        }).showToast();
                    } else {
                        alert(data.message);
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (typeof Toastify !== 'undefined') {
                    Toastify({
                        text: 'Error sending command',
                        duration: 3000,
                        gravity: "top",
                        position: "right",
                        backgroundColor: "#dc3545"
                    }).showToast();
                } else {
                    alert('Error sending command');
                }
            })
            .finally(() => {
                // Re-enable button
                this.disabled = false;
                this.innerHTML = originalHtml;
            });
        });
    });
</script>
{% endblock %}