/* SoftSins - Supabase Configuration */

// Supabase configuration - Replace with your actual values
const SUPABASE_URL = 'https://xboptgbvoqfwpszftoqc.supabase.co';  // Replace with: https://your-project-id.supabase.co
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inhib3B0Z2J2b3Fmd3BzemZ0b3FjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjM5MjAxNzYsImV4cCI6MjA3OTQ5NjE3Nn0.O1Ecitm-wOp7ZefaWZLiYD4Lp411jM0x-bCInYo2E2M';  // Replace with your anon key

// Initialize Supabase client
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// Authentication state management
class SoftSinsAuth {
    constructor() {
        this.currentUser = null;
        this.isAuthenticated = false;
        
        // Check initial auth state
        this.checkAuthState();
        
        // Listen for auth changes
        supabase.auth.onAuthStateChange((event, session) => {
            console.log('Auth state changed:', event, session);
            this.handleAuthStateChange(event, session);
        });
    }
    
    async checkAuthState() {
        try {
            const { data: { session } } = await supabase.auth.getSession();
            
            if (session) {
                this.currentUser = session.user;
                this.isAuthenticated = true;
                console.log('User is authenticated:', this.currentUser.email);
                this.updateNavigation(true);
            } else {
                this.currentUser = null;
                this.isAuthenticated = false;
                console.log('User is not authenticated');
                this.updateNavigation(false);
            }
        } catch (error) {
            console.error('Error checking auth state:', error);
            this.isAuthenticated = false;
            this.updateNavigation(false);
        }
    }
    
    handleAuthStateChange(event, session) {
        if (event === 'SIGNED_IN') {
            this.currentUser = session.user;
            this.isAuthenticated = true;
            console.log('User signed in:', this.currentUser.email);
            this.updateNavigation(true);
            this.showSuccessMessage('Erfolgreich angemeldet!');
        } else if (event === 'SIGNED_OUT') {
            this.currentUser = null;
            this.isAuthenticated = false;
            console.log('User signed out');
            this.updateNavigation(false);
            this.showSuccessMessage('Erfolgreich abgemeldet!');
        } else if (event === 'TOKEN_REFRESHED') {
            console.log('Token refreshed');
        }
    }
    
    updateNavigation(isAuthenticated) {
        // Update navigation buttons (including NEUE_HOMEPAGE.html)
        const navButtons = document.querySelectorAll('.nav-cta a, .nav-cta-mobile a, .nav-menu li:last-child a');
        
        navButtons.forEach(button => {
            if (isAuthenticated) {
                // User is logged in - show profile/logout
                button.textContent = 'Profil';
                button.href = '#';
                
                // Remove onclick attribute and add event listener
                button.removeAttribute('onclick');
                
                // Clear existing event listeners by cloning
                const newButton = button.cloneNode(true);
                button.parentNode.replaceChild(newButton, button);
                
                newButton.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.showUserMenu(e.target);
                });
            } else {
                // User is not logged in - show login
                button.textContent = 'Anmelden';
                button.href = '#';
                
                // Ensure onclick attribute is set
                button.setAttribute('onclick', 'openLoginModal(); return false;');
            }
        });
    }
    
    showUserMenu(button) {
        // Create user dropdown menu
        const existingMenu = document.querySelector('.user-dropdown');
        if (existingMenu) {
            existingMenu.remove();
            return;
        }
        
        // Make sure the parent container has relative positioning
        const navCta = button.closest('.nav-cta, .nav-cta-mobile, .nav-menu li');
        if (navCta) {
            navCta.style.position = 'relative';
        }
        
        const dropdown = document.createElement('div');
        dropdown.className = 'user-dropdown';
        
        // Check if this is NEUE_HOMEPAGE.html (simple nav-menu structure)
        const isNeueHomepage = button.closest('.nav-menu') && !button.closest('.nav-cta');
        
        dropdown.style.cssText = `
            position: absolute;
            top: calc(100% + 10px);
            ${isNeueHomepage ? 'right: 0' : 'right: 0'};
            background: white;
            border: 1px solid #E8E8E8;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            z-index: 1000;
            min-width: 200px;
        `;
        
        dropdown.innerHTML = `
            <div style="padding: 12px 16px; border-bottom: 1px solid #E8E8E8;">
                <div style="font-weight: 600; color: #2C1810;">${this.currentUser?.email}</div>
                <div style="font-size: 0.875rem; color: #6B6B6B;">SoftSins Konto</div>
            </div>
            <a href="dashboard.html" style="display: block; padding: 12px 16px; color: #4A4A4A; text-decoration: none; border-bottom: 1px solid #E8E8E8;">
                Dashboard
            </a>
            <a href="dashboard.html#profile" style="display: block; padding: 12px 16px; color: #4A4A4A; text-decoration: none; border-bottom: 1px solid #E8E8E8;">
                Profil bearbeiten
            </a>
            <a href="dashboard.html#stories" style="display: block; padding: 12px 16px; color: #4A4A4A; text-decoration: none; border-bottom: 1px solid #E8E8E8;">
                Meine Geschichten
            </a>
            <a href="dashboard.html#settings" style="display: block; padding: 12px 16px; color: #4A4A4A; text-decoration: none; border-bottom: 1px solid #E8E8E8;">
                Einstellungen
            </a>
        `;
        
        // Add logout button with proper event binding
        const logoutBtn = document.createElement('a');
        logoutBtn.href = '#';
        logoutBtn.style.cssText = 'display: block; padding: 12px 16px; color: #C53030; text-decoration: none;';
        logoutBtn.textContent = 'Abmelden';
        logoutBtn.addEventListener('click', (e) => {
            e.preventDefault();
            this.logout();
        });
        dropdown.appendChild(logoutBtn);
        
        // Position dropdown in the nav container
        if (navCta) {
            navCta.appendChild(dropdown);
        } else {
            button.parentNode.appendChild(dropdown);
        }
        
        // Close on outside click
        setTimeout(() => {
            document.addEventListener('click', function closeDropdown(e) {
                if (!dropdown.contains(e.target)) {
                    dropdown.remove();
                    document.removeEventListener('click', closeDropdown);
                }
            });
        }, 100);
    }
    
    openLoginModal() {
        console.log('Opening login modal...');
        // Check if authModal is available
        if (window.authModal && window.authModal.open) {
            window.authModal.open('login');
        } else {
            // Fallback if modal not loaded yet - wait longer
            console.log('Auth modal not ready, waiting...');
            setTimeout(() => {
                if (window.authModal && window.authModal.open) {
                    window.authModal.open('login');
                } else {
                    console.error('Auth modal still not available after timeout');
                    alert('Login-Modal konnte nicht geladen werden. Bitte lade die Seite neu.');
                }
            }, 500);
        }
    }
    
    async logout() {
        try {
            const { error } = await supabase.auth.signOut();
            if (error) throw error;
            
            // Remove user dropdown
            const dropdown = document.querySelector('.user-dropdown');
            if (dropdown) dropdown.remove();
            
        } catch (error) {
            console.error('Logout error:', error);
            this.showErrorMessage('Fehler beim Abmelden: ' + error.message);
        }
    }
    
    showProfile() {
        console.log('Show profile...');
        // Will be implemented later
        alert('Profil-Seite wird implementiert...');
    }
    
    showMyStories() {
        console.log('Show my stories...');
        // Will be implemented later  
        alert('Meine Geschichten wird implementiert...');
    }
    
    showSettings() {
        console.log('Show settings...');
        // Will be implemented later
        alert('Einstellungen werden implementiert...');
    }
    
    showSuccessMessage(message) {
        this.showToast(message, 'success');
    }
    
    showErrorMessage(message) {
        this.showToast(message, 'error');
    }
    
    showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: ${type === 'error' ? '#FEB2B2' : type === 'success' ? '#9AE6B4' : '#BEE3F8'};
            color: ${type === 'error' ? '#C53030' : type === 'success' ? '#276749' : '#2A69AC'};
            padding: 12px 16px;
            border-radius: 8px;
            font-weight: 500;
            z-index: 10000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        `;
        toast.textContent = message;
        
        document.body.appendChild(toast);
        
        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 4000);
    }
}

// Initialize authentication when DOM is loaded
let softSinsAuth;
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing SoftSins Authentication...');
    softSinsAuth = new SoftSinsAuth();
    // Make globally accessible after initialization
    window.softSinsAuth = softSinsAuth;
});

// Global function for onclick handlers
function openLoginModal() {
    console.log('Global openLoginModal called');
    if (window.softSinsAuth) {
        window.softSinsAuth.openLoginModal();
    } else if (window.authModal) {
        window.authModal.open('login');
    } else {
        console.error('Neither softSinsAuth nor authModal available');
    }
}

// Make globally available
window.openLoginModal = openLoginModal;

// Global access for debugging
window.supabase = supabase;