{% extends "base.html" %}

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

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">Music Library</h1>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- Re-index Button -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="card-title mb-0">Library Management</h5>
                    <small class="text-muted">Re-index the library if new songs were added</small>
                </div>
                <button id="reindexBtn" class="btn btn-warning" title="Re-index the library if new songs were added">
                    <i class="fas fa-sync-alt me-1"></i> Re-index Library
                </button>
            </div>
        </div>
    </div>
    
    <!-- Search Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">Search & Filter</h5>
            <div class="row g-3">
                <div class="col-md-4">
                    <input type="text" id="artistFilter" class="form-control" placeholder="Artist">
                </div>
                <div class="col-md-4">
                    <input type="text" id="titleFilter" class="form-control" placeholder="Title">
                </div>
                <div class="col-md-4">
                    <input type="text" id="albumFilter" class="form-control" placeholder="Album">
                </div>
                <div class="col-md-4">
                    <input type="text" id="genreFilter" class="form-control" placeholder="Genre">
                </div>
                <div class="col-md-4">
                    <input type="text" id="yearFilter" class="form-control" placeholder="Year">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button id="searchBtn" class="btn btn-primary w-100">
                        <i class="fas fa-search"></i> Search
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Loading Indicator -->
    <div id="loadingIndicator" class="text-center my-4" style="display: none;">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-2">Loading library...</p>
    </div>
    
    <!-- Results Info -->
    <div id="resultsInfo" class="alert alert-info" style="display: none;">
        <span id="resultCount">0</span> songs found
        <div id="currentGenreInfo" class="mt-2" style="display: none;">
            <small><strong>Current song genre:</strong> <span id="currentGenre"></span> - Similar genres get boosted! 🎵</small>
        </div>
    </div>
    
    <!-- Song List -->
    <div class="card">
        <div class="card-body">
            <div id="songList" class="list-group">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i>
                    <strong>Tip:</strong> Enter at least one search filter (Artist, Title, Album, Genre, or Year) to browse the library.
                    Use partial matches for broader results (e.g., "rock" will find all rock artists).
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.song-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

.song-item:hover {
    background-color: #f8f9fa;
}

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

.song-artist {
    color: #666;
    font-size: 0.9em;
}

.song-details {
    color: #999;
    font-size: 0.85em;
}

.add-btn {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.song-item:hover .add-btn {
    opacity: 1;
}

.badge {
    font-size: 0.75em;
    margin-left: 0.5em;
}

.btn-group {
    gap: 0;
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
</style>

<script>
let currentServerId = null;
let allSongs = [];
let songPreferences = {};
let artistPreferences = {};

// Clear library cache when re-index completes
async function clearLibraryCacheOnReindexComplete() {
    try {
        console.log('Clearing library cache after re-index completion...');
        const response = await fetch('/api/kosmik-dj/settings/clear-cache', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.error) {
            console.error('Error clearing cache after re-index:', data.error);
        } else {
            console.log('Library cache cleared successfully after re-index');
        }
    } catch (error) {
        console.error('Error clearing cache after re-index:', error);
    }
}

// Check update status on page load
async function checkUpdateStatusOnLoad() {
    console.log('checkUpdateStatusOnLoad called');
    const serverId = window.currentServerId;
    console.log('window.currentServerId:', serverId);
    
    if (!serverId) {
        console.log('No serverId found, skipping update status check');
        return;
    }
    
    try {
        // Check both MPD update status and sync status
        const [updateResponse, syncResponse] = await Promise.all([
            fetch(`/api/library/${serverId}/update-status`),
            fetch('/api/library/sync-status')
        ]);
        
        const updateData = await updateResponse.json();
        const syncData = await syncResponse.json();
        
        const btn = document.getElementById('reindexBtn');
        console.log('Updating_db value:', updateData.updating_db);
        console.log('Sync status:', syncData);
        
        // Check if either MPD update or library sync is running
        const isSyncRunning = syncData.running && syncData.server_address;
        const isCurrentServerSync = isSyncRunning && (
            syncData.server_address === getServerAddress(serverId) ||
            syncData.server_address.includes(window.currentServerInfo?.name?.toLowerCase()) ||
            (window.currentServerInfo && syncData.server_address === `${window.currentServerInfo.address}:${window.currentServerInfo.port}`)
        );
        
        if (updateData.updating_db || isCurrentServerSync) {
            console.log('Update or sync in progress detected!');
            console.log('Sync running for:', syncData.server_address);
            console.log('Current server:', getServerAddress(serverId));
            
            // Update is in progress
            btn.disabled = true;
            
            if (isSyncRunning) {
                // Show sync status
                btn.innerHTML = `<i class="fas fa-sync-alt fa-spin me-1"></i> ${getSyncStatusText(syncData.progress)}`;
                btn.className = 'btn btn-secondary';
                btn.title = `Library sync in progress: ${syncData.progress}`;
                
                // Start polling sync status
                pollSyncStatus(btn, '<i class="fas fa-sync-alt me-1"></i> Re-index Library');
            } else {
                // Show MPD update status
                btn.innerHTML = '<i class="fas fa-sync-alt fa-spin me-1"></i> Re-indexing...';
                btn.className = 'btn btn-secondary';
                btn.title = 'Library re-index is currently in progress...';
                
                // Start polling MPD update status
                pollUpdateStatus(serverId, btn, '<i class="fas fa-sync-alt me-1"></i> Re-index Library');
            }
        } else {
            console.log('No update or sync in progress');
            console.log('Sync running:', isSyncRunning);
            console.log('Sync server:', syncData.server_address);
            console.log('Current server:', getServerAddress(serverId));
        }
        
    } catch (error) {
        console.error('Error checking update status:', error);
    }
}

function getServerAddress(serverId) {
    // Try multiple ways to get the server address
    if (window.currentServerInfo && window.currentServerInfo.address) {
        const server = window.currentServerInfo;
        return `${server.address}:${server.port}`;
    }
    
    // Fallback: try to get from server list if available
    if (window.servers && window.servers[serverId]) {
        const server = window.servers[serverId];
        return `${server.address}:${server.port}`;
    }
    
    // Final fallback: return empty string
    console.warn('Could not determine server address for serverId:', serverId);
    return '';
}

function getSyncStatusText(progress) {
    const statusMap = {
        'reindexing': 'Re-indexing...',
        'waiting_for_mpd': 'Waiting for MPD...',
        'syncing': 'Syncing...',
        'completed': 'Completing...'
    };
    return statusMap[progress] || 'Processing...';
}

// Load preferences
async function loadPreferences() {
    try {
        const [songsResp, artistsResp] = await Promise.all([
            fetch('/api/preferences/my/songs'),
            fetch('/api/preferences/my/artists')
        ]);
        
        const songsData = await songsResp.json();
        const artistsData = await artistsResp.json();
        
        console.log('Songs API response:', songsData);
        console.log('Artists API response:', artistsData);
        
        // Build lookup maps
        songPreferences = {};
        if (songsData.preferences) {
            songsData.preferences.forEach(pref => {
                const key = `${pref.title}|||${pref.artist}`;
                songPreferences[key] = pref.preference;
            });
        }
        
        artistPreferences = {};
        if (artistsData.preferences) {
            artistsData.preferences.forEach(pref => {
                artistPreferences[pref.artist] = pref.preference;
                console.log(`Loaded artist pref: ${pref.artist} = ${pref.preference}`);
            });
        }
        
        console.log('Artist preferences loaded:', artistPreferences);
    } catch (error) {
        console.error('Error loading preferences:', error);
    }
}

async function toggleSongPreference(title, artist, type, event) {
    event.stopPropagation();
    
    const current = getSongPreference(title, artist, songPreferences);
    const newPref = current === type ? null : type;
    
    try {
        if (newPref) {
            await fetch('/api/preferences/song', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title, artist, preference: newPref })
            });
        } else {
            await fetch('/api/preferences/song', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ title, artist })
            });
        }
        
        // Update local cache
        const key = `${title}|||${artist}`;
        if (newPref) {
            songPreferences[key] = newPref;
        } else {
            delete songPreferences[key];
        }
        
        // Refresh display
        displaySongs(allSongs);
    } catch (error) {
        console.error('Error updating preference:', error);
    }
}

async function toggleArtistPreference(artist, type, event) {
    event.stopPropagation();
    
    const normalizedArtist = normalizeArtist(artist);
    const current = getArtistPreference(artist, artistPreferences);
    const newPref = current === type ? null : type;
    
    try {
        if (newPref) {
            await fetch('/api/preferences/artist', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ artist: normalizedArtist, preference: newPref })
            });
        } else {
            await fetch('/api/preferences/artist', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ artist: normalizedArtist })
            });
        }
        
        // Update local cache with normalized name
        if (newPref) {
            artistPreferences[normalizedArtist] = newPref;
        } else {
            delete artistPreferences[normalizedArtist];
        }
        
        // Refresh display
        displaySongs(allSongs);
    } catch (error) {
        console.error('Error updating preference:', error);
    }
}


// Search library
async function searchLibrary() {
    // Use window.currentServerId to ensure we access the global variable
    const serverId = window.currentServerId || currentServerId;
    console.log('searchLibrary: currentServerId =', serverId, 'window.currentServerId =', window.currentServerId);
    
    if (!serverId) {
        alert('Please select a server first');
        return;
    }
    
    const artistFilter = document.getElementById('artistFilter').value;
    const titleFilter = document.getElementById('titleFilter').value;
    const albumFilter = document.getElementById('albumFilter').value;
    const genreFilter = document.getElementById('genreFilter').value;
    const yearFilter = document.getElementById('yearFilter').value;
    
    // Require at least one filter
    if (!artistFilter && !titleFilter && !albumFilter && !genreFilter && !yearFilter) {
        alert('Please enter at least one search filter (Artist, Title, Album, Genre, or Year)');
        return;
    }
    
    // Build query string
    const params = new URLSearchParams();
    if (artistFilter) params.append('artist', artistFilter);
    if (titleFilter) params.append('title', titleFilter);
    if (albumFilter) params.append('album', albumFilter);
    if (genreFilter) params.append('genre', genreFilter);
    if (yearFilter) params.append('year', yearFilter);
    
    // Update URL with search parameters
    const newUrl = `${window.location.pathname}?${params.toString()}`;
    window.history.pushState({ search: true }, '', newUrl);
    
    // Show loading
    document.getElementById('loadingIndicator').style.display = 'block';
    document.getElementById('songList').innerHTML = '';
    document.getElementById('resultsInfo').style.display = 'none';
    
    try {
        const response = await fetch(`/api/library/${serverId}/songs?${params}`);
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        allSongs = data.songs;
        displaySongs(allSongs);
        
        // Show results count
        document.getElementById('resultCount').textContent = allSongs.length;
        document.getElementById('resultsInfo').style.display = 'block';
        
        // Show current genre info if available and enabled
        const currentGenreInfo = document.getElementById('currentGenreInfo');
        const currentGenre = document.getElementById('currentGenre');
        if (data.current_genre && data.genre_multiplier_enabled) {
            currentGenre.textContent = data.current_genre;
            currentGenreInfo.style.display = 'block';
        } else {
            currentGenreInfo.style.display = 'none';
        }
        
    } catch (error) {
        console.error('Error searching library:', error);
        document.getElementById('songList').innerHTML = `
            <div class="alert alert-danger">
                Error loading library: ${error.message}
            </div>
        `;
    } finally {
        document.getElementById('loadingIndicator').style.display = 'none';
    }
}

// Display songs
function displaySongs(songs) {
    const songList = document.getElementById('songList');
    
    if (songs.length === 0) {
        songList.innerHTML = '<div class="text-muted text-center py-4">No songs found</div>';
        return;
    }
    
    songList.innerHTML = '';
    
    songs.forEach(song => {
        const item = document.createElement('div');
        item.className = 'list-group-item song-item d-flex justify-content-between align-items-start';
        
        const duration = formatTime(song.duration);
        const year = song.date ? ` (${String(song.date).substring(0, 4)})` : '';
        
        // Get current preferences
        const songPref = getSongPreference(song.title, song.artist, songPreferences);
        const artistPref = getArtistPreference(song.artist, artistPreferences);
        console.log(`Checking artist "${song.artist}": pref = ${artistPref}`);
        
        // Format probability
        const probDisplay = song.probability !== undefined ? 
            `<span class="badge bg-info" title='Probability based on ${song.likes} likes, ${song.dislikes} dislikes${song.genre_multiplier > 1 ? ', genre boost: ' + song.genre_multiplier + 'x' : ''}'>
                P: ${song.probability.toFixed(2)}${song.genre_multiplier > 1 ? ' 🎵' : ''}
            </span>` : '';
        
        item.innerHTML = `
            <div class="flex-grow-1">
                <div class="song-title">${escapeHtml(song.title)} ${probDisplay}</div>
                <div class="song-artist">${escapeHtml(song.artist)}</div>
                <div class="song-details">
                    ${escapeHtml(song.album)}${year}
                    ${song.genre ? ' • ' + escapeHtml(song.genre) : ''}
                    • ${duration}
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="btn-group" role="group">
                    <button class="btn btn-sm ${songPref === 'like' ? 'btn-danger' : 'btn-outline-secondary'}" 
                            data-action="like-song" 
                            data-title="${escapeHtml(song.title)}"
                            data-artist="${escapeHtml(song.artist)}"
                            title="Like Song">
                        <i class="fas fa-heart"></i>
                    </button>
                    <button class="btn btn-sm ${songPref === 'block' ? 'btn-danger' : 'btn-outline-secondary'}" 
                            data-action="block-song"
                            data-title="${escapeHtml(song.title)}"
                            data-artist="${escapeHtml(song.artist)}"
                            title="Block Song">
                        <i class="fas fa-ban"></i>
                    </button>
                </div>
                <div class="btn-group" role="group">
                    <button class="btn btn-sm ${artistPref === 'like' ? 'btn-danger' : 'btn-outline-secondary'}" 
                            data-action="like-artist"
                            data-artist="${escapeHtml(song.artist)}"
                            title="Like Artist">
                        <i class="fas fa-heart"></i>
                    </button>
                    <button class="btn btn-sm ${artistPref === 'block' ? 'btn-warning' : 'btn-outline-secondary'}" 
                            data-action="block-artist"
                            data-artist="${escapeHtml(song.artist)}"
                            title="Block Artist">
                        <i class="fas fa-ban"></i>
                    </button>
                </div>
                <button class="btn btn-sm btn-primary add-btn" 
                        data-action="add-to-playlist"
                        data-file="${escapeHtml(song.file)}"
                        title="Add to Playlist">
                    <i class="fas fa-plus"></i> Add
                </button>
            </div>
        `;
        
        songList.appendChild(item);
        
        // Add event listeners for the buttons
        item.querySelector('[data-action="like-song"]').addEventListener('click', (e) => {
            const title = e.target.closest('[data-action="like-song"]').dataset.title;
            const artist = e.target.closest('[data-action="like-song"]').dataset.artist;
            toggleSongPreference(title, artist, 'like', e);
        });
        
        item.querySelector('[data-action="block-song"]').addEventListener('click', (e) => {
            const title = e.target.closest('[data-action="block-song"]').dataset.title;
            const artist = e.target.closest('[data-action="block-song"]').dataset.artist;
            toggleSongPreference(title, artist, 'block', e);
        });
        
        item.querySelector('[data-action="like-artist"]').addEventListener('click', (e) => {
            const artist = e.target.closest('[data-action="like-artist"]').dataset.artist;
            toggleArtistPreference(artist, 'like', e);
        });
        
        item.querySelector('[data-action="block-artist"]').addEventListener('click', (e) => {
            const artist = e.target.closest('[data-action="block-artist"]').dataset.artist;
            toggleArtistPreference(artist, 'block', e);
        });
        
        item.querySelector('[data-action="add-to-playlist"]').addEventListener('click', (e) => {
            const file = e.target.closest('[data-action="add-to-playlist"]').dataset.file;
            addToPlaylist(file, e);
        });
    });
}

// Re-index library
async function reindexLibrary() {
    // Use window.currentServerId to ensure we access the global variable
    const serverId = window.currentServerId || currentServerId;
    if (!serverId) {
        console.error('No server ID available');
        return;
    }
    
    const btn = document.getElementById('reindexBtn');
    const originalHtml = btn.innerHTML;
    
    // Show loading state
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-sync-alt fa-spin me-1"></i> Starting...';
    btn.className = 'btn btn-secondary';
    btn.title = 'Starting library sync...';
    
    try {
        // Start the new sync instead of old reindex
        const response = await fetch(`/api/library/${serverId}/sync`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (!response.ok) {
            throw new Error(data.error || 'Failed to start sync');
        }
        
        console.log('Sync started:', data);
        
        // Start polling sync status
        pollSyncStatus(btn, originalHtml);
        
    } catch (error) {
        console.error('Error starting sync:', error);
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Sync Failed';
        btn.className = 'btn btn-danger';
        btn.title = `Failed to start sync: ${error.message}`;
        
        // Reset after 3 seconds
        setTimeout(() => {
            btn.innerHTML = originalHtml;
            btn.className = 'btn btn-warning';
            btn.title = 'Re-index the library if new songs were added';
        }, 3000);
    }
}

// Poll the sync status until complete
async function pollSyncStatus(btn, originalHtml) {
    const startTime = Date.now();
    const maxDuration = 30 * 60 * 1000; // 30 minutes max for full sync
    let pollCount = 0;
    
    const poll = async () => {
        try {
            const response = await fetch('/api/library/sync-status');
            const data = await response.json();
            
            console.log(`Sync status poll ${++pollCount}:`, data);
            
            if (data.error) {
                console.error('Sync error:', data.error);
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Sync Failed';
                btn.className = 'btn btn-danger';
                btn.title = `Sync failed: ${data.error}`;
                return;
            }
            
            if (!data.running) {
                console.log('Sync completed!');
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-check me-1"></i> Sync Completed';
                btn.className = 'btn btn-success';
                btn.title = 'Library sync completed successfully!';
                
                // Clear library cache since database may have changed
                clearLibraryCacheOnReindexComplete();
                
                // Reset after 3 seconds
                setTimeout(() => {
                    btn.innerHTML = originalHtml;
                    btn.className = 'btn btn-warning';
                    btn.title = 'Re-index the library if new songs were added';
                }, 3000);
                return;
            }
            
            // Update progress
            if (data.progress) {
                btn.innerHTML = `<i class="fas fa-sync-alt fa-spin me-1"></i> ${getSyncStatusText(data.progress)}`;
                btn.title = `Library sync in progress: ${data.progress}`;
                if (data.elapsed_time) {
                    btn.title += ` (${data.elapsed_time})`;
                }
            }
            
            // Check timeout
            if (Date.now() - startTime > maxDuration) {
                console.log('Sync status polling timed out');
                btn.disabled = false;
                btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Sync Timeout';
                btn.className = 'btn btn-warning';
                btn.title = 'Sync status polling timed out';
                return;
            }
            
            // Continue polling
            setTimeout(poll, 2000); // Poll every 2 seconds
            
        } catch (error) {
            console.error('Error polling sync status:', error);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Status Error';
            btn.className = 'btn btn-danger';
            btn.title = 'Error checking sync status';
        }
    };
    
    // Start polling
    poll();
}

// Poll the update status until complete
async function pollUpdateStatus(serverId, btn, originalHtml) {
    const startTime = Date.now();
    const maxDuration = 10 * 60 * 1000; // 10 minutes max
    let pollCount = 0;
    
    const poll = async () => {
        try {
            const response = await fetch(`/api/library/${serverId}/update-status`);
            const data = await response.json();
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            pollCount++;
            
            // Update button with progress
            const elapsed = Math.floor((Date.now() - startTime) / 1000);
            const minutes = Math.floor(elapsed / 60);
            const seconds = elapsed % 60;
            const timeStr = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
            
            if (data.updating_db) {
                btn.innerHTML = `<i class="fas fa-spinner fa-spin me-1"></i> Re-indexing... (${timeStr})`;
                
                // Check timeout
                if (Date.now() - startTime > maxDuration) {
                    btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Timeout';
                    btn.className = 'btn btn-warning';
                    setTimeout(() => {
                        btn.innerHTML = originalHtml;
                        btn.className = 'btn btn-warning';
                        btn.disabled = false;
                    }, 3000);
                    return;
                }
                
                // Continue polling
                setTimeout(poll, 2000); // Poll every 2 seconds
            } else {
                // Re-index complete!
                btn.innerHTML = '<i class="fas fa-check me-1"></i> Re-index Complete!';
                btn.className = 'btn btn-success';
                
                // Clear library cache since database may have changed
                clearLibraryCacheOnReindexComplete();
                
                // Reset after 3 seconds
                setTimeout(() => {
                    btn.innerHTML = originalHtml;
                    btn.className = 'btn btn-warning';
                    btn.disabled = false;
                }, 3000);
            }
            
        } catch (error) {
            console.error('Error polling update status:', error);
            btn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i> Error';
            btn.className = 'btn btn-danger';
            setTimeout(() => {
                btn.innerHTML = originalHtml;
                btn.className = 'btn btn-warning';
                btn.disabled = false;
            }, 3000);
        }
    };
    
    // Start polling
    poll();
}
async function addToPlaylist(file, event) {
    event.stopPropagation();
    
    // Use window.currentServerId to ensure we access the global variable
    const serverId = window.currentServerId || currentServerId;
    if (!serverId) {
        alert('No server selected');
        return;
    }
    
    try {
        const response = await fetch(`/api/library/${serverId}/add`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ file: file })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        // Show success feedback
        const btn = event.target.closest('button');
        const originalHtml = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-check"></i> Added';
        btn.disabled = true;
        
        setTimeout(() => {
            btn.innerHTML = originalHtml;
            btn.disabled = false;
        }, 2000);
        
    } catch (error) {
        console.error('Error adding song:', error);
        alert('Error adding song: ' + error.message);
    }
}

// Helper functions
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;
}

// Read URL parameters and populate search fields
function loadSearchFromUrl() {
    const params = new URLSearchParams(window.location.search);
    
    const artistFilter = params.get('artist');
    const titleFilter = params.get('title');
    const albumFilter = params.get('album');
    const genreFilter = params.get('genre');
    const yearFilter = params.get('year');
    
    // Populate search fields
    if (artistFilter) document.getElementById('artistFilter').value = artistFilter;
    if (titleFilter) document.getElementById('titleFilter').value = titleFilter;
    if (albumFilter) document.getElementById('albumFilter').value = albumFilter;
    if (genreFilter) document.getElementById('genreFilter').value = genreFilter;
    if (yearFilter) document.getElementById('yearFilter').value = yearFilter;
    
    // If we have any search parameters, perform the search
    if (artistFilter || titleFilter || albumFilter || genreFilter || yearFilter) {
        // Wait a bit for server info to load, then auto-search
        setTimeout(() => {
            searchLibrary();
        }, 600); // Slightly longer than the server info load delay
    }
}

// Event listeners
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded event fired');
    loadPreferences();
    console.log('About to call checkUpdateStatusOnLoad');
    
    // Load search from URL parameters
    loadSearchFromUrl();
    
    // Wait a bit for server info to load
    setTimeout(() => {
        console.log('Delayed call to checkUpdateStatusOnLoad');
        checkUpdateStatusOnLoad();
    }, 500); // Wait 500ms for server info to load
    
    document.getElementById('searchBtn').addEventListener('click', searchLibrary);
    document.getElementById('reindexBtn').addEventListener('click', reindexLibrary);
    
    // Search on Enter key
    ['artistFilter', 'titleFilter', 'albumFilter', 'genreFilter', 'yearFilter'].forEach(id => {
        document.getElementById(id).addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                searchLibrary();
            }
        });
    });
    
    // Handle browser back/forward buttons
    window.addEventListener('popstate', (event) => {
        if (event.state && event.state.search) {
            // Reload search from URL when navigating back
            loadSearchFromUrl();
        }
    });
});
</script>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/preferences.js') }}"></script>
{% endblock %}