// CSS imports
import '../css/chat-client.css';
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, version } from 'vue';
import { marked } from 'marked';
import { FormField } from '../../../../../../../../../Users/josako/Library/Application Support/JetBrains/PyCharm2025.1/scratches/old js files/FormField.js';

// Vue en andere bibliotheken beschikbaar maken
window.Vue = { createApp, version };
window.marked = marked;

// Support tools
import '../../../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/vue-components/index.js';

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

// Import specifieke componenten
import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-components/LanguageSelector.vue';
import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';

// Globale Vue error tracking
window.addEventListener('error', function(event) {
  console.error('🚨 [Global Error]', event.error);
});

// Wacht tot DOM geladen is
document.addEventListener('DOMContentLoaded', function() {
  // Controleer of chatConfig is ingesteld
  if (!window.chatConfig) {
    console.error('chatConfig is niet beschikbaar');
    window.chatConfig = {};
  }

  // Vul de sidebar explanation in
  fillSidebarExplanation();

  // Initialiseer language selector
  initializeLanguageSelector();

  // Initialiseer chat app (simpel)
  initializeChatApp();
});

/**
 * Vul de sidebar explanation in
 */
function fillSidebarExplanation() {
  const sidebarElement = document.getElementById('sidebar-explanation');
  if (sidebarElement && window.chatConfig.explanation) {
    if (typeof window.marked === 'function') {
      sidebarElement.innerHTML = window.marked(window.chatConfig.explanation);
    } else if (window.marked && typeof window.marked.parse === 'function') {
      sidebarElement.innerHTML = window.marked.parse(window.chatConfig.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
    } else {
      sidebarElement.innerHTML = window.chatConfig.explanation;
    }
  }
}

/**
 * Initialiseert de language selector
 */
function initializeLanguageSelector() {
  const container = document.getElementById('language-selector-container');

  if (!container) {
    console.error('#language-selector-container niet gevonden');
    return;
  }

  try {
    // Maak props voor de component
    const props = {
      initialLanguage: window.chatConfig.language || 'nl',
      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
    };

    // Mount de component direct - BELANGRIJK: we gebruiken window.Vue als dat beschikbaar is
    // Dit is nodig voor compatibiliteit met oude code
    const app = window.Vue && typeof window.Vue.createApp === 'function' 
        ? window.Vue.createApp(LanguageSelector, props)
        : createApp(LanguageSelector, props);

    // Registreer error handler
    app.config.errorHandler = (err, vm, info) => {
      console.error('🚨 [Vue Error]', err);
      console.error('Component:', vm);
      console.error('Error Info:', info);
    };

    // Mount de component 
    const mountedApp = app.mount(container);

    // Language change event listener
    document.addEventListener('vue:language-changed', function(event) {
      const newLanguage = event.detail.language;
      console.log(`Taal gewijzigd naar ${newLanguage}`);

      // Update chatConfig
      if (window.chatConfig) {
        window.chatConfig.language = newLanguage;
      }

      // Stuur event voor andere componenten
      const globalEvent = new CustomEvent('language-changed', {
        detail: { language: newLanguage }
      });
      document.dispatchEvent(globalEvent);

      // Sla voorkeur op
      localStorage.setItem('preferredLanguage', newLanguage);
    });
  } catch (error) {
    console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
    console.error('Stack trace:', error.stack);
  }
}

/**
 * Initialiseert de chat app (Vue component)
 */
function initializeChatApp() {
  const container = document.querySelector('.chat-container');
  if (!container) {
    console.error('🚨 [CRITICAL ERROR] .chat-container niet gevonden');
    return;
  }

  try {
    if (!ChatApp) {
      throw new Error('🚨 [CRITICAL ERROR] ChatApp component niet gevonden');
    }

    // Extra verificatie dat alle sub-componenten beschikbaar zijn
    if (!Components.MessageHistory || !Components.ChatInput || 
        !Components.TypingIndicator || !Components.ChatMessage) {
      console.warn('⚠️ [WARN] Niet alle benodigde sub-componenten zijn geladen!');
    }

    // Maak props voor de component
    const props = {
      apiPrefix: window.chatConfig.apiPrefix || '',
      conversationId: window.chatConfig.conversationId || 'default',
      userId: window.chatConfig.userId || null,
      userName: window.chatConfig.userName || '',
      initialLanguage: window.chatConfig.language || 'nl',
      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
    };

    // Mount de component met alle nodige componenten
    const app = createApp(ChatApp, props);

    // SSE verbinding configuratie - injecteren in ChatApp component
    app.provide('sseConfig', {
      maxRetries: 3,
      retryDelay: 2000,
      handleSseError: function(error, taskId) {
        console.warn(`SSE verbinding voor task ${taskId} mislukt:`, error);
        // Fallback naar polling als SSE faalt
        return this.fallbackToPolling(taskId);
      },
      fallbackToPolling: function(taskId) {
        console.log(`Fallback naar polling voor task ${taskId}`);
        // Polling implementatie - elke 3 seconden status checken
        const pollingInterval = setInterval(() => {
          const endpoint = `${props.apiPrefix}/api/task_status/${taskId}`;
          fetch(endpoint)
            .then(response => {
              if (!response.ok) throw new Error(`Task status endpoint error: ${response.status}`);
              return response.json();
            })
            .then(data => {
              // Dispatch event om dezelfde event interface als SSE te behouden
              const mockEvent = new CustomEvent('message', {
                detail: { data: JSON.stringify(data) }
              });
              document.dispatchEvent(new CustomEvent(`sse:${taskId}:message`, { detail: mockEvent }));

              // Stop polling als taak klaar is
              if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
                clearInterval(pollingInterval);
              }
            })
            .catch(err => console.error('Polling error:', err));
        }, 3000);
        return pollingInterval;
      }
    });

    // Registreer alle componenten globaal
    Object.entries(Components).forEach(([name, component]) => {
      app.component(name, component);
    });

    // Registreer error handler
    app.config.errorHandler = (err, vm, info) => {
      console.error('🚨 [Vue Error in ChatApp]', err);
      console.error('Component:', vm);
      console.error('Error Info:', info);
    };

    // Mount de component
    const mountedApp = app.mount(container);
    // Bewaar referentie globaal voor debugging
    window.__chatApp = mountedApp;

    // Bewaar een referentie naar de Vue instantie voor gebruik door andere componenten
    window.__vueApp = app;

  } catch (error) {
    console.error('🚨 [CRITICAL ERROR] Bij initialiseren chat app:', error);
    console.error('Stack trace:', error.stack);

    // Fallback naar placeholder
    container.innerHTML = '<div>Fout bij het initialiseren van de chat applicatie</div>';
  }
}

/**
 * Helper functie om Vue 3 element refs te verwerken
 * Oplossing voor $el.querySelector problemen
 */
window.getElementFromRef = function(ref) {
  if (!ref) return null;

  // Vue 3 refs zijn reactieve objecten met een .value eigenschap
  if (ref.value && ref.value instanceof HTMLElement) {
    return ref.value;
  }

  // Directe HTML element refs
  if (ref instanceof HTMLElement) {
    return ref;
  }

  // Vue 3 component instance (geen $el meer in Vue 3)
  if (ref.$el && ref.$el instanceof HTMLElement) {
    return ref.$el;
  }

  // Voor template refs van Vue 3 mounted componenten
  if (typeof ref === 'object' && ref !== null) {
    const element = ref.el || ref.$el || ref.value;
    if (element instanceof HTMLElement) {
      return element;
    }
  }

  return null;
}

console.log('Chat client modules geladen en gebundeld met moderne ES module structuur.');