{% extends 'base.html' %}

{% block title %}kosmikDJ{% endblock %}

{% block extra_css %}
<style>
    .player-card {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
    }
    .player-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 20px 0;
        flex-wrap: wrap;
    }
    .player-controls .btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .player-controls .btn-play {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    .player-controls-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }
    @media (max-width: 768px) {
        .row.justify-content-center .col-lg-8 {
            max-width: 100%;
            flex: 0 0 100%;
        }
        .player-controls {
            flex-direction: column;
            gap: 10px;
            width: 100%;
        }
        .player-controls-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            width: 100%;
        }
        .player-controls .btn {
            width: 40px;
            height: 40px;
            font-size: 0.9rem;
        }
        .player-controls .btn-play {
            width: 50px;
            height: 50px;
            font-size: 1.1rem;
        }
        .queue-list {
            width: 100%;
        }
        .queue-item {
            width: 100%;
        }
    }
    .now-playing {
        text-align: center;
        padding: 20px;
    }
    .now-playing .track-title {
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .now-playing .track-artist {
        font-size: 1.1rem;
        opacity: 0.8;
    }
    .now-playing .track-album {
        font-size: 0.9rem;
        opacity: 0.6;
    }
    
    /* Clickable track links */
    .track-link {
        color: inherit;
        text-decoration: none;
        display: inline-block;
        transition: transform 0.2s ease;
    }
    .track-link:hover {
        transform: scale(1.02);
        color: inherit;
        text-decoration: none;
    }
    .now-playing .track-link:hover {
        color: #fff;
    }
    .queue-item .track-link:hover {
        color: #fff;
    }
    .progress-container {
        padding: 0 20px;
        margin-bottom: 15px;
    }
    .progress {
        height: 8px;
        cursor: pointer;
        background-color: rgba(255,255,255,0.2);
        transition: background-color 0.2s ease;
        position: relative;
    }
    .progress:hover {
        background-color: rgba(255,255,255,0.3);
    }
    .progress-bar {
        background-color: #17a2b8;
    }
    .seek-indicator {
        position: absolute;
        top: 0;
        width: 2px;
        height: 100%;
        background-color: #fff;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }
    .progress:hover .seek-indicator {
        opacity: 0.7;
    }
    .time-display {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        opacity: 0.7;
        margin-top: 5px;
    }
    .queue-list {
        overflow-y: visible;
    }
    .queue-item {
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        cursor: pointer;
        transition: background-color 0.2s;
        color: #fff;
    }
    .queue-item:hover {
        background-color: rgba(255,255,255,0.1);
    }
    .queue-item.current {
        background-color: rgba(23,162,184,0.3);
        border-left: 3px solid #17a2b8;
    }
    .queue-item .track-info {
        display: flex;
        justify-content: space-between;
    }
    .queue-item .track-title {
        font-weight: 500;
    }
    .queue-item .track-artist {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.7);
    }
    .queue-item .track-album {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.5);
        margin-top: 2px;
    }
    /* Queue item preferences */
    .queue-item .pref-btns {
        display: flex;
        gap: 5px;
        margin-left: 10px;
        align-items: center;
    }
    .queue-item .pref-btn {
        color: rgba(255,255,255,0.5);
        font-size: 0.9rem;
        padding: 2px 5px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .queue-item .pref-btn:hover {
        background: rgba(255,255,255,0.1);
    }
    .queue-item .pref-btn.liked {
        color: #e74c3c;
    }
    .queue-item .pref-btn.blocked {
        color: #f39c12;
    }
    .queue-item .pref-btn[disabled] {
        color: rgba(255,255,255,0.2) !important;
        opacity: 0.3 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }
    .queue-item .pref-btn[disabled]:hover {
        background: none !important;
        color: rgba(255,255,255,0.2) !important;
    }
    @media (max-width: 768px) {
        .queue-item .track-info {
            flex-direction: column;
            align-items: stretch;
        }
        .queue-item .track-main {
            margin-bottom: 10px;
            padding: 5px 0;
            min-height: 44px; /* Minimum touch target size */
        }
        .queue-item .pref-btns {
            margin-left: 0;
            justify-content: flex-start;
            gap: 6px;
        }
        .queue-item .pref-btn {
            font-size: 0.8rem;
            padding: 6px 8px;
            min-width: 36px;
            min-height: 36px;
            border-radius: 4px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
        }
        .queue-item .pref-btn i {
            font-size: 0.9rem;
        }
    }
    .mode-btn {
        opacity: 0.5;
    }
    .mode-btn.active {
        opacity: 1;
        color: #17a2b8 !important;
    }
    .server-offline {
        text-align: center;
        padding: 40px;
        color: #666;
    }
    .volume-control {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 20px;
        margin-bottom: 15px;
    }
    .volume-control input[type="range"] {
        flex: 1;
    }
    /* Preference buttons */
    .pref-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
        padding: 0 20px;
    }
    .pref-btn {
        background: none;
        border: none;
        color: rgba(255,255,255,0.5);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all 0.2s;
    }
    .pref-btn:hover {
        color: rgba(255,255,255,0.8);
        background: rgba(255,255,255,0.1);
    }
    .pref-btn.liked {
        color: #e74c3c;
    }
    .pref-btn.blocked {
        color: #f39c12;
    }
    .artist-dropdown {
        position: relative;
        color: #f39c12 !important;
    }
    .artist-dropdown-content {
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 10;
        min-width: 140px;
    }
    .artist-dropdown-content a {
        display: block;
        padding: 8px 12px;
        cursor: pointer;
        color: #f39c12;
        text-decoration: none;
    }
    .artist-dropdown-content a:hover {
        background-color: rgba(243, 156, 18, 0.1);
        color: #d68910;
    }
    .artist-dropdown-content a.liked {
        color: #e74c3c;
    }
    .artist-dropdown-content a.blocked {
        color: #f39c12;
    }
    .artist-dropdown-content.show {
        display: block;
    }
    .queue-dropdown-item {
        display: block;
        padding: 8px 12px;
        cursor: pointer;
        color: #f39c12;
        text-decoration: none;
    }
    .queue-dropdown-item:hover {
        background-color: rgba(243, 156, 18, 0.1);
        color: #d68910;
    }
    .queue-dropdown-item.liked {
        color: #e74c3c;
    }
    .queue-dropdown-item.blocked {
        color: #f39c12;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="text-center mb-4">
        <h1><i class="fas fa-music"></i> kosmikDJ</h1>
    </div>
    
    {% if current_user and current_user.is_authenticated %}
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Server Info -->
            {% include 'components/server_info.html' %}
            
            <!-- Player Card -->
            <div id="playerCard" class="card player-card mb-4" style="display: none;">
                <div class="card-body">
                    <!-- kosmik-DJ Toggle -->
                    <div class="d-flex justify-content-center align-items-center mb-3 pb-3" style="border-bottom: 1px solid rgba(255,255,255,0.1);">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="kosmikDjToggle" style="cursor: pointer;">
                            <label class="form-check-label text-white" for="kosmikDjToggle" style="cursor: pointer;">
                                <strong>kosmik-DJ</strong>
                            </label>
                        </div>
                        <button class="btn btn-link text-white p-0 ms-2" data-bs-toggle="modal" data-bs-target="#kosmikDjHelpModal" title="Was ist kosmik-DJ?">
                            <i class="fas fa-question-circle"></i>
                        </button>
                    </div>
                    
                    <!-- Now Playing -->
                    <div class="now-playing">
                        <div id="trackTitle" class="track-title">-</div>
                        <div id="trackArtist" class="track-artist">-</div>
                        <div id="trackAlbum" class="track-album"></div>
                        
                        <!-- Song/Artist Preferences -->
                        <div class="pref-actions" id="nowPlayingPrefs">
                            <button class="pref-btn" id="btnLikeSong" title="Like Song">
                                <i class="fas fa-heart"></i>
                            </button>
                            <button class="pref-btn" id="btnBlockSong" title="Block Song">
                                <i class="fas fa-ban"></i>
                            </button>
                            <div class="artist-dropdown">
                                <button class="pref-btn" id="btnArtistMenu" title="Artist Options">
                                    <i class="fas fa-user"></i> <i class="fas fa-caret-down"></i>
                                </button>
                                <div class="artist-dropdown-content" id="artistDropdown">
                                    <a id="btnLikeArtist"><i class="fas fa-heart"></i> Like Artist</a>
                                    <a id="btnBlockArtist"><i class="fas fa-ban"></i> Block Artist</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Progress Bar -->
                    <div class="progress-container">
                        <div class="progress" id="progressBar">
                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                            <div class="seek-indicator" id="seekIndicator"></div>
                        </div>
                        <div class="time-display">
                            <span id="timeElapsed">0:00</span>
                            <span id="timeDuration">0:00</span>
                        </div>
                    </div>
                    
                    <!-- Volume -->
                    <div class="volume-control">
                        <i class="fas fa-volume-down"></i>
                        <input type="range" class="form-range" id="volumeSlider" min="0" max="100" value="50">
                        <i class="fas fa-volume-up"></i>
                    </div>
                    
                    <!-- Controls -->
                    <div class="player-controls">
                        <div class="player-controls-row">
                            <button class="btn btn-outline-light mode-btn" id="btnConsume" title="Consume (remove tracks after playing)">
                                <i class="fas fa-fire"></i>
                            </button>
                            <button class="btn btn-outline-light mode-btn" id="btnRandom" title="Shuffle">
                                <i class="fas fa-random"></i>
                            </button>
                            <button class="btn btn-outline-light" id="btnPrev" title="Previous">
                                <i class="fas fa-step-backward"></i>
                            </button>
                            <button class="btn btn-light btn-play" id="btnPlayPause" title="Play/Pause">
                                <i class="fas fa-play"></i>
                            </button>
                            <button class="btn btn-outline-light" id="btnNext" title="Next">
                                <i class="fas fa-step-forward"></i>
                            </button>
                            <button class="btn btn-outline-light mode-btn" id="btnRepeat" title="Repeat">
                                <i class="fas fa-redo"></i>
                            </button>
                        </div>
                        <div class="player-controls-row">
                            <button class="btn btn-outline-success" id="btnAddToPlaylist" title="Add Current Song to Playlist">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- Queue Section -->
                    <div class="mt-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="text-white mb-0">
                                <i class="fas fa-list me-2"></i>Up Next
                            </h5>
                        </div>
                        <div class="queue-list" id="queueList">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Offline Message -->
            <div id="offlineMessage" class="card mb-4" style="display: none;">
                <div class="server-offline">
                    <i class="fas fa-exclamation-circle fa-3x mb-3"></i>
                    <p id="offlineError">Cannot connect to server</p>
                </div>
            </div>
        </div>
    </div>
    {% else %}
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body text-center">
                    <p class="mb-3">Please log in to access the player controls.</p>
                    <a href="{{ url_for('nbsplogin.login') }}" class="btn btn-primary">
                        <i class="fas fa-sign-in-alt"></i> Login
                    </a>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- kosmik-DJ Help Modal -->
<div class="modal fade" id="kosmikDjHelpModal" tabindex="-1" aria-labelledby="kosmikDjHelpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="kosmikDjHelpModalLabel"><i class="fas fa-magic me-2"></i>Was ist kosmik-DJ?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>kosmik-DJ</strong> ist ein intelligentes Feature, das automatisch die Playlist basierend auf den Musikvorlieben aller eingeloggten Benutzer füllt.</p>
                <p>Wenn aktiviert:</p>
                <ul>
                    <li><i class="fas fa-heart text-danger me-2"></i>Songs und Künstler, die von vielen Benutzern gelikt wurden, werden bevorzugt</li>
                    <li><i class="fas fa-ban text-warning me-2"></i>Geblockte Songs und Künstler werden vermieden</li>
                    <li><i class="fas fa-users me-2"></i>Die Auswahl passt sich dynamisch an, je nachdem wer gerade eingeloggt ist</li>
                </ul>
                <p class="mb-0"><small class="text-muted">Jeder eingeloggte Benutzer kann dieses Feature für einen Server aktivieren oder deaktivieren. Die Änderung wird für alle Benutzer übernommen.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if current_user and current_user.is_authenticated %}
<script>
let currentServerId = null;
let refreshInterval = null;
let progressInterval = null;
let statusCheckInterval = null;
let currentElapsed = 0;
let currentDuration = 0;
let isPlaying = false;
let lastStatusTime = 0;
let currentTrack = { title: '', artist: '', file: '' };
let userPrefs = { songs: {}, artists: {} };
let kosmikDjEnabled = false;

// Format time as M:SS
function formatTime(seconds) {
    if (!seconds || isNaN(seconds)) return '0:00';
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
}

// Update progress display (called frequently for smooth updates)
function updateProgressDisplay() {
    if (isPlaying && currentDuration > 0) {
        // Calculate elapsed time since last status update
        const timeSinceUpdate = (Date.now() - lastStatusTime) / 1000;
        const estimatedElapsed = Math.min(currentElapsed + timeSinceUpdate, currentDuration);
        
        const progress = (estimatedElapsed / currentDuration) * 100;
        document.querySelector('.progress-bar').style.width = `${progress}%`;
        document.getElementById('timeElapsed').textContent = formatTime(estimatedElapsed);
    }
}

// Start smooth progress updates
function startProgressUpdates() {
    if (progressInterval) clearInterval(progressInterval);
    progressInterval = setInterval(updateProgressDisplay, 100);
}

// Load user preferences
async function loadPreferences() {
    try {
        const [songsRes, artistsRes] = await Promise.all([
            fetch('/api/preferences/my/songs'),
            fetch('/api/preferences/my/artists')
        ]);
        const songsData = await songsRes.json();
        const artistsData = await artistsRes.json();
        
        userPrefs.songs = {};
        songsData.preferences.forEach(p => {
            userPrefs.songs[`${p.title}|||${p.artist}`] = p.preference;
        });
        
        userPrefs.artists = {};
        artistsData.preferences.forEach(p => {
            userPrefs.artists[p.artist] = p.preference;
        });
    } catch (error) {
        console.error('Error loading preferences:', error);
    }
}

// Create library search link
function createLibraryLink(type, value) {
    const params = new URLSearchParams();
    params.append(type, value);
    return `/library?${params.toString()}`;
}

// Create clickable link HTML
function createLinkHtml(type, value, text) {
    const href = createLibraryLink(type, value);
    return `<a href="${href}" class="track-link" onclick="window.open('${href}', '_blank'); return false;">${text}</a>`;
}

// Set song preference
async function setSongPreference(title, artist, preference) {
    try {
        const response = await fetch('/api/preferences/song', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title, artist, preference })
        });
        if (response.ok) {
            userPrefs.songs[`${title}|||${artist}`] = preference;
            updatePrefButtons();
            refreshQueue();
        }
    } catch (error) {
        console.error('Error setting song preference:', error);
    }
}

// Remove song preference
async function removeSongPreference(title, artist) {
    try {
        const response = await fetch('/api/preferences/song', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title, artist })
        });
        if (response.ok) {
            delete userPrefs.songs[`${title}|||${artist}`];
            updatePrefButtons();
            refreshQueue();
        }
    } catch (error) {
        console.error('Error removing song preference:', error);
    }
}

// Set artist preference
async function setArtistPreference(artist, preference) {
    const normalizedArtist = normalizeArtist(artist);
    try {
        const response = await fetch('/api/preferences/artist', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ artist: normalizedArtist, preference })
        });
        if (response.ok) {
            userPrefs.artists[normalizedArtist] = preference;
            updatePrefButtons();
            refreshQueue();
        }
    } catch (error) {
        console.error('Error setting artist preference:', error);
    }
}

// Remove artist preference
async function removeArtistPreference(artist) {
    const normalizedArtist = normalizeArtist(artist);
    try {
        const response = await fetch('/api/preferences/artist', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ artist: normalizedArtist })
        });
        if (response.ok) {
            delete userPrefs.artists[normalizedArtist];
            updatePrefButtons();
            refreshQueue();
        }
    } catch (error) {
        console.error('Error removing artist preference:', error);
    }
}

// Update preference button states
function updatePrefButtons() {
    const songPref = getSongPreference(currentTrack.title, currentTrack.artist, userPrefs.songs);
    const artistPref = getArtistPreference(currentTrack.artist, userPrefs.artists);
    
    const btnLikeSong = document.getElementById('btnLikeSong');
    const btnBlockSong = document.getElementById('btnBlockSong');
    const btnLikeArtist = document.getElementById('btnLikeArtist');
    const btnBlockArtist = document.getElementById('btnBlockArtist');
    
    btnLikeSong.classList.toggle('liked', songPref === 'like');
    btnBlockSong.classList.toggle('blocked', songPref === 'block');
    btnLikeArtist.classList.toggle('liked', artistPref === 'like');
    btnBlockArtist.classList.toggle('blocked', artistPref === 'block');
}


// Check kosmik-DJ status
async function checkKosmikDjStatus() {
    if (!currentServerId) return;
    
    try {
        const response = await fetch(`/api/kosmik-dj/${currentServerId}/status`);
        const data = await response.json();
        
        if (!data.error) {
            kosmikDjEnabled = data.kosmik_dj_enabled;
            document.getElementById('kosmikDjToggle').checked = kosmikDjEnabled;
        }
    } catch (error) {
        console.error('Error checking kosmik-DJ status:', error);
    }
}

// Toggle kosmik-DJ
async function toggleKosmikDj() {
    if (!currentServerId) return;
    
    try {
        const response = await fetch(`/api/kosmik-dj/${currentServerId}/toggle`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const data = await response.json();
        
        if (data.success) {
            kosmikDjEnabled = data.kosmik_dj_enabled;
            document.getElementById('kosmikDjToggle').checked = kosmikDjEnabled;
        }
    } catch (error) {
        console.error('Error toggling kosmik-DJ:', error);
    }
}

// Ensure consume mode is enabled
async function ensureConsumeEnabled() {
    if (!currentServerId) return;
    
    try {
        const response = await fetch(`/api/player/${currentServerId}/status`);
        const data = await response.json();
        
        if (!data.error && !data.consume) {
            // Consume is off, enable it
            await sendCommand('consume');
        }
    } catch (error) {
        console.error('Error ensuring consume mode:', error);
    }
}

// Select a server
function selectServer(serverId) {
    currentServerId = serverId;
    if (refreshInterval) clearInterval(refreshInterval);
    if (progressInterval) clearInterval(progressInterval);
    if (statusCheckInterval) clearInterval(statusCheckInterval);
    
    if (serverId) {
        // Enable consume mode by default (removes tracks after playing)
        ensureConsumeEnabled();
        refreshStatus();
        refreshQueue();
        checkKosmikDjStatus();
        startProgressUpdates();
        refreshInterval = setInterval(() => {
            refreshStatus();
            refreshQueue();
        }, 3000);
        // Check kosmik-DJ status every 5 seconds for real-time updates
        statusCheckInterval = setInterval(checkKosmikDjStatus, 5000);
    } else {
        document.getElementById('playerCard').style.display = 'none';
        document.getElementById('offlineMessage').style.display = 'none';
    }
}

// Refresh player status
async function refreshStatus() {
    if (!currentServerId) return;
    
    try {
        const response = await fetch(`/api/player/${currentServerId}/status`);
        const data = await response.json();
        
        if (data.error) {
            document.getElementById('playerCard').style.display = 'none';
            document.getElementById('offlineMessage').style.display = 'block';
            document.getElementById('offlineError').textContent = data.error;
            return;
        }
        
        document.getElementById('offlineMessage').style.display = 'none';
        document.getElementById('playerCard').style.display = 'block';
        
        // Update track info
        if (data.current_song) {
            // Make title clickable
            const title = data.current_song.title || '-';
            const titleHtml = title !== '-' ? createLinkHtml('title', title, title) : title;
            document.getElementById('trackTitle').innerHTML = titleHtml;
            
            // Add artist preference indicator to now playing
            const artist = data.current_song.artist || '-';
            const artistPref = getArtistPreference(artist, userPrefs.artists);
            let artistIndicator = '';
            if (artistPref === 'like') {
                artistIndicator = ' <i class="fas fa-heart text-danger" title="Liked Artist"></i>';
            } else if (artistPref === 'block') {
                artistIndicator = ' <i class="fas fa-ban text-danger" title="Blocked Artist"></i>';
            }
            
            // Make artist clickable
            const artistHtml = artist !== '-' ? createLinkHtml('artist', artist, artist) + artistIndicator : artist;
            document.getElementById('trackArtist').innerHTML = artistHtml;
            
            // Build album with genres and make them clickable
            const album = data.current_song.album || '';
            const genres = data.current_song.genre || '';
            let albumWithGenres = album;
            let genreList = [];
            
            if (genres && typeof genres === 'string') {
                genreList = genres.split(',').map(g => g.trim()).filter(g => g);
                if (genreList.length > 0) {
                    const genreTags = genreList.map(g => `#${g}`).join(' ');
                    albumWithGenres = album ? `${album} ${genreTags}` : genreTags;
                }
            }
            
            // Make album and genres clickable
            if (albumWithGenres) {
                let html = albumWithGenres;
                
                // Make album clickable if it exists
                if (album) {
                    html = html.replace(album, createLinkHtml('album', album, album));
                }
                
                // Make each genre clickable
                if (genreList && genreList.length > 0) {
                    genreList.forEach(genre => {
                        const genreTag = `#${genre}`;
                        html = html.replace(genreTag, createLinkHtml('genre', genre, genreTag));
                    });
                }
                
                document.getElementById('trackAlbum').innerHTML = html;
            } else {
                document.getElementById('trackAlbum').textContent = '';
            }
            currentTrack = {
                title: data.current_song.title || '',
                artist: data.current_song.artist || '',
                file: data.current_song.file || ''
            };
            document.getElementById('nowPlayingPrefs').style.display = 'flex';
            updatePrefButtons();
        } else {
            document.getElementById('trackTitle').textContent = '-';
            document.getElementById('trackArtist').textContent = '-';
            document.getElementById('trackAlbum').textContent = '';
            currentTrack = { title: '', artist: '', file: '' };
            document.getElementById('nowPlayingPrefs').style.display = 'none';
        }
        
        // Store state for smooth progress updates
        currentElapsed = data.elapsed;
        currentDuration = data.duration;
        isPlaying = data.state === 'play';
        lastStatusTime = Date.now();
        
        // Update progress display
        const progress = currentDuration > 0 ? (currentElapsed / currentDuration) * 100 : 0;
        document.querySelector('.progress-bar').style.width = `${progress}%`;
        document.getElementById('timeElapsed').textContent = formatTime(currentElapsed);
        document.getElementById('timeDuration').textContent = formatTime(currentDuration);
        
        // Update play/pause button
        const btnPlayPause = document.getElementById('btnPlayPause');
        if (isPlaying) {
            btnPlayPause.innerHTML = '<i class="fas fa-pause"></i>';
        } else {
            btnPlayPause.innerHTML = '<i class="fas fa-play"></i>';
        }
        
        // Update mode buttons
        document.getElementById('btnRandom').classList.toggle('active', data.random);
        document.getElementById('btnRepeat').classList.toggle('active', data.repeat);
        document.getElementById('btnConsume').classList.toggle('active', data.consume);
        
        // Update volume
        document.getElementById('volumeSlider').value = data.volume;
        
    } catch (error) {
        console.error('Error refreshing status:', error);
    }
}

// Move track in queue
async function moveTrack(position, direction) {
    console.log('moveTrack called with:', position, direction);
    try {
        const response = await fetch(`/api/player/${currentServerId}/move/${position}/${direction}`, {
            method: 'POST'
        });
        
        if (response.ok) {
            refreshQueue();
        } else {
            console.error('Failed to move track');
        }
    } catch (error) {
        console.error('Error moving track:', error);
    }
}

// Refresh queue
async function refreshQueue() {
    if (!currentServerId) return;
    
    try {
        const response = await fetch(`/api/player/${currentServerId}/queue`);
        const data = await response.json();
        
        if (data.error) return;
        
        const queueList = document.getElementById('queueList');
        queueList.innerHTML = '';
        
        data.queue.forEach(track => {
            const songPref = getSongPreference(track.title, track.artist, userPrefs.songs);
            const artistPref = getArtistPreference(track.artist, userPrefs.artists);
            const item = document.createElement('div');
            item.className = 'queue-item' + (track.is_current ? ' current' : '');
            // Artist preference indicator
            let artistIndicator = '';
            if (artistPref === 'like') {
                artistIndicator = ' <i class="fas fa-heart text-danger" title="Liked Artist"></i>';
            } else if (artistPref === 'block') {
                artistIndicator = ' <i class="fas fa-ban text-danger" title="Blocked Artist"></i>';
            }
            
            // Create clickable links
            const titleLink = createLinkHtml('title', track.title, track.title);
            const artistLink = createLinkHtml('artist', track.artist, track.artist);
            
            // Build album with genres for queue
            let albumWithGenres = '';
            if (track.album) {
                albumWithGenres = track.album;
                
                // Add genres if available
                if (track.genre && typeof track.genre === 'string') {
                    const genreList = track.genre.split(',').map(g => g.trim()).filter(g => g);
                    if (genreList.length > 0) {
                        const genreTags = genreList.map(g => `#${g}`).join(' ');
                        albumWithGenres += ` ${genreTags}`;
                    }
                }
            }
            
            // Make album and genres clickable
            let albumHtml = '';
            if (albumWithGenres) {
                let html = albumWithGenres;
                
                // Make album clickable
                if (track.album) {
                    html = html.replace(track.album, createLinkHtml('album', track.album, track.album));
                }
                
                // Make each genre clickable
                if (track.genre && typeof track.genre === 'string') {
                    const genreList = track.genre.split(',').map(g => g.trim()).filter(g => g);
                    genreList.forEach(genre => {
                        const genreTag = `#${genre}`;
                        html = html.replace(genreTag, createLinkHtml('genre', genre, genreTag));
                    });
                }
                
                albumHtml = `<div class="track-album">${html}</div>`;
            }
            
            item.innerHTML = `
                <div class="track-info">
                    <div class="track-main" style="flex: 1; cursor: pointer;">
                        <div class="track-title">${titleLink}</div>
                        <div class="track-artist">${artistLink}${artistIndicator}</div>
                        ${albumHtml}
                    </div>
                    <div class="pref-btns">
                        <button class="pref-btn ${songPref === 'like' ? 'liked' : ''}" data-action="like-song" title="Like Song">
                            <i class="fas fa-heart"></i>
                        </button>
                        <button class="pref-btn ${songPref === 'block' ? 'blocked' : ''}" data-action="block-song" title="Block Song">
                            <i class="fas fa-ban"></i>
                        </button>
                        <div class="artist-dropdown" style="position: relative;">
                            <button class="pref-btn" data-action="artist-menu" title="Artist Options">
                                <i class="fas fa-user"></i>
                            </button>
                            <div class="queue-artist-dropdown artist-dropdown-content">
                                <a class="queue-dropdown-item ${artistPref === 'like' ? 'liked' : ''}" data-action="like-artist"><i class="fas fa-heart"></i> Like Artist</a>
                                <a class="queue-dropdown-item ${artistPref === 'block' ? 'blocked' : ''}" data-action="block-artist"><i class="fas fa-ban"></i> Block Artist</a>
                            </div>
                        </div>
                        <button class="pref-btn" data-action="add-to-playlist" title="Add to Playlist">
                            <i class="fas fa-plus"></i>
                        </button>
                        ${track.pos <= 1 ? '' : `<button class="pref-btn" data-action="move-up" title="Move Up">
                            <i class="fas fa-arrow-up"></i>
                        </button>`}
                        ${track.pos >= data.queue.length ? '' : `<button class="pref-btn" data-action="move-down" title="Move Down">
                            <i class="fas fa-arrow-down"></i>
                        </button>`}
                        <button class="pref-btn" data-action="remove-track" title="Remove from Queue">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="text-muted ms-2 text-white-50">${formatTime(track.duration)}</div>
                </div>
            `;
            // Play on click (only on track info, not buttons or links)
            const trackMain = item.querySelector('.track-main');
            trackMain.addEventListener('click', (e) => {
                // Don't play if clicking on a link or button
                if (e.target.classList.contains('track-link') || 
                    e.target.closest('button') || 
                    e.target.closest('a')) {
                    return;
                }
                playTrack(track.pos);
            });
            
            // Like song button
            item.querySelector('[data-action="like-song"]').addEventListener('click', (e) => {
                e.stopPropagation();
                if (songPref === 'like') {
                    removeSongPreference(track.title, track.artist);
                } else {
                    setSongPreference(track.title, track.artist, 'like');
                }
            });
            
            // Block song button
            item.querySelector('[data-action="block-song"]').addEventListener('click', (e) => {
                e.stopPropagation();
                if (songPref === 'block') {
                    removeSongPreference(track.title, track.artist);
                } else {
                    setSongPreference(track.title, track.artist, 'block');
                }
            });
            
            // Artist menu toggle
            const artistMenuBtn = item.querySelector('[data-action="artist-menu"]');
            const artistDropdown = item.querySelector('.queue-artist-dropdown');
            artistMenuBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                // Close all other dropdowns first
                document.querySelectorAll('.queue-artist-dropdown, .artist-dropdown-content').forEach(d => {
                    if (d !== artistDropdown) d.classList.remove('show');
                });
                artistDropdown.classList.toggle('show');
            });
            
            // Like artist
            item.querySelector('[data-action="like-artist"]').addEventListener('click', (e) => {
                e.stopPropagation();
                if (artistPref === 'like') {
                    removeArtistPreference(track.artist);
                } else {
                    setArtistPreference(track.artist, 'like');
                }
                artistDropdown.style.display = 'none';
            });
            
            // Block artist
            item.querySelector('[data-action="block-artist"]').addEventListener('click', (e) => {
                e.stopPropagation();
                if (artistPref === 'block') {
                    removeArtistPreference(track.artist);
                } else {
                    setArtistPreference(track.artist, 'block');
                }
                artistDropdown.style.display = 'none';
            });
            
            // Add to playlist
            item.querySelector('[data-action="add-to-playlist"]').addEventListener('click', (e) => {
                e.stopPropagation();
                addToPlaylist(track.title, track.artist, track.file);
            });
            
            // Move track up
            const moveUpBtn = item.querySelector('[data-action="move-up"]');
            if (moveUpBtn) {
                moveUpBtn.addEventListener('click', async (e) => {
                    e.stopPropagation();
                    await moveTrack(track.pos, 'up');
                });
            }
            
            // Move track down
            const moveDownBtn = item.querySelector('[data-action="move-down"]');
            if (moveDownBtn) {
                moveDownBtn.addEventListener('click', async (e) => {
                    e.stopPropagation();
                    await moveTrack(track.pos, 'down');
                });
            }
            
            // Remove track from queue
            item.querySelector('[data-action="remove-track"]').addEventListener('click', async (e) => {
                e.stopPropagation();
                try {
                    const response = await fetch(`/api/player/${currentServerId}/delete/${track.pos}`, {
                        method: 'POST'
                    });
                    if (response.ok) {
                        refreshQueue();
                        // Trigger playlist fill after removing track
                        setTimeout(triggerPlaylistFill, 500);
                    }
                } catch (error) {
                    console.error('Error removing track:', error);
                }
            });
            
            queueList.appendChild(item);
        });
        
    } catch (error) {
        console.error('Error refreshing queue:', error);
    }
}

// Trigger kosmik-DJ to fill playlist if needed
async function triggerPlaylistFill() {
    if (!currentServerId) return;
    try {
        await fetch(`/api/kosmik-dj/${currentServerId}/fill`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
    } catch (error) {
        console.error('Error triggering playlist fill:', error);
    }
}

// Player controls
async function sendCommand(command, body = {}) {
    if (!currentServerId) return;
    
    try {
        await fetch(`/api/player/${currentServerId}/${command}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body)
        });
        setTimeout(refreshStatus, 200);
        
        // Trigger playlist fill after next (consume mode removes played tracks)
        if (command === 'next') {
            setTimeout(triggerPlaylistFill, 500);
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

function playTrack(pos) {
    sendCommand('play', { pos: pos });
}

// Send presence heartbeat
async function sendPresenceHeartbeat() {
    try {
        await fetch('/api/presence/heartbeat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
    } catch (error) {
        console.error('Error sending presence heartbeat:', error);
    }
}

// Add song to playlist - moved to global scope
function addToPlaylist(title, artist, file) {
    // Encode song info for URL parameters
    const params = new URLSearchParams({
        title: title,
        artist: artist,
        file: file
    });
    
    // Navigate to playlist selection page
    window.location.href = `/add-to-playlist?${params.toString()}`;
}

// Debug: Check if functions are defined
console.log('Functions defined:', {
    addToPlaylist: typeof addToPlaylist,
    moveTrack: typeof moveTrack,
    currentServerId: typeof currentServerId
});

// Event listeners
document.addEventListener('DOMContentLoaded', () => {
    loadPreferences();
    
    // Send initial heartbeat
    sendPresenceHeartbeat();
    
    // Send heartbeat every 30 seconds
    setInterval(sendPresenceHeartbeat, 30000);
    
    document.getElementById('btnPlayPause').addEventListener('click', () => {
        const icon = document.querySelector('#btnPlayPause i');
        if (icon.classList.contains('fa-play')) {
            sendCommand('play');
        } else {
            sendCommand('pause');
        }
    });
    
    // Get current song info
function getCurrentSongInfo() {
    const titleElement = document.querySelector('.track-title');
    const artistElement = document.querySelector('.track-artist');
    
    if (titleElement && artistElement) {
        return {
            title: titleElement.textContent.trim(),
            artist: artistElement.textContent.trim(),
            file: currentTrack.file || ''
        };
    }
    return null;
}

document.getElementById('btnPrev').addEventListener('click', () => sendCommand('previous'));
    document.getElementById('btnNext').addEventListener('click', () => sendCommand('next'));
    document.getElementById('btnRandom').addEventListener('click', () => sendCommand('random'));
    document.getElementById('btnRepeat').addEventListener('click', () => sendCommand('repeat'));
    document.getElementById('btnConsume').addEventListener('click', () => sendCommand('consume'));
    document.getElementById('btnAddToPlaylist').addEventListener('click', () => {
        const currentSong = getCurrentSongInfo();
        if (currentSong) {
            addToPlaylist(currentSong.title, currentSong.artist, currentSong.file);
        }
    });
    
    document.getElementById('volumeSlider').addEventListener('change', (e) => {
        sendCommand('volume', { volume: parseInt(e.target.value) });
    });
    
    document.getElementById('progressBar').addEventListener('click', async (e) => {
        if (!currentDuration || !currentServerId) return;
        
        const rect = e.currentTarget.getBoundingClientRect();
        const percent = (e.clientX - rect.left) / rect.width;
        const seekTime = percent * currentDuration;
        
        // Send seek command to MPD
        sendCommand('seek', { time: seekTime });
        
        // Don't update immediately - wait for MPD to confirm
        // The next status update will show the correct position
    });
    
    // Add hover preview for seeking
    document.getElementById('progressBar').addEventListener('mousemove', (e) => {
        if (!currentDuration) return;
        
        const rect = e.currentTarget.getBoundingClientRect();
        const percent = (e.clientX - rect.left) / rect.width;
        const seekTime = percent * currentDuration;
        
        // Update seek indicator position
        const indicator = document.getElementById('seekIndicator');
        indicator.style.left = `${percent * 100}%`;
        
        // Update title to show seek time
        e.currentTarget.title = formatTime(seekTime);
    });
    
    document.getElementById('progressBar').addEventListener('mouseleave', (e) => {
        // Clear title when not hovering
        e.currentTarget.title = '';
    });
    
    // Song preference buttons
    document.getElementById('btnLikeSong').addEventListener('click', () => {
        if (!currentTrack.title) return;
        const pref = getSongPreference(currentTrack.title, currentTrack.artist, userPrefs.songs);
        if (pref === 'like') {
            removeSongPreference(currentTrack.title, currentTrack.artist);
        } else {
            setSongPreference(currentTrack.title, currentTrack.artist, 'like');
        }
        updatePrefButtons();
    });
    
    document.getElementById('btnBlockSong').addEventListener('click', () => {
        if (!currentTrack.title) return;
        const pref = getSongPreference(currentTrack.title, currentTrack.artist, userPrefs.songs);
        if (pref === 'block') {
            removeSongPreference(currentTrack.title, currentTrack.artist);
        } else {
            setSongPreference(currentTrack.title, currentTrack.artist, 'block');
        }
        updatePrefButtons();
    });
    
    // Artist dropdown toggle
    document.getElementById('btnArtistMenu').addEventListener('click', (e) => {
        e.stopPropagation();
        document.getElementById('artistDropdown').classList.toggle('show');
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', () => {
        document.getElementById('artistDropdown').classList.remove('show');
        // Also close queue artist dropdowns
        document.querySelectorAll('.queue-artist-dropdown').forEach(d => d.classList.remove('show'));
    });
    
    // Artist preference buttons
    document.getElementById('btnLikeArtist').addEventListener('click', (e) => {
        e.stopPropagation();
        if (!currentTrack.artist) return;
        const pref = getArtistPreference(currentTrack.artist, userPrefs.artists);
        if (pref === 'like') {
            removeArtistPreference(currentTrack.artist);
        } else {
            setArtistPreference(currentTrack.artist, 'like');
        }
        updatePrefButtons();
    });
    
    document.getElementById('btnBlockArtist').addEventListener('click', (e) => {
        e.stopPropagation();
        if (!currentTrack.artist) return;
        const pref = getArtistPreference(currentTrack.artist, userPrefs.artists);
        if (pref === 'block') {
            removeArtistPreference(currentTrack.artist);
        } else {
            setArtistPreference(currentTrack.artist, 'block');
        }
        updatePrefButtons();
    });
    
    // kosmik-DJ toggle
    document.getElementById('kosmikDjToggle').addEventListener('change', () => {
        toggleKosmikDj();
    });
});
</script>
{% endif %}
<script src="{{ url_for('static', filename='js/preferences.js') }}"></script>
{% endblock %}