document.addEventListener('DOMContentLoaded', function() {
    // Fonctionnalité de bascule de thème
    const themeToggle = document.getElementById('theme-toggle');
    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
    const currentTheme = localStorage.getItem('theme') || (prefersDarkScheme.matches ? 'dark' : 'light');
    
    // Définir le thème initial
    if (currentTheme === 'dark') {
        document.documentElement.classList.add('dark');
        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
    } else {
        document.documentElement.classList.remove('dark');
        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
    }
    
    // Basculer le thème au clic du bouton
    themeToggle.addEventListener('click', function() {
        const html = document.documentElement;
        if (html.classList.contains('dark')) {
            html.classList.remove('dark');
            localStorage.setItem('theme', 'light');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        } else {
            html.classList.add('dark');
            localStorage.setItem('theme', 'dark');
            themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
        }
    });
    
    // Éléments du DOM
    const chatForm = document.getElementById('chat-form');
    const messageInput = document.getElementById('message-input');
    const chatContainer = document.getElementById('chat-container');
    const sendButton = document.getElementById('send-button');
    const menuButton = document.getElementById('menu-button');
    const sidebar = document.getElementById('sidebar');
    const closeSidebar = document.getElementById('close-sidebar');
    const apiWarning = document.getElementById('api-warning');
    
    // Configuration de l'API - Définissez ceci sur l'URL de votre backend
    const API_CONFIG = {
        url: '', // Définissez votre point de terminaison d'API ici
        enabled: false // Mettre à true lorsque l'API est connectée
    };
    
    // Fonction pour activer/désactiver le chat en fonction du statut de l'API
    function updateChatStatus() {
        if ( true ){//API_CONFIG.enabled && API_CONFIG.url) {
            messageInput.disabled = false;
            sendButton.disabled = false;
            //apiWarning.style.display = 'none';
            messageInput.placeholder = 'Message HubStation...';
        } else {
            messageInput.disabled = true;
            sendButton.disabled = true;
            apiWarning.style.display = 'block';
            messageInput.placeholder = 'API non connectée...';
        }
    }
    
    // Initialiser le statut du chat
    updateChatStatus();
    
    // Redimensionnement automatique du champ de texte
    messageInput.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        
        // Activer/désactiver le bouton d'envoi en fonction du contenu et du statut de l'API
        if (API_CONFIG.enabled && API_CONFIG.url) {
            sendButton.disabled = this.value.trim() === '';
        }
    });
    
    // Basculer la barre latérale sur mobile
    menuButton.addEventListener('click', function() {
        sidebar.classList.remove('-translate-x-full');
    });
    
    closeSidebar.addEventListener('click', function() {
        sidebar.classList.add('-translate-x-full');
    });
    
    // Gérer la soumission du formulaire
    chatForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        /*
        if (!API_CONFIG.enabled || !API_CONFIG.url) {
            alert('Veuillez d\'abord vous connecter à votre API backend.');
            return;
        }
        */
        
        const message = messageInput.value.trim();
        if (message === '') return;
        
        // Ajouter le message de l'utilisateur
        addMessage('user', message);
        messageInput.value = '';
        messageInput.style.height = 'auto';
        sendButton.disabled = true;
        
        // Afficher l'indicateur de saisie
        const typingIndicator = createTypingIndicator();
        chatContainer.appendChild(typingIndicator);
        chatContainer.scrollTop = chatContainer.scrollHeight;
        
        // TODO: Remplacer ceci par un appel API réel
        // Exemple de structure d'appel API :
        /*
        fetch(API_CONFIG.url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            chatContainer.removeChild(typingIndicator);
            addMessage('assistant', data.reply);
        })
        .catch(error => {
            chatContainer.removeChild(typingIndicator);
            addMessage('assistant', 'Désolé, une erreur s\'est produite lors de la connexion à l\'API.');
        });
        */
        
        // Espace réservé : Supprimer l'indicateur de saisie et afficher le message de connexion API
        setTimeout(() => {
            chatContainer.removeChild(typingIndicator);
            addMessage('assistant', 'API non connectée. Veuillez configurer votre point de terminaison backend.');
        }, 1000);
    });
    
    // Ajouter un nouveau message au chat
    function addMessage(role, content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `mb-6 message-animation ${role === 'user' ? 'text-right' : 'text-left'}`;
        
        const bubble = document.createElement('div');
        bubble.className = `inline-block max-w-xs md:max-w-md lg:max-w-2xl p-4 rounded-lg ${
            role === 'user' ? 'user-message' : 'assistant-message'
        }`;
        
        // Formater le contenu avec des sauts de ligne
        const formattedContent = content.replace(/\n/g, '<br>');
        bubble.innerHTML = formattedContent;
        
        messageDiv.appendChild(bubble);
        chatContainer.appendChild(messageDiv);
        
        // Faire défiler vers le bas
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    // Créer un indicateur de saisie
    function createTypingIndicator() {
        const container = document.createElement('div');
        container.className = 'mb-6 flex items-center';
        
        const avatar = document.createElement('div');
        avatar.className = 'w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mr-3';
        avatar.innerHTML = '<i class="fas fa-robot text-white"></i>';
        
        const dots = document.createElement('div');
        dots.className = 'typing-indicator flex space-x-1';
        
        for (let i = 0; i < 3; i++) {
            const dot = document.createElement('div');
            dot.className = 'w-2 h-2 rounded-full bg-gray-400 typing-dot';
            dots.appendChild(dot);
        }
        
        container.appendChild(avatar);
        container.appendChild(dots);
        
        return container;
    }
    
    // Gérer les clics sur les suggestions
    const suggestions = document.querySelectorAll('.suggestion-card');
    suggestions.forEach(suggestion => {
        suggestion.addEventListener('click', function() {
            if (!API_CONFIG.enabled || !API_CONFIG.url) {
                alert('Veuillez d\'abord vous connecter à votre API backend.');
                return;
            }
            
            const title = this.querySelector('h3').textContent;
            messageInput.value = title;
            //messageInput.dispatchEvent(new Event('input'));
            messageInput.focus();
        });
    });
    
    // Fonction pour connecter l'API (appelez ceci lorsque votre backend est prêt)
    window.connectAPI = function(url) {
        API_CONFIG.url = url;
        API_CONFIG.enabled = true;
        updateChatStatus();
        console.log('API connectée :', url);
    };
    
    // Fonction pour déconnecter l'API
    window.disconnectAPI = function() {
        API_CONFIG.url = '';
        API_CONFIG.enabled = false;
        updateChatStatus();
        console.log('API déconnectée');
    };
});