// 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;

// Support tools
import iconManager, { IconManagerMixin } from '../../../eveai_chat_client/static/assets/js/iconManager.js';
import '../../../eveai_chat_client/static/assets/js/translation.js';

// Gebruik barrel export voor componenten
import * as Components from '../../../eveai_chat_client/static/assets/js/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/js/ChatApp.js';

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

    // Check of #app element bestaat
    const appElement = document.getElementById('app');
    if (!appElement) {
        console.error('DOM element #app not found. Cannot initialize Vue application.');
        return;
    }

    console.log('DOM element #app exists:', appElement);

    try {
        // Maak de Vue applicatie aan
        const app = createApp(ChatApp);

        // Registreer alle componenten globaal
        for (const [name, component] of Object.entries(Components)) {
            app.component(name, component);
        }

        // Voeg de IconManagerMixin toe voor alle componenten
        app.mixin(IconManagerMixin);

        // Mount de applicatie op #app
        const mountedApp = app.mount('#app');

        // Bewaar een referentie naar de app voor debugging
        window.__vueApp = app;

        console.log('Vue app mounted successfully');
    } catch (error) {
        console.error('Error initializing Vue application:', error);
    }
});