/* Dashboard Preference Functions */

// Navigate to appearance quiz (default) in edit mode
function editAppearancePreferences() {
    window.location.href = 'customizer.html?edit=true';
}

// Navigate to story quiz in edit mode
function editStoryPreferences() {
    window.location.href = 'customizer.html?quiz=story&edit=true';
}

// Legacy function for backwards compatibility
function editPreferences() {
    // Default to appearance preferences
    editAppearancePreferences();
}

// Load and display current preferences in dashboard
async function loadDashboardPreferences() {
    if (!window.supabase) {
        setTimeout(loadDashboardPreferences, 100);
        return;
    }

    try {
        const { data: { session } } = await supabase.auth.getSession();
        
        if (!session || !session.user) {
            console.log('No user session found');
            return;
        }

        const userId = session.user.id;

        // Load appearance preferences
        const { data: appearanceData, error: appearanceError } = await supabase
            .from('appearance_preferences')
            .select('*')
            .eq('user_id', userId)
            .order('created_at', { ascending: false })
            .limit(1);

        if (appearanceError) {
            console.error('Error loading appearance preferences:', appearanceError);
        } else if (appearanceData && appearanceData.length > 0) {
            displayAppearancePreferences(appearanceData[0]);
        }

        // Load story preferences (including legacy data without quiz_type)
        console.log('🔍 Loading story preferences for user:', userId);
        const { data: storyData, error: storyError } = await supabase
            .from('user_preferences')
            .select('*')
            .eq('user_id', userId)
            .or('quiz_type.eq.story,quiz_type.is.null')
            .order('created_at', { ascending: false })
            .limit(1);

        console.log('📊 Story query result:', { data: storyData, error: storyError });

        if (storyError) {
            console.error('Error loading story preferences:', storyError);
        } else if (storyData && storyData.length > 0) {
            console.log('✅ Found story data, displaying:', storyData[0]);
            displayStoryPreferences(storyData[0]);
        } else {
            console.log('❌ No story preferences found for user');
        }

    } catch (error) {
        console.error('Error loading dashboard preferences:', error);
    }
}

// Display appearance preferences in dashboard
function displayAppearancePreferences(preferences) {
    const container = document.getElementById('currentAppearancePreferences');
    if (!container) return;

    const eyeColorMap = {
        'braun': 'Braun',
        'blau': 'Blau', 
        'gruen': 'Grün',
        'grau': 'Grau',
        'bunt': 'Bunt',
        'andere': 'Andere'
    };

    const hairColorMap = {
        'blond': 'Blond',
        'braun': 'Braun',
        'schwarz': 'Schwarz', 
        'rot': 'Rot/Rothaarig',
        'grau': 'Grau',
        'bunt': 'Bunt',
        'andere': 'Andere'
    };

    const hairLengthMap = {
        'kurz': 'Kurz',
        'mittel': 'Mittel',
        'lang': 'Lang'
    };

    container.innerHTML = `
        <div class="preferences-grid">
            <div class="pref-item">
                <strong>Augenfarbe:</strong> ${eyeColorMap[preferences.eye_color] || preferences.eye_color}
            </div>
            <div class="pref-item">
                <strong>Haarfarbe:</strong> ${hairColorMap[preferences.hair_color] || preferences.hair_color}
            </div>
            <div class="pref-item">
                <strong>Haarlänge:</strong> ${hairLengthMap[preferences.hair_length] || preferences.hair_length}
            </div>
            <div class="pref-item">
                <strong>Name:</strong> ${preferences.first_name}
            </div>
        </div>
        <small class="pref-date">Zuletzt aktualisiert: ${new Date(preferences.updated_at).toLocaleDateString('de-DE')}</small>
    `;
}

// Display story preferences in dashboard  
function displayStoryPreferences(preferences) {
    console.log('🎭 displayStoryPreferences called with:', preferences);
    const container = document.getElementById('currentStoryPreferences');
    console.log('📦 Container found:', container);
    if (!container) {
        console.error('❌ Container #currentStoryPreferences not found!');
        return;
    }

    const settingMap = {
        'home': 'Zuhause / Schlafzimmer',
        'office': 'Büro / Arbeitsplatz',
        'nature': 'Draußen / in der Natur',
        'hotel': 'Hotel / Urlaubsumgebung',
        'car': 'Auto / unterwegs',
        'fantasy': 'Fantasy-Welt'
    };

    const dynamicMap = {
        'gentle_dom': 'Sanfter Dom',
        'equal': 'Gleichwertig / verspielt',
        'submissive': 'Submissiver Partner'
    };

    const relationshipMap = {
        'partners': 'Feste Partner',
        'friends_to_lovers': 'Freunde, die sich ineinander verlieben',
        'strangers': 'Fremde / erstes Aufeinandertreffen',
        'authority': 'Autoritätsperson'
    };

    const intensityMap = {
        'sensual': 'Sinnlich',
        'passionate': 'Leidenschaftlich',
        'bold': 'Mutig / direkt'
    };

    container.innerHTML = `
        <div class="preferences-grid">
            <div class="pref-item">
                <strong>Schauplatz:</strong> ${settingMap[preferences.setting] || preferences.setting}
            </div>
            <div class="pref-item">
                <strong>Dynamik:</strong> ${dynamicMap[preferences.dynamic] || preferences.dynamic}
            </div>
            <div class="pref-item">
                <strong>Beziehung:</strong> ${relationshipMap[preferences.relationship] || preferences.relationship}
            </div>
            <div class="pref-item">
                <strong>Intensität:</strong> ${intensityMap[preferences.intensity] || preferences.intensity}
            </div>
            <div class="pref-item">
                <strong>Name:</strong> ${preferences.first_name}
            </div>
        </div>
        <small class="pref-date">Zuletzt aktualisiert: ${new Date(preferences.updated_at).toLocaleDateString('de-DE')}</small>
    `;
}

// Initialize preferences loading when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Only load on dashboard page
    if (document.querySelector('#preferences-section')) {
        console.log('Dashboard detected, loading preferences...');
        loadDashboardPreferences();
    }
});

// Make functions globally available
window.editAppearancePreferences = editAppearancePreferences;
window.editStoryPreferences = editStoryPreferences;
window.editPreferences = editPreferences;