{% extends 'base.html' %}

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

{% block content %}
<div class="container">
    <h1 class="mb-4">Profil</h1>
    
    <!-- User Info Card -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <h5 class="card-title">{{ current_user.name }}</h5>
                    <p class="card-text"><strong>Email:</strong> {{ current_user.email or 'Nicht angegeben' }}</p>
                    <p class="card-text"><strong>Provider:</strong> {{ current_user.provider }}</p>
                </div>
                <div id="presenceStatus" class="text-end">
                    <span class="badge bg-secondary">
                        <i class="fas fa-circle-notch fa-spin"></i> Checking...
                    </span>
                </div>
            </div>
            
            <h6 class="mt-4">Groups</h6>
            {% if current_user.groups and current_user.groups|length > 0 %}
                <ul class="list-group">
                    {% for group in current_user.groups %}
                        <li class="list-group-item">{{ group }}</li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="text-muted">Du bist in keiner Gruppe.</p>
            {% endif %}
        </div>
    </div>
    
    <!-- MPD Server Selection -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-server me-2"></i>MPD Server</h5>
        </div>
        <div class="card-body">
            <p class="text-muted mb-3">Wähle den MPD Server aus, mit dem du dich verbinden möchtest.</p>
            <select id="serverSelect" class="form-select">
                <option value="">Server auswählen...</option>
            </select>
            <div id="serverSaveStatus" class="mt-2" style="display: none;">
                <small class="text-success"><i class="fas fa-check"></i> Gespeichert</small>
            </div>
        </div>
    </div>
    
    <!-- Last.fm Integration -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-music me-2"></i>Last.fm Integration</h5>
        </div>
        <div class="card-body">
            <div id="lastfmStatus" class="mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span id="lastfmConnectionStatus" class="badge bg-secondary">
                            <i class="fas fa-circle-notch fa-spin"></i> Checking...
                        </span>
                        <span id="lastfmUsername" class="ms-2"></span>
                    </div>
                    <div id="lastfmActions">
                        <!-- Actions will be populated by JavaScript -->
                    </div>
                </div>
            </div>
            
            <div id="lastfmMessage" class="alert" style="display: none;"></div>
            
            <p class="text-muted mb-0">
                <small>Connect your Last.fm account to automatically scrobble what you're listening to.</small>
            </p>
        </div>
    </div>
    
    <!-- Import/Export Preferences -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-exchange-alt me-2"></i>Import/Export Preferences</h5>
        </div>
        <div class="card-body">
            <p class="text-muted mb-3">Export your preferences to backup or transfer them to another account.</p>
            <div class="d-flex gap-2">
                <button class="btn btn-primary" onclick="exportPreferences()">
                    <i class="fas fa-download me-1"></i> Export Preferences
                </button>
                <button class="btn btn-success" onclick="document.getElementById('importFile').click()">
                    <i class="fas fa-upload me-1"></i> Import Preferences
                </button>
                <input type="file" id="importFile" accept=".json" style="display: none;" onchange="importPreferences(event)">
            </div>
            <div id="importStatus" class="mt-2" style="display: none;">
                <small class="text-muted"></small>
            </div>
        </div>
    </div>
    
    <!-- Liked Songs -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-heart text-danger me-2"></i>Geliebte Songs</h5>
        </div>
        <div class="card-body">
            {% if liked_songs %}
                <div class="list-group">
                    {% for pref in liked_songs %}
                    <div class="list-group-item d-flex justify-content-between align-items-center" data-type="song" data-id="{{ pref.id }}">
                        <div>
                            <strong>{{ pref.title }}</strong>
                            <br><small class="text-muted">{{ pref.artist }}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-danger" onclick="removeSongPref({{ pref.id }})">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted mb-0">Noch keine geliebten Songs.</p>
            {% endif %}
        </div>
    </div>
    
    <!-- Blocked Songs -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-ban text-warning me-2"></i>Geblockte Songs</h5>
        </div>
        <div class="card-body">
            {% if blocked_songs %}
                <div class="list-group">
                    {% for pref in blocked_songs %}
                    <div class="list-group-item d-flex justify-content-between align-items-center" data-type="song" data-id="{{ pref.id }}">
                        <div>
                            <strong>{{ pref.title }}</strong>
                            <br><small class="text-muted">{{ pref.artist }}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-danger" onclick="removeSongPref({{ pref.id }})">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted mb-0">Keine geblockten Songs.</p>
            {% endif %}
        </div>
    </div>
    
    <!-- Liked Artists -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-heart text-danger me-2"></i>Geliebte Künstler</h5>
        </div>
        <div class="card-body">
            {% if liked_artists %}
                <div class="list-group">
                    {% for pref in liked_artists %}
                    <div class="list-group-item d-flex justify-content-between align-items-center" data-type="artist" data-id="{{ pref.id }}">
                        <div>
                            <i class="fas fa-user me-2"></i>{{ pref.artist }}
                        </div>
                        <button class="btn btn-sm btn-outline-danger" onclick="removeArtistPref({{ pref.id }})">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted mb-0">Noch keine geliebten Künstler.</p>
            {% endif %}
        </div>
    </div>
    
    <!-- Blocked Artists -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-ban text-warning me-2"></i>Geblockte Künstler</h5>
        </div>
        <div class="card-body">
            {% if blocked_artists %}
                <div class="list-group">
                    {% for pref in blocked_artists %}
                    <div class="list-group-item d-flex justify-content-between align-items-center" data-type="artist" data-id="{{ pref.id }}">
                        <div>
                            <i class="fas fa-user me-2"></i>{{ pref.artist }}
                        </div>
                        <button class="btn btn-sm btn-outline-danger" onclick="removeArtistPref({{ pref.id }})">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted mb-0">Keine geblockten Künstler.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Check presence status
async function checkPresenceStatus() {
    try {
        const response = await fetch('/api/presence/heartbeat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const data = await response.json();
        
        const statusDiv = document.getElementById('presenceStatus');
        const isInSpace = data.is_in_space;
        
        if (isInSpace) {
            statusDiv.innerHTML = `
                <span class="badge bg-success">
                    <i class="fas fa-check-circle"></i> Connected
                </span>
                <div class="text-muted small mt-1">
                    Your preferences are active
                </div>
            `;
        } else {
            statusDiv.innerHTML = `
                <span class="badge bg-secondary">
                    <i class="fas fa-times-circle"></i> Not Connected
                </span>
                <div class="text-muted small mt-1">
                    Preferences inactive
                </div>
            `;
        }
    } catch (error) {
        console.error('Error checking presence:', error);
        const statusDiv = document.getElementById('presenceStatus');
        statusDiv.innerHTML = `
            <span class="badge bg-warning">
                <i class="fas fa-exclamation-triangle"></i> Unknown
            </span>
        `;
    }
}

// Load MPD servers
async function loadServers() {
    try {
        const response = await fetch('/api/player/servers');
        const data = await response.json();
        const select = document.getElementById('serverSelect');
        
        data.servers.forEach(server => {
            const option = document.createElement('option');
            option.value = server.id;
            option.textContent = server.name;
            select.appendChild(option);
        });
        
        // Select the saved server
        if (data.selected_server_id) {
            select.value = data.selected_server_id;
        }
    } catch (error) {
        console.error('Error loading servers:', error);
    }
}

// Save server selection
async function saveServerSelection(serverId) {
    try {
        await fetch('/api/player/select-server', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ server_id: serverId ? parseInt(serverId) : null })
        });
        
        // Show saved status
        const status = document.getElementById('serverSaveStatus');
        status.style.display = 'block';
        setTimeout(() => { status.style.display = 'none'; }, 2000);
    } catch (error) {
        console.error('Error saving server selection:', error);
    }
}

// Check on page load and every 30 seconds
document.addEventListener('DOMContentLoaded', () => {
    checkPresenceStatus();
    setInterval(checkPresenceStatus, 30000);
    
    // Load servers
    loadServers();
    
    // Server selection change handler
    document.getElementById('serverSelect').addEventListener('change', (e) => {
        saveServerSelection(e.target.value);
    });
});

async function removeSongPref(prefId) {
    try {
        const response = await fetch(`/api/preferences/song/${prefId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            const item = document.querySelector(`[data-type="song"][data-id="${prefId}"]`);
            if (item) item.remove();
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

async function removeArtistPref(prefId) {
    try {
        const response = await fetch(`/api/preferences/artist/${prefId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            const item = document.querySelector(`[data-type="artist"][data-id="${prefId}"]`);
            if (item) item.remove();
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

async function exportPreferences() {
    try {
        const response = await fetch('/api/preferences/export');
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = response.headers.get('content-disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'preferences.json';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }
    } catch (error) {
        console.error('Error exporting preferences:', error);
        alert('Error exporting preferences: ' + error.message);
    }
}

async function importPreferences(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const formData = new FormData();
    formData.append('file', file);
    
    const statusDiv = document.getElementById('importStatus');
    const statusText = statusDiv.querySelector('small');
    
    try {
        statusDiv.style.display = 'block';
        statusText.textContent = 'Importing preferences...';
        statusText.className = 'text-muted';
        
        const response = await fetch('/api/preferences/import', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (response.ok) {
            statusText.textContent = data.message;
            statusText.className = 'text-success';
            // Refresh the page after successful import
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            statusText.textContent = data.error;
            statusText.className = 'text-danger';
        }
    } catch (error) {
        console.error('Error importing preferences:', error);
        statusText.textContent = 'Error importing preferences: ' + error.message;
        statusText.className = 'text-danger';
    }
    
    // Reset file input
    event.target.value = '';
}

// Last.fm functionality
async function loadLastfmStatus() {
    try {
        const response = await fetch('/lastfm/status');
        const data = await response.json();
        
        const statusBadge = document.getElementById('lastfmConnectionStatus');
        const usernameSpan = document.getElementById('lastfmUsername');
        const actionsDiv = document.getElementById('lastfmActions');
        
        if (data.connected) {
            statusBadge.className = 'badge bg-success';
            statusBadge.innerHTML = '<i class="fas fa-check"></i> Connected';
            usernameSpan.textContent = `(${data.username})`;
            
            actionsDiv.innerHTML = `
                <button class="btn btn-sm btn-outline-danger" onclick="disconnectLastfm()">
                    <i class="fas fa-unlink me-1"></i> Disconnect
                </button>
            `;
        } else {
            statusBadge.className = 'badge bg-secondary';
            statusBadge.innerHTML = '<i class="fas fa-unlink"></i> Not Connected';
            usernameSpan.textContent = '';
            
            actionsDiv.innerHTML = `
                <a href="{{ lastfm_auth_url }}" target="_blank">
                    Connect to Last.fm
                </a>
            `;
        }
        
        // Check for URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('lastfm') === 'connected') {
            showLastfmMessage('Successfully connected to Last.fm!', 'success');
            // Reload Last.fm status to update the UI
            loadLastfmStatus();
            // Clean URL
            window.history.replaceState({}, document.title, window.location.pathname);
        } else if (urlParams.get('lastfm') === 'error') {
            showLastfmMessage('Failed to connect to Last.fm. Please try again.', 'danger');
            window.history.replaceState({}, document.title, window.location.pathname);
        }
        
    } catch (error) {
        console.error('Error loading Last.fm status:', error);
        document.getElementById('lastfmConnectionStatus').innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error';
    }
}

async function connectLastfm() {
    try {
        const response = await fetch('/lastfm/auth', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (response.ok) {
            // Just redirect to Last.fm authorization URL
            window.location.href = data.auth_url;
        } else {
            showLastfmMessage(data.error || 'Failed to start authentication', 'danger');
        }
        
    } catch (error) {
        console.error('Error connecting to Last.fm:', error);
        showLastfmMessage('Error connecting to Last.fm', 'danger');
    }
}

async function disconnectLastfm() {
    if (!confirm('Are you sure you want to disconnect from Last.fm?')) {
        return;
    }
    
    try {
        const response = await fetch('/lastfm/disconnect', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (response.ok) {
            showLastfmMessage(data.message, 'success');
            loadLastfmStatus();
        } else {
            showLastfmMessage(data.error || 'Failed to disconnect', 'danger');
        }
        
    } catch (error) {
        console.error('Error disconnecting from Last.fm:', error);
        showLastfmMessage('Error disconnecting from Last.fm', 'danger');
    }
}

function showLastfmMessage(message, type) {
    const messageDiv = document.getElementById('lastfmMessage');
    messageDiv.className = `alert alert-${type}`;
    messageDiv.textContent = message;
    messageDiv.style.display = 'block';
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 5000);
}

// Load Last.fm status when page loads
document.addEventListener('DOMContentLoaded', loadLastfmStatus);
</script>
{% endblock %}