spotify-auth.js

// 🎵 SPOTIFY AUTHENTIFIZIERUNG - So melden wir uns bei Spotify an! 🔐

// Hier speichern wir den Login-Token (wie ein magischer Schlüssel!)
let accessToken = null;

// 🔐 SCHRITT 1: Login starten - Öffnet Spotify Login!
function loginWithSpotify() {
    // Debug: Zeigt die verwendete Redirect URI
    console.log('🔍 Redirect URI:', SPOTIFY_CONFIG.redirectUri);

    // PKCE - macht das Ganze sicherer! 🛡️
    const codeVerifier = generateRandomString(128);
    localStorage.setItem('code_verifier', codeVerifier);

    // Erstellt einen sicheren Code
    generateCodeChallenge(codeVerifier).then(codeChallenge => {
        // Baut die Spotify-Login-URL zusammen
        const authUrl = new URL('https://accounts.spotify.com/authorize');

        const params = {
            client_id: SPOTIFY_CONFIG.clientId,
            response_type: 'code',
            redirect_uri: SPOTIFY_CONFIG.redirectUri,
            scope: SPOTIFY_CONFIG.scopes,
            code_challenge_method: 'S256',
            code_challenge: codeChallenge
        };

        // Fügt alle Parameter zur URL hinzu
        authUrl.search = new URLSearchParams(params).toString();

        // AB ZU SPOTIFY! 🚀
        window.location = authUrl.toString();
    });
}

// 🔐 SCHRITT 2: Nach dem Login - Holt den Token!
async function handleCallback() {
    // Schaut, ob Spotify uns einen Code geschickt hat
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get('code');

    if (code) {
        // Holt den gespeicherten Verifier
        const codeVerifier = localStorage.getItem('code_verifier');

        // Tauscht den Code gegen einen Access Token!
        const tokenUrl = 'https://accounts.spotify.com/api/token';

        const body = new URLSearchParams({
            client_id: SPOTIFY_CONFIG.clientId,
            grant_type: 'authorization_code',
            code: code,
            redirect_uri: SPOTIFY_CONFIG.redirectUri,
            code_verifier: codeVerifier
        });

        try {
            const response = await fetch(tokenUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: body
            });

            if (response.ok) {
                const data = await response.json();
                accessToken = data.access_token;

                // Speichert den Token für später
                localStorage.setItem('spotify_access_token', accessToken);

                // Entfernt den Code aus der URL (sieht cleaner aus!)
                window.history.replaceState({}, document.title, '/');

                // Zeigt die User-Infos an!
                await loadUserProfile();
                showApp();
            } else {
                console.error('Token-Fehler:', response);
                alert('Login fehlgeschlagen! 😢 Versuch es nochmal.');
            }
        } catch (error) {
            console.error('Netzwerk-Fehler:', error);
            alert('Verbindungsfehler! 🐞 Check deine Internet-Verbindung.');
        }

        // Räumt auf
        localStorage.removeItem('code_verifier');
    }
}

// 👤 LÄDT DAS USER-PROFIL - Zeigt wer eingeloggt ist!
async function loadUserProfile() {
    if (!accessToken) return;

    try {
        const response = await fetch('https://api.spotify.com/v1/me', {
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        });

        if (response.ok) {
            const user = await response.json();

            // Zeigt User-Info an! 🎉
            document.getElementById('userName').textContent = user.display_name || 'Spotify User';

            // Zeigt Avatar (wenn vorhanden)
            if (user.images && user.images.length > 0) {
                document.getElementById('userAvatar').src = user.images[0].url;
            } else {
                // Standard-Avatar wenn keiner vorhanden
                document.getElementById('userAvatar').src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="30" cy="30" r="28" fill="%23FFB997"/><text x="30" y="38" text-anchor="middle" font-size="24" fill="%232A1F1A">🎵</text></svg>';
            }
        }
    } catch (error) {
        console.error('User-Profil Fehler:', error);
    }
}

// 🚪 LOGOUT - Abmelden!
function logout() {
    accessToken = null;
    localStorage.removeItem('spotify_access_token');

    // Zeigt Login wieder an
    showLogin();
}

// 🎨 UI UMSCHALTEN - Login vs. App
function showLogin() {
    document.getElementById('spotifyLogin').style.display = 'block';
    document.getElementById('userInfo').style.display = 'none';
    document.querySelector('.mood-selector').style.display = 'none';
    document.querySelector('.player-card').style.display = 'none';
    document.querySelector('.info-box').style.display = 'none';
}

function showApp() {
    document.getElementById('spotifyLogin').style.display = 'none';
    document.getElementById('userInfo').style.display = 'block';
    document.querySelector('.mood-selector').style.display = 'block';
    document.querySelector('.player-card').style.display = 'block';
    document.querySelector('.info-box').style.display = 'block';
}

// 🔧 HILFSFUNKTIONEN für PKCE (Sicherheit!)

function generateRandomString(length) {
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const values = crypto.getRandomValues(new Uint8Array(length));
    return values.reduce((acc, x) => acc + possible[x % possible.length], '');
}

async function generateCodeChallenge(codeVerifier) {
    const data = new TextEncoder().encode(codeVerifier);
    const digest = await crypto.subtle.digest('SHA-256', data);
    return btoa(String.fromCharCode(...new Uint8Array(digest)))
        .replace(/=/g, '')
        .replace(/\+/g, '-')
        .replace(/\//g, '_');
}

// ✅ CHECK beim Laden der Seite - Sind wir schon eingeloggt?
function checkLoginStatus() {
    // Schaut ob wir einen gespeicherten Token haben
    const savedToken = localStorage.getItem('spotify_access_token');

    if (savedToken) {
        accessToken = savedToken;
        loadUserProfile();
        showApp();
    } else {
        showLogin();
    }
}

// 🎵 Macht den Token verfügbar für andere Skripte
function getAccessToken() {
    return accessToken;
}