{% extends "base.html" %}

{% block title %}{{ playlist_name }} - Playlist Details{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/playlists">Playlists</a></li>
            <li class="breadcrumb-item active">{{ playlist_name }}</li>
        </ol>
    </nav>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- Playlist Header -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-2">{{ playlist_name }}</h1>
                    <p class="text-muted mb-0" id="songCount">Loading songs...</p>
                </div>
                <div class="btn-group" role="group">
                    <button id="addBtn" class="btn btn-primary" onclick="loadPlaylist(false)">
                        <i class="fas fa-plus"></i> Add to Queue
                    </button>
                    <button id="replaceBtn" class="btn btn-warning" onclick="loadPlaylist(true)">
                        <i class="fas fa-exchange-alt"></i> Replace Queue
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="text-center my-4">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-2">Loading playlist...</p>
    </div>
    
    <!-- Songs List -->
    <div class="card" id="songsCard" style="display: none;">
        <div class="card-body">
            <div id="songsList" class="list-group">
                <!-- Songs will be loaded here -->
            </div>
        </div>
    </div>
    
    <!-- Remove Song Confirmation Modal -->
    <div class="modal fade" id="removeSongModal" tabindex="-1" aria-labelledby="removeSongModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="removeSongModalLabel">Remove Song</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to remove this song from the playlist?</p>
                    <p class="text-muted"><strong id="removeSongTitle"></strong></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmRemoveBtn">Remove Song</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.song-item {
    border: none;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
}

.song-item:last-child {
    border-bottom: none;
}

.song-title {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

.song-artist {
    color: #666;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.song-details {
    color: #999;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.duration {
    color: #666;
    font-weight: 500;
}
</style>

<script>
let currentServerId = null;
let playlistName = "{{ playlist_name }}";

// Load playlist details
async function loadPlaylistDetails() {
    // Use window.currentServerId to ensure we access the global variable
    let serverId = window.currentServerId || currentServerId;
    
    // If no server ID, try to fetch it manually
    if (!serverId) {
        console.log('No server ID, fetching manually...');
        try {
            const response = await fetch('/api/player/servers');
            const data = await response.json();
            if (data.selected_server_id) {
                serverId = data.selected_server_id;
                window.currentServerId = serverId;
                console.log('Fetched server ID:', serverId);
            }
        } catch (error) {
            console.error('Error fetching server info:', error);
        }
    }
    
    // If still no server ID, wait and retry
    if (!serverId) {
        console.log('Still no server ID, waiting...');
        setTimeout(loadPlaylistDetails, 1000);
        return;
    }
    
    console.log('Loading playlist details for:', playlistName, 'on server:', serverId);
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}`);
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        const songs = data.songs || [];
        displaySongs(songs);
        
        // Update song count
        document.getElementById('songCount').textContent = `${songs.length} songs`;
        
    } catch (error) {
        console.error('Error loading playlist details:', error);
        document.getElementById('loadingIndicator').innerHTML = `
            <div class="alert alert-danger">
                Error loading playlist: ${error.message}
            </div>
        `;
    }
}

// Display songs
function displaySongs(songs) {
    const songsList = document.getElementById('songsList');
    
    if (songs.length === 0) {
        songsList.innerHTML = '<div class="text-muted text-center py-4">No songs found</div>';
        return;
    }
    
    songsList.innerHTML = '';
    
    songs.forEach((song, index) => {
        const item = document.createElement('div');
        item.className = 'song-item d-flex justify-content-between align-items-center';
        
        const duration = formatTime(song.time || song.duration || 0);
        const songFile = song.file || '';
        
        const songTitle = get_mpd_tag(song, 'title', song.file || 'Unknown');
        
        item.innerHTML = `
            <div class="flex-grow-1">
                <div class="song-title">${escapeHtml(songTitle)}</div>
                <div class="song-artist">${escapeHtml(get_mpd_tag(song, 'artist', 'Unknown Artist'))}</div>
                <div class="song-details">
                    ${get_mpd_tag(song, 'album') ? escapeHtml(get_mpd_tag(song, 'album')) : ''}
                    ${song.date ? ` (${String(song.date).substring(0, 4)})` : ''}
                </div>
            </div>
            <div class="duration text-end d-flex align-items-center">
                <span class="badge bg-secondary me-2">${index + 1}</span>
                <span class="me-3">${duration}</span>
                <button class="btn btn-sm btn-outline-danger" 
                        onclick="removeSongFromPlaylist('${escapeHtml(songFile)}', '${escapeHtml(songTitle)}')"
                        title="Remove song from playlist">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        
        songsList.appendChild(item);
    });
    
    // Hide loading indicator and show songs
    document.getElementById('loadingIndicator').style.display = 'none';
    document.getElementById('songsCard').style.display = 'block';
}

// Remove song from playlist
async function removeSongFromPlaylist(songFile, songTitle) {
    // Set song title in modal
    document.getElementById('removeSongTitle').textContent = songTitle;
    
    // Store song info for the confirm button
    window.songToRemove = { file: songFile, title: songTitle };
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('removeSongModal'));
    modal.show();
}

// Confirm remove song
async function confirmRemoveSong() {
    const songInfo = window.songToRemove;
    if (!songInfo) return;
    
    // Hide modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('removeSongModal'));
    modal.hide();
    
    // Use window.currentServerId to ensure we access the global variable
    let serverId = window.currentServerId || currentServerId;
    
    // If no server ID, try to fetch it manually
    if (!serverId) {
        console.log('No server ID in removeSongFromPlaylist, fetching manually...');
        try {
            const response = await fetch('/api/player/servers');
            const data = await response.json();
            if (data.selected_server_id) {
                serverId = data.selected_server_id;
                window.currentServerId = serverId;
                console.log('Fetched server ID in removeSongFromPlaylist:', serverId);
            }
        } catch (error) {
            console.error('Error fetching server info in removeSongFromPlaylist:', error);
        }
    }
    
    // If still no server ID, show error
    if (!serverId) {
        console.error('No server selected');
        showMessage('No server selected', 'error');
        return;
    }
    
    console.log('Removing song from playlist:', playlistName, 'file:', songInfo.file);
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}/remove`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({file: songInfo.file})
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('Song removed successfully');
        showMessage('Song removed from playlist successfully!', 'success');
        
        // Reload playlist details to show the updated list
        loadPlaylistDetails();
        
    } catch (error) {
        console.error('Error removing song from playlist:', error);
        showMessage('Error removing song: ' + error.message, 'error');
    }
}

// Show message instead of alert
function showMessage(message, type = 'info') {
    // Remove any existing messages
    const existing = document.querySelector('.alert-message');
    if (existing) {
        existing.remove();
    }
    
    // Create new message
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info'} alert-message`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" onclick="this.parentElement.remove()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    `;
    
    // Add to page
    const container = document.querySelector('.container');
    container.insertBefore(alertDiv, container.firstChild);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentElement) {
            alertDiv.remove();
        }
    }, 5000);
}

// Load playlist to queue
async function loadPlaylist(replace) {
    // Use window.currentServerId to ensure we access the global variable
    let serverId = window.currentServerId || currentServerId;
    
    // If no server ID, try to fetch it manually
    if (!serverId) {
        console.log('No server ID in loadPlaylist, fetching manually...');
        try {
            const response = await fetch('/api/player/servers');
            const data = await response.json();
            if (data.selected_server_id) {
                serverId = data.selected_server_id;
                window.currentServerId = serverId;
                console.log('Fetched server ID in loadPlaylist:', serverId);
            }
        } catch (error) {
            console.error('Error fetching server info in loadPlaylist:', error);
        }
    }
    
    // If still no server ID, show error
    if (!serverId) {
        console.error('No server selected');
        return;
    }
    
    console.log('Loading playlist:', playlistName, 'for server:', serverId, 'replace:', replace);
    
    // Disable buttons during loading
    const addBtn = document.getElementById('addBtn');
    const replaceBtn = document.getElementById('replaceBtn');
    addBtn.disabled = true;
    replaceBtn.disabled = true;
    
    const originalAddHtml = addBtn.innerHTML;
    const originalReplaceHtml = replaceBtn.innerHTML;
    
    if (replace) {
        replaceBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Replacing...';
    } else {
        addBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Adding...';
    }
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}/load`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ replace: replace })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('Playlist loaded successfully:', data.message);
        
    } catch (error) {
        console.error('Error loading playlist:', error);
    } finally {
        // Re-enable buttons
        addBtn.disabled = false;
        replaceBtn.disabled = false;
        addBtn.innerHTML = originalAddHtml;
        replaceBtn.innerHTML = originalReplaceHtml;
    }
}

// Helper functions
function get_mpd_tag(data, key, defaultValue='') {
    const value = data[key];
    if (Array.isArray(value)) {
        return value[0] || defaultValue;
    }
    return value || defaultValue;
}

function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
}

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

// Event listeners
document.addEventListener('DOMContentLoaded', () => {
    // Confirm remove button
    document.getElementById('confirmRemoveBtn').addEventListener('click', confirmRemoveSong);
    
    // Load playlist details on page load
    setTimeout(loadPlaylistDetails, 1000);
});
</script>
{% endblock %}