{% extends "base.html" %}

{% block title %}KosmikDJ Settings{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1 class="mb-4">KosmikDJ Settings</h1>
    
    <!-- Server Info -->
    {% include 'components/server_info.html' %}
    
    <!-- KosmikDJ Settings -->
    <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">KosmikDJ Settings</h5>
            </div>
            
            <!-- Library Status -->
            <div id="cacheStatus" class="alert alert-info mb-3" style="display: none;">
                <small>
                    <strong>Library:</strong> 
                    <span id="cacheInfo">Loading...</span>
                </small>
            </div>
            
            <div id="kosmikDjSettings">
                <div class="text-center py-3">
                    <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    Loading settings...
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.setting-item {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
}

.setting-name {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.setting-description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1rem;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}

.form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
}

.loading-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<script>
let currentServerId = null;

// Load settings and cache info
async function loadSettings() {
    try {
        // Load server info
        const serverResponse = await fetch('/api/player/servers');
        const serverData = await serverResponse.json();
        
        if (serverData.error) {
            throw new Error(serverData.error);
        }
        
        const serverId = serverData.selected_server_id;
        if (!serverId) {
            document.getElementById('kosmikDjSettings').innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    No server selected. Please select a server first.
                </div>
            `;
            return;
        }
        
        // Find the current server
        const server = serverData.servers.find(s => s.id === serverId);
        if (!server) {
            document.getElementById('kosmikDjSettings').innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                    Selected server not found.
                </div>
            `;
            return;
        }
        
        // Load KosmikDJ settings
        const settingsResponse = await fetch('/api/kosmik-dj/settings');
        const settingsData = await settingsResponse.json();
        
        if (settingsData.error) {
            throw new Error(settingsData.error);
        }
        
        // Find settings for current server
        const setting = settingsData.settings.find(s => s.id === serverId);
        
        // Load cache info
        const cacheResponse = await fetch(`/api/library/${serverId}/library-info`);
        const cacheData = await cacheResponse.json();
        
        // Display cache status
        displayCacheStatus(cacheData);
        
        // Display KosmikDJ settings
        displayKosmikDjSettings(setting, server);
        
    } catch (error) {
        console.error('Error loading settings:', error);
        document.getElementById('kosmikDjSettings').innerHTML = `
            <div class="alert alert-danger">
                Error loading settings: ${error.message}
            </div>
        `;
    }
}

// Display cache status
function displayCacheStatus(cacheInfo) {
    const cacheStatus = document.getElementById('cacheStatus');
    const cacheInfoSpan = document.getElementById('cacheInfo');
    
    if (cacheInfo.cached) {
        cacheInfoSpan.innerHTML = `${cacheInfo.song_count.toLocaleString()} songs in library`;
        cacheStatus.style.display = 'block';
    } else {
        cacheInfoSpan.innerHTML = 'No library data available';
        cacheStatus.style.display = 'block';
    }
}

// Display KosmikDJ settings
function displayKosmikDjSettings(setting, server) {
    const settingsContainer = document.getElementById('kosmikDjSettings');
    
    if (!setting) {
        settingsContainer.innerHTML = `
            <div class="alert alert-warning">
                Server settings not found
            </div>
        `;
        return;
    }
    
    settingsContainer.innerHTML = `
        <div class="setting-item">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="setting-name">${escapeHtml(server.name)}</div>
                    <div class="setting-description">
                        Enable KosmikDJ automatic track selection for this server. When enabled, KosmikDJ will automatically add tracks to the playlist based on user preferences and keep the queue at an optimal length.
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" 
                           id="kosmikDjToggle"
                           ${setting.kosmik_dj_enabled ? 'checked' : ''}
                           onchange="toggleKosmikDj(${setting.id}, this.checked)">
                    <label class="form-check-label" for="kosmikDjToggle">
                        <strong>KosmikDJ</strong>
                    </label>
                </div>
            </div>
        </div>
        
        <div class="setting-item">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="setting-name">Block Disliked Tracks</div>
                    <div class="setting-description">
                        When enabled, KosmikDJ will automatically exclude any tracks that are disliked by users currently in the space. This includes tracks by artists that users have blocked, and handles "feat." and "featuring" variations properly.
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" 
                           id="dislikeBlockToggle"
                           ${setting.dislike_block ? 'checked' : ''}
                           onchange="toggleDislikeBlock(${setting.id}, this.checked)">
                    <label class="form-check-label" for="dislikeBlockToggle">
                        <strong>Block Dislikes</strong>
                    </label>
                </div>
            </div>
        </div>
        
        <div class="setting-item">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="setting-name">Genre-Based Selection</div>
                    <div class="setting-description">
                        When enabled, KosmikDJ will prioritize songs with similar genres to the currently playing track. Exact genre matches get 5x priority, while partial matches (e.g., "Rock" and "Indie Rock") get 2x priority. Creates a more cohesive musical flow.
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" 
                           id="genreMultiplierToggle"
                           ${setting.genre_multiplier ? 'checked' : ''}
                           onchange="toggleGenreMultiplier(${setting.id}, this.checked)">
                    <label class="form-check-label" for="genreMultiplierToggle">
                        <strong>Genre Boost</strong>
                    </label>
                </div>
            </div>
        </div>
        
        <div class="setting-item">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <div class="setting-name">No Repeat Mode</div>
                    <div class="setting-description">
                        When enabled, KosmikDJ will avoid repeating songs and artists from recent history. Excludes songs from the last 100 played tracks and artists from the last 25 played tracks. Artist names are normalized to handle "feat." and "featuring" variations properly.
                    </div>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" 
                           id="noRepeatModeToggle"
                           ${setting.no_repeat_mode ? 'checked' : ''}
                           onchange="toggleNoRepeatMode(${setting.id}, this.checked)">
                    <label class="form-check-label" for="noRepeatModeToggle">
                        <strong>No Repeat</strong>
                    </label>
                </div>
            </div>
        </div>
    `;
}

// Toggle KosmikDJ setting
async function toggleKosmikDj(serverId, enabled) {
    const checkbox = document.getElementById('kosmikDjToggle');
    const originalState = checkbox.checked;
    
    try {
        const response = await fetch(`/api/kosmik-dj/settings/${serverId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ enabled: enabled })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('KosmikDJ setting updated:', data.message);
        
        // Refresh display to show updated status
        await loadSettings();
        
    } catch (error) {
        console.error('Error updating KosmikDJ setting:', error);
        // Revert checkbox on error
        checkbox.checked = originalState;
    }
}

// Toggle Dislike Block setting
async function toggleDislikeBlock(serverId, enabled) {
    const checkbox = document.getElementById('dislikeBlockToggle');
    const originalState = checkbox.checked;
    
    try {
        const response = await fetch(`/api/kosmik-dj/settings/${serverId}/dislike-block`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ enabled: enabled })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('Dislike block setting updated:', data.message);
        
        // Refresh display to show updated status
        await loadSettings();
        
    } catch (error) {
        console.error('Error updating dislike block setting:', error);
        // Revert checkbox on error
        checkbox.checked = originalState;
    }
}

// Toggle Genre Multiplier setting
async function toggleGenreMultiplier(serverId, enabled) {
    const checkbox = document.getElementById('genreMultiplierToggle');
    const originalState = checkbox.checked;
    
    try {
        const response = await fetch(`/api/kosmik-dj/settings/${serverId}/genre-multiplier`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ enabled: enabled })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('Genre multiplier setting updated:', data.message);
        
        // Refresh display to show updated status
        await loadSettings();
        
    } catch (error) {
        console.error('Error updating genre multiplier setting:', error);
        // Revert checkbox on error
        checkbox.checked = originalState;
    }
}

// Toggle No Repeat Mode setting
async function toggleNoRepeatMode(serverId, enabled) {
    const checkbox = document.getElementById('noRepeatModeToggle');
    const originalState = checkbox.checked;
    
    try {
        const response = await fetch(`/api/kosmik-dj/settings/${serverId}/no-repeat-mode`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ enabled: enabled })
        });
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        console.log('No repeat mode setting updated:', data.message);
        
        // Refresh display to show updated status
        await loadSettings();
        
    } catch (error) {
        console.error('Error updating no repeat mode setting:', error);
        // Revert checkbox on error
        checkbox.checked = originalState;
    }
}

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

// Event listeners
document.addEventListener('DOMContentLoaded', () => {
    // Load settings on page load
    loadSettings();
});
</script>
{% endblock %}