{% extends "base.html" %}

{% block title %}Add to Playlist - kosmikDJ{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Add "{{ song_title }}" to Playlist</h1>
    <p class="text-muted mb-4">{{ song_artist }}</p>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- Hidden song file for JavaScript -->
    <input type="hidden" id="songFile" value="{{ song_file }}">
    
    <!-- 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>
                <div class="btn-group" role="group">
                    <button id="createPlaylistBtn" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createPlaylistModal">
                        <i class="fas fa-plus"></i> Create New
                    </button>
                    <button id="refreshPlaylistsBtn" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-sync-alt"></i> Refresh
                    </button>
                </div>
            </div>
            <div id="playlistsList">
                <div class="text-muted">
                    <i class="fas fa-spinner fa-spin"></i> Loading playlists...
                </div>
            </div>
        </div>
    </div>
    
    <!-- Create Playlist Modal -->
    <div class="modal fade" id="createPlaylistModal" tabindex="-1" aria-labelledby="createPlaylistModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createPlaylistModalLabel">Create New Playlist</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="createPlaylistForm">
                        <div class="mb-3">
                            <label for="playlistName" class="form-label">Playlist Name</label>
                            <input type="text" class="form-control" id="playlistName" name="name" required 
                                   placeholder="Enter playlist name" maxlength="100">
                            <div class="form-text">Choose a unique name for your playlist</div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="savePlaylistBtn">Create Playlist</button>
                </div>
            </div>
        </div>
    </div>
    
    <a href="{{ url_for('main.index') }}" class="btn btn-secondary mt-3">Back</a>
</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-success" 
                                        onclick="addSongToPlaylist('${escapeHtml(playlistName)}')"
                                        title="Add song to playlist">
                                    <i class="fas fa-plus"></i> Add Song
                                </button>
                                <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>
                            </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-success" 
                                    onclick="addSongToPlaylist('${escapeHtml(playlistName)}')"
                                    title="Add song to playlist">
                                <i class="fas fa-plus"></i> Add Song
                            </button>
                            <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>
                        </div>
                    </div>
                </div>
            `;
        }
        
        playlistsList.appendChild(item);
    }
}

// Add song to playlist
async function addSongToPlaylist(playlistName) {
    const songFile = document.getElementById('songFile').value;
    const serverId = {{ server_id }};  // Get server ID from template
    
    console.log('addSongToPlaylist called with:', {
        playlistName: playlistName,
        songFile: songFile,
        serverId: serverId
    });
    
    if (!songFile) {
        showMessage('No song file available', 'error');
        return;
    }
    
    console.log('Adding song to playlist:', playlistName, 'file:', songFile);
    
    // Disable button and show loading state
    const buttons = document.querySelectorAll(`button[onclick="addSongToPlaylist('${escapeHtml(playlistName)}')"]`);
    buttons.forEach(btn => {
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Adding...';
    });
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/${encodeURIComponent(playlistName)}/add`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({file: songFile})
        });
        
        const data = await response.json();
        console.log('Add song response:', data);
        
        if (data.error) {
            showMessage('Error adding song: ' + data.error, 'error');
        } else {
            showMessage('Song added to "' + playlistName + '" successfully!', 'success');
        }
        
    } catch (error) {
        console.error('Error adding song to playlist:', error);
        showMessage('Error adding song to playlist', 'error');
    } finally {
        // Restore buttons
        buttons.forEach(btn => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-plus"></i> Add Song';
        });
    }
}

// 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(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);
    
    // Create playlist functionality
    document.getElementById('savePlaylistBtn').addEventListener('click', createPlaylist);
    
    // Handle form submission with Enter key
    document.getElementById('createPlaylistForm').addEventListener('submit', (e) => {
        e.preventDefault();
        createPlaylist();
    });
    
    // 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);
});

// Create new playlist
async function createPlaylist() {
    const nameInput = document.getElementById('playlistName');
    const saveBtn = document.getElementById('savePlaylistBtn');
    
    const playlistName = nameInput.value.trim();
    
    if (!playlistName) {
        showMessage('Please enter a playlist name', 'error');
        nameInput.focus();
        return;
    }
    
    console.log('Creating playlist:', playlistName);
    
    // Get server ID
    let serverId = window.currentServerId || currentServerId;
    if (!serverId) {
        try {
            const response = await fetch('/api/player/servers');
            const data = await response.json();
            if (data.selected_server_id) {
                serverId = data.selected_server_id;
            }
        } catch (error) {
            console.error('Error fetching server ID:', error);
        }
    }
    
    if (!serverId) {
        showMessage('No server selected', 'error');
        return;
    }
    
    // Disable button and show loading state
    saveBtn.disabled = true;
    saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
    
    try {
        const response = await fetch(`/api/playlists/${serverId}/create`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: playlistName
            })
        });
        
        const data = await response.json();
        console.log('Create playlist response:', data);
        
        if (data.error) {
            showMessage('Error creating playlist: ' + data.error, 'error');
        } else {
            showMessage('Playlist "' + playlistName + '" created successfully!', 'success');
            
            // Close modal and reset form
            const modal = bootstrap.Modal.getInstance(document.getElementById('createPlaylistModal'));
            modal.hide();
            nameInput.value = '';
            
            // Reload playlists to show the new one
            loadPlaylists();
            
            // Automatically add the song to the new playlist
            console.log('Auto-adding song to new playlist...');
            setTimeout(() => {
                addSongToPlaylist(playlistName);
            }, 500);
        }
        
    } catch (error) {
        console.error('Error creating playlist:', error);
        showMessage('Error creating playlist', 'error');
    } finally {
        // Restore button
        saveBtn.disabled = false;
        saveBtn.innerHTML = 'Create Playlist';
    }
}
</script>
{% endblock %}