{% extends "base.html" %}

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

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Playlists</h1>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- Playlists List -->
    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">Available Playlists</h5>
                <button id="refreshPlaylistsBtn" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-sync-alt"></i> Refresh
                </button>
            </div>
            <div id="playlistsList">
                <div class="text-muted">
                    <i class="fas fa-spinner fa-spin"></i> Loading playlists...
                </div>
            </div>
        </div>
    </div>
    
    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deletePlaylistModal" tabindex="-1" aria-labelledby="deletePlaylistModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePlaylistModalLabel">Delete Playlist</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 delete the playlist <strong id="deletePlaylistName"></strong>?</p>
                    <p class="text-muted">This action cannot be undone.</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="confirmDeleteBtn">Delete Playlist</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.playlist-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.playlist-item:hover {
    background-color: #f8f9fa;
    border-color: #007bff;
}

.playlist-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.playlist-info {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 0.5rem;
}

.playlist-actions .btn {
    font-size: 0.8em;
}

.playlist-songs {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.song-item {
    font-size: 0.85em;
    padding: 0.25rem 0;
    color: #666;
}

.song-title {
    font-weight: 500;
    color: #333;
}

.song-artist {
    color: #666;
}

.song-details {
    color: #999;
    font-size: 0.9em;
}
</style>

<script>
let currentServerId = null;

// Load playlists
async function loadPlaylists() {
    // 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 window, fetching manually...');
        try {
            const response = await fetch('/api/player/servers');
            console.log('Server info response status:', response.status);
            console.log('Server info response headers:', response.headers);
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            const data = await response.json();
            console.log('Server info response data:', data);
            
            if (data.selected_server_id) {
                serverId = data.selected_server_id;
                window.currentServerId = serverId; // Set it for future use
                console.log('Fetched server ID:', serverId);
            } else {
                console.log('No selected_server_id in response:', data);
            }
        } catch (error) {
            console.error('Error fetching server info:', error);
            console.error('Error details:', error.message);
        }
    }
    
    // If still no server ID, wait a bit and try again
    if (!serverId) {
        console.log('Still no server ID, waiting...');
        setTimeout(loadPlaylists, 1000);
        return;
    }
    
    console.log('Loading playlists for server:', serverId);
    
    const playlistsList = document.getElementById('playlistsList');
    playlistsList.innerHTML = '<div class="text-muted"><i class="fas fa-spinner fa-spin"></i> Loading playlists...</div>';
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/list`);
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        if (!data.playlists || data.playlists.length === 0) {
            playlistsList.innerHTML = `
                <div class="text-muted text-center py-4">
                    <i class="fas fa-list"></i> No playlists found
                </div>
            `;
            return;
        }
        
        displayPlaylists(data.playlists);
        
    } catch (error) {
        console.error('Error loading playlists:', error);
        playlistsList.innerHTML = `
            <div class="alert alert-danger">
                Error loading playlists: ${error.message}
            </div>
        `;
    }
}

// Display playlists
async function displayPlaylists(playlists) {
    const playlistsList = document.getElementById('playlistsList');
    let serverId = window.currentServerId || currentServerId;
    
    // If still no server ID, try to fetch it manually
    if (!serverId) {
        console.log('No server ID in displayPlaylists, 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; // Set it for future use
                console.log('Fetched server ID in displayPlaylists:', serverId);
            }
        } catch (error) {
            console.error('Error fetching server info in displayPlaylists:', error);
        }
    }
    
    // If still no server ID, wait and retry
    if (!serverId) {
        console.log('Still no server ID in displayPlaylists, retrying...');
        setTimeout(() => displayPlaylists(playlists), 500);
        return;
    }
    
    console.log('Displaying playlists for server:', serverId);
    
    playlistsList.innerHTML = '';
    
    // Debug: log the playlists data structure
    console.log('Playlists data:', playlists);
    console.log('First playlist:', playlists[0]);
    
    for (const playlist of playlists) {
        console.log('Processing playlist:', playlist);
        const item = document.createElement('div');
        item.className = 'playlist-item';
        
        // Get playlist details to show song count
        try {
            const playlistName = playlist.name || playlist.playlist || 'Unknown';
            console.log('Using playlist name:', playlistName);
            
            const detailsResponse = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}`);
            const detailsData = await detailsResponse.json();
            
            if (!detailsData.error) {
                const songs = detailsData.songs || [];
                const songCount = songs.length;
                
                item.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <div class="playlist-name">${escapeHtml(playlistName)}</div>
                            <div class="playlist-info">${songCount} songs</div>
                        </div>
                        <div class="playlist-actions">
                            <div class="btn-group" role="group">
                                <a href="/playlists/${serverId}/${encodeURIComponent(playlistName)}" class="btn btn-sm btn-outline-info" title="View Details">
                                    <i class="fas fa-eye"></i> View
                                </a>
                                <button class="btn btn-sm btn-primary" 
                                        onclick="loadPlaylist('${escapeHtml(playlistName)}', false)"
                                        title="Add to current queue">
                                    <i class="fas fa-plus"></i> Add
                                </button>
                                <button class="btn btn-sm btn-warning" 
                                        onclick="loadPlaylist('${escapeHtml(playlistName)}', true)"
                                        title="Replace current queue">
                                    <i class="fas fa-exchange-alt"></i> Replace
                                </button>
                                <button class="btn btn-sm btn-danger" 
                                        onclick="deletePlaylist('${escapeHtml(playlistName)}')"
                                        title="Delete playlist">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            }
        } catch (error) {
            console.error('Error loading playlist details:', error);
            const playlistName = playlist.name || playlist.playlist || 'Unknown';
            item.innerHTML = `
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="playlist-name">${escapeHtml(playlistName)}</div>
                        <div class="playlist-info">Unable to load details</div>
                    </div>
                    <div class="playlist-actions">
                        <div class="btn-group" role="group">
                            <a href="/playlists/${serverId}/${encodeURIComponent(playlistName)}" class="btn btn-sm btn-outline-info" title="View Details">
                                <i class="fas fa-eye"></i> View
                            </a>
                            <button class="btn btn-sm btn-primary" 
                                    onclick="loadPlaylist('${escapeHtml(playlistName)}', false)"
                                    title="Add to current queue">
                                <i class="fas fa-plus"></i> Add
                            </button>
                            <button class="btn btn-sm btn-warning" 
                                    onclick="loadPlaylist('${escapeHtml(playlistName)}', true)"
                                    title="Replace current queue">
                                <i class="fas fa-exchange-alt"></i> Replace
                            </button>
                            <button class="btn btn-sm btn-danger" 
                                    onclick="deletePlaylist('${escapeHtml(playlistName)}')"
                                    title="Delete playlist">
                                <i class="fas fa-trash"></i> Delete
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }
        
        playlistsList.appendChild(item);
    }
}

// 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);
}

// Delete playlist
async function deletePlaylist(playlistName) {
    // Set playlist name in modal
    document.getElementById('deletePlaylistName').textContent = playlistName;
    
    // Store playlist name for the confirm button
    window.playlistToDelete = playlistName;
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('deletePlaylistModal'));
    modal.show();
}

// Confirm delete playlist
async function confirmDeletePlaylist() {
    const playlistName = window.playlistToDelete;
    if (!playlistName) return;
    
    // Hide modal
    const modal = bootstrap.Modal.getInstance(document.getElementById('deletePlaylistModal'));
    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 deletePlaylist, 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; // Set it for future use
                console.log('Fetched server ID in deletePlaylist:', serverId);
            }
        } catch (error) {
            console.error('Error fetching server info in deletePlaylist:', error);
        }
    }
    
    // If still no server ID, show error
    if (!serverId) {
        console.error('No server selected');
        showMessage('No server selected', 'error');
        return;
    }
    
    console.log('Deleting playlist:', playlistName, 'for server:', serverId);
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('Playlist deleted successfully:', data.message);
        showMessage(`Playlist "${playlistName}" deleted successfully!`, 'success');
        
        // Reload playlists to remove the deleted one from the list
        loadPlaylists();
        
    } catch (error) {
        console.error('Error deleting playlist:', error);
        showMessage('Error deleting playlist: ' + error.message, 'error');
    }
}

// Load playlist to queue
async function loadPlaylist(playlistName, 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; // Set it for future use
                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);
    
    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);
    }
}

// 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 escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Event listeners
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('refreshPlaylistsBtn').addEventListener('click', loadPlaylists);
    
    // Confirm delete button
    document.getElementById('confirmDeleteBtn').addEventListener('click', confirmDeletePlaylist);
    
    // Debug: Check what's available in window
    console.log('Window object debug:', {
        currentServerId: window.currentServerId,
        typeofCurrentServerId: typeof window.currentServerId,
        windowKeys: Object.keys(window).filter(k => k.includes('server') || k.includes('Server'))
    });
    
    // Test basic API connectivity
    fetch('/api/player/servers')
        .then(response => {
            console.log('Test API call - status:', response.status);
            return response.text();
        })
        .then(text => {
            console.log('Test API call - response text:', text);
        })
        .catch(error => {
            console.error('Test API call - error:', error);
        });
    
    // Load playlists on page load with longer delay to ensure server info is loaded
    setTimeout(() => {
        console.log('After 2 second delay - window.currentServerId:', window.currentServerId);
        loadPlaylists();
    }, 2000);
});
</script>
{% endblock %}