// Chat Client JavaScript modules
// Modern gebundelde versie met ES modules

// CSS imports - zorg dat deze bestanden bestaan en correct worden gebundeld door Parcel
import '../css/chat-client.css';
// CSS imports uit eveai_chat_client
import '../../../eveai_chat_client/static/assets/css/chat.css';
import '../../../eveai_chat_client/static/assets/css/chat-components.css';
import '../../../eveai_chat_client/static/assets/css/chat-input.css';
import '../../../eveai_chat_client/static/assets/css/chat-message.css';
import '../../../eveai_chat_client/static/assets/css/form.css';
import '../../../eveai_chat_client/static/assets/css/form-message.css';
import '../../../eveai_chat_client/static/assets/css/language-selector.css';

// Dependencies
import { createApp } from 'vue';
import { marked } from 'marked';

// Maak fundamentele libraries globaal beschikbaar
window.Vue = { createApp };
window.marked = marked;

// Gebruik barrel export voor componenten
import * as Components from '../../../eveai_chat_client/static/assets/vue-components/index.js';

// Maak Components globaal beschikbaar voor debugging
window.Components = Components;
console.log('Components loaded:', Object.keys(Components));

// Main chat application - moet als laatste worden geladen
import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';

// Wacht tot het document volledig is geladen voordat we Vue initialiseren
document.addEventListener('DOMContentLoaded', () => {
    console.log('Initializing Chat Application');

    try {
        // Mount SideBar component to sidebar-container
        const sidebarContainer = document.getElementById('sidebar-container');
        if (sidebarContainer && Components.SideBar) {
            const sidebarApp = createApp(Components.SideBar, {
                tenantMake: window.chatConfig?.tenantMake || { name: 'EveAI', logo_url: '' },
                explanationText: window.chatConfig?.explanationText || '',
                initialLanguage: window.chatConfig?.language || 'en',
                supportedLanguageDetails: window.chatConfig?.supportedLanguageDetails || {},
                allowedLanguages: window.chatConfig?.allowedLanguages || ['nl', 'en', 'fr', 'de'],
                apiPrefix: window.chatConfig?.apiPrefix || ''
            });
            
            // Registreer componenten voor sidebar app
            for (const [name, component] of Object.entries(Components)) {
                sidebarApp.component(name, component);
            }
            
            sidebarApp.mount('#sidebar-container');
            console.log('SideBar mounted successfully');
        }

        // Mount MobileHeader component to mobile-header-container
        const mobileHeaderContainer = document.getElementById('mobile-header-container');
        if (mobileHeaderContainer && Components.MobileHeader) {
            const mobileHeaderApp = createApp(Components.MobileHeader, {
                tenantMake: window.chatConfig?.tenantMake || { name: 'EveAI', logo_url: '' },
                initialLanguage: window.chatConfig?.language || 'en',
                supportedLanguageDetails: window.chatConfig?.supportedLanguageDetails || {},
                allowedLanguages: window.chatConfig?.allowedLanguages || ['nl', 'en', 'fr', 'de'],
                apiPrefix: window.chatConfig?.apiPrefix || ''
            });
            
            // Registreer componenten voor mobile header app
            for (const [name, component] of Object.entries(Components)) {
                mobileHeaderApp.component(name, component);
            }
            
            mobileHeaderApp.mount('#mobile-header-container');
            console.log('MobileHeader mounted successfully');
        }

        // Mount ChatApp to the chat container
        const chatContainer = document.querySelector('.chat-container');
        if (chatContainer) {
            const chatApp = createApp(ChatApp);
            
            // Registreer alle componenten globaal voor chat app
            for (const [name, component] of Object.entries(Components)) {
                chatApp.component(name, component);
            }

            chatApp.mount('.chat-container');
            console.log('ChatApp mounted successfully');
        }

        console.log('All Vue apps mounted successfully');
    } catch (error) {
        console.error('Error initializing Vue applications:', error);
    }
});