// app/static/vendor/js/init-alpine.js
/**
 * Alpine.js initialization for vendor pages
 * Provides common data and methods for all vendor pages
 */

// ✅ Use centralized logger
const vendorLog = window.LogConfig.log;

console.log('[VENDOR INIT-ALPINE] Loading...');

function data() {
    console.log('[VENDOR INIT-ALPINE] data() function called');
    return {
        dark: false,
        isSideMenuOpen: false,
        isNotificationsMenuOpen: false,
        isProfileMenuOpen: false,
        currentPage: '',
        currentUser: {},
        vendor: null,
        vendorCode: null,

        init() {
            // Set current page from URL
            const path = window.location.pathname;
            const segments = path.split('/').filter(Boolean);
            this.currentPage = segments[segments.length - 1] || 'dashboard';

            // Get vendor code from URL
            if (segments[0] === 'vendor' && segments[1]) {
                this.vendorCode = segments[1];
            }

            // Load user from localStorage
            const user = localStorage.getItem('currentUser');
            if (user) {
                this.currentUser = JSON.parse(user);
            }

            // Load theme preference
            const theme = localStorage.getItem('theme');
            if (theme === 'dark') {
                this.dark = true;
            }

            // Load vendor info
            this.loadVendorInfo();
        },

        async loadVendorInfo() {
            if (!this.vendorCode) return;

            try {
                // apiClient prepends /api/v1, so /vendor/{code} → /api/v1/vendor/{code}
                const response = await apiClient.get(`/vendor/${this.vendorCode}`);
                this.vendor = response;
                vendorLog.debug('Vendor info loaded', this.vendor);
            } catch (error) {
                vendorLog.error('Failed to load vendor info', error);
            }
        },

        toggleSideMenu() {
            this.isSideMenuOpen = !this.isSideMenuOpen;
        },

        closeSideMenu() {
            this.isSideMenuOpen = false;
        },

        toggleNotificationsMenu() {
            this.isNotificationsMenuOpen = !this.isNotificationsMenuOpen;
            if (this.isNotificationsMenuOpen) {
                this.isProfileMenuOpen = false;
            }
        },

        closeNotificationsMenu() {
            this.isNotificationsMenuOpen = false;
        },

        toggleProfileMenu() {
            this.isProfileMenuOpen = !this.isProfileMenuOpen;
            if (this.isProfileMenuOpen) {
                this.isNotificationsMenuOpen = false;
            }
        },

        closeProfileMenu() {
            this.isProfileMenuOpen = false;
        },

        toggleTheme() {
            this.dark = !this.dark;
            localStorage.setItem('theme', this.dark ? 'dark' : 'light');
        },

        async handleLogout() {
            console.log('🚪 Logging out vendor user...');

            try {
                // Call logout API
                await apiClient.post('/vendor/auth/logout');
                console.log('✅ Logout API called successfully');
            } catch (error) {
                console.error('⚠️ Logout API error (continuing anyway):', error);
            } finally {
                // Clear all tokens and data
                console.log('🧹 Clearing tokens...');
                localStorage.removeItem('vendor_token');
                localStorage.removeItem('currentUser');
                localStorage.removeItem('vendorCode');
                localStorage.clear(); // Clear everything to be safe

                console.log('🔄 Redirecting to login...');
                window.location.href = `/vendor/${this.vendorCode}/login`;
            }
        }
    };
}

/**
 * Language Selector Component
 * Alpine.js component for language switching in vendor dashboard
 */
function languageSelector(currentLang, enabledLanguages) {
    return {
        isLangOpen: false,
        currentLang: currentLang || 'fr',
        languages: enabledLanguages || ['en', 'fr', 'de', 'lb'],
        languageNames: {
            'en': 'English',
            'fr': 'Français',
            'de': 'Deutsch',
            'lb': 'Lëtzebuergesch'
        },
        languageFlags: {
            'en': 'gb',
            'fr': 'fr',
            'de': 'de',
            'lb': 'lu'
        },
        async setLanguage(lang) {
            if (lang === this.currentLang) {
                this.isLangOpen = false;
                return;
            }
            try {
                const response = await fetch('/api/v1/language/set', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ language: lang })
                });
                if (response.ok) {
                    this.currentLang = lang;
                    window.location.reload();
                }
            } catch (error) {
                console.error('Failed to set language:', error);
            }
            this.isLangOpen = false;
        }
    };
}

window.languageSelector = languageSelector;