// Configuration et variables globales
const API_BASE = '';
let socket;
let currentPrompts = [];
let currentStatus = {};
let bot_controller = { flux_list: [] }; // Variable globale pour la liste des flux

// Initialisation de l'application
document.addEventListener('DOMContentLoaded', function() {
    initializeSocketIO();
    loadInitialData();
    setupEventListeners();
    startPeriodicUpdates();
});

// Initialisation de Socket.IO pour les mises à jour en temps réel
function initializeSocketIO() {
    socket = io();
    
    socket.on('connect', function() {
        console.log('Connecté au serveur');
        updateConnectionStatus(true);
    });
    
    socket.on('disconnect', function() {
        console.log('Déconnecté du serveur');
        updateConnectionStatus(false);
    });
    
    socket.on('status_update', function(data) {
        updateDashboard(data);
    });
    
    socket.on('new_subtitle', function(data) {
        addNewSubtitle(data);
    });
    
    socket.on('new_generation', function(data) {
        updateNextMessage(data);
    });
    
    socket.on('ia_generator_status_changed', function(data) {
        // Synchroniser l'état de l'interface web
        const iaGeneratorToggle = document.getElementById('iaGeneratorToggle');
        const iaGeneratorStatus = document.getElementById('iaGeneratorStatus');
        const chatMessageToggle = document.getElementById('chatMessageToggle');
        const chatMessageStatus = document.getElementById('chatMessageStatus');
        
        if (iaGeneratorToggle && iaGeneratorStatus) {
            iaGeneratorToggle.checked = data.running;
            iaGeneratorStatus.textContent = data.running ? 'En cours...' : 'Arrêté';
            iaGeneratorStatus.className = data.running ? 'text-success' : 'text-muted';
        }
        
        // Synchroniser aussi l'état de l'envoi de messages
        if (chatMessageToggle && chatMessageStatus) {
            chatMessageToggle.checked = data.running;
            chatMessageStatus.textContent = data.running ? 'Activé' : 'Désactivé';
            chatMessageStatus.className = data.running ? 'text-success' : 'text-muted';
        }
        
        console.log('IA Generator status changed:', data);
    });
}

// Mise à jour du statut de connexion
function updateConnectionStatus(connected) {
    const statusElement = document.getElementById('connection-status');
    const iconElement = statusElement.previousElementSibling;
    
    if (connected) {
        statusElement.textContent = 'Connecté';
        iconElement.className = 'fas fa-circle text-success pulse';
    } else {
        statusElement.textContent = 'Déconnecté';
        iconElement.className = 'fas fa-circle text-danger';
    }
}

// Chargement des données initiales
async function loadInitialData() {
    try {
        await Promise.all([
            loadFluxList(),
            loadPrompts(),
            loadUsers(),
            loadStatus(),
            loadSubtitles(),
            loadGenerations(),
            loadInteractionConfig(),
            refreshInteractionLog(),
            loadSettings(),
            checkAutoSubtitleStatus(), // Ajouter la vérification du statut auto
            checkAutoMessageStatus(), // Ajouter la vérification du statut auto messages
            checkChatMessageStatus(), // Ajouter la vérification du statut chat messages
            checkSystemStatus() // Ajouter la vérification du statut système
        ]);
    } catch (error) {
        console.error('Erreur lors du chargement des données:', error);
        showToast('Erreur lors du chargement des données', 'error');
    }
}

// Configuration des écouteurs d'événements
function setupEventListeners() {
    // Modal d'ajout de flux
    const addFluxModal = document.getElementById('addFluxModal');
    addFluxModal.addEventListener('hidden.bs.modal', function() {
        document.getElementById('channel-name').value = '';
        document.getElementById('record-audio').checked = true;
    });
}

// Mises à jour périodiques
function startPeriodicUpdates() {
    // Mise à jour des données toutes les 10 secondes
    setInterval(async () => {
        await loadStatus();
        await loadSubtitles();
        await loadGenerations();
    }, 10000);
}

// === GESTION DES FLUX ===

// Chargement de la liste des flux
async function loadFluxList() {
    try {
        const response = await fetch(`${API_BASE}/api/flux`);
        const fluxList = await response.json();
        bot_controller.flux_list = fluxList; // Mettre à jour la variable globale
        renderFluxList(fluxList);
    } catch (error) {
        console.error('Erreur lors du chargement des flux:', error);
    }
}

// Rendu de la liste des flux
function renderFluxList(fluxList) {
    const container = document.getElementById('flux-list');
    
    if (fluxList.length === 0) {
        container.innerHTML = `
            <div class="text-center text-muted py-4">
                <i class="fas fa-stream fa-3x mb-3"></i>
                <p>Aucun flux configuré</p>
                <p class="small">Cliquez sur "Ajouter Flux" pour commencer</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = fluxList.map(flux => `
        <div class="flux-item fade-in" data-flux-id="${flux.id}">
            <div class="flux-controls">
                <div class="flux-info">
                    <div class="flux-name">
                        <span class="flux-status ${flux.active ? 'active' : 'inactive'}"></span>
                        ${flux.name}
                        <span class="badge bg-${flux.status === 'active' ? 'success' : flux.status === 'error' ? 'danger' : 'warning'} ms-2">${flux.status}</span>
                    </div>
                    <div class="flux-details">
                        ${flux.record_audio ? 
                            '<i class="fas fa-microphone text-success me-1"></i>Audio' : 
                            '<i class="fas fa-microphone-slash text-muted me-1"></i>Pas d\'audio'
                        }
                        <i class="fas fa-comments text-info ms-2 me-1"></i>Chat
                        <span class="text-muted ms-2">${new Date(flux.created_at).toLocaleString()}</span>
                        ${flux.error ? `<span class="text-danger ms-2">Erreur: ${flux.error}</span>` : ''}
                    </div>
                </div>
                <div class="flux-actions">
                    <button class="btn btn-sm btn-outline-warning" onclick="toggleFlux(${flux.id})" ${flux.status === 'error' ? 'disabled' : ''}>
                        <i class="fas fa-${flux.active ? 'pause' : 'play'}"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="removeFlux(${flux.id})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
}

// Fonction pour activer/désactiver un flux
async function toggleFlux(fluxId) {
    try {
        const response = await fetch(`${API_BASE}/api/flux/${fluxId}/toggle`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast(`Flux ${result.active ? 'activé' : 'désactivé'}`, 'success');
            await loadFluxList();
        } else {
            showToast(result.error || 'Erreur lors du changement de statut', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors du changement de statut du flux', 'error');
    }
}

// Ajout d'un nouveau flux
async function addFlux() {
    const channelName = document.getElementById('channel-name').value.trim();
    const recordAudio = document.getElementById('record-audio').checked;
    
    if (!channelName) {
        showToast('Veuillez entrer un nom de canal', 'error');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/flux`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                channel_name: channelName,
                record_audio: recordAudio
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast(`Flux ${channelName} ajouté avec succès`, 'success');
            bootstrap.Modal.getInstance(document.getElementById('addFluxModal')).hide();
            await loadFluxList();
        } else {
            showToast(result.error || 'Erreur lors de l\'ajout du flux', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de l\'ajout du flux', 'error');
    }
}

// Suppression d'un flux
async function removeFlux(fluxId) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer ce flux ?')) {
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/flux/${fluxId}`, {
            method: 'DELETE'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('Flux supprimé avec succès', 'success');
            await loadFluxList();
        } else {
            showToast(result.error || 'Erreur lors de la suppression', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de la suppression du flux', 'error');
    }
}

// === GESTION DES PROMPTS ===

// Chargement des prompts
async function loadPrompts() {
    try {
        const response = await fetch(`${API_BASE}/api/config/prompts`);
        currentPrompts = await response.json();
        renderPrompts();
    } catch (error) {
        console.error('Erreur lors du chargement des prompts:', error);
    }
}

// Rendu des prompts
function renderPrompts() {
    const container = document.getElementById('prompts-list');
    
    container.innerHTML = currentPrompts.map((prompt, index) => `
        <div class="prompt-item fade-in">
            <button class="btn btn-danger btn-sm" onclick="removePrompt(${index})">
                <i class="fas fa-times"></i>
            </button>
            <div class="mb-2">
                <label class="form-label small text-muted">Prompt ${index + 1}</label>
            </div>
            <textarea class="form-control" rows="2" data-prompt-index="${index}">${prompt}</textarea>
        </div>
    `).join('');
}

// Ajout d'un prompt
function addPrompt() {
    currentPrompts.push('Nouveau prompt : ');
    renderPrompts();
    
    // Focus sur le nouveau prompt
    setTimeout(() => {
        const newPromptTextarea = document.querySelector(`textarea[data-prompt-index="${currentPrompts.length - 1}"]`);
        if (newPromptTextarea) {
            newPromptTextarea.focus();
            newPromptTextarea.select();
        }
    }, 100);
}

// Suppression d'un prompt
function removePrompt(index) {
    if (confirm('Êtes-vous sûr de vouloir supprimer ce prompt ?')) {
        currentPrompts.splice(index, 1);
        renderPrompts();
    }
}

// Sauvegarde des prompts
async function savePrompts() {
    // Récupérer les valeurs des textareas
    const textareas = document.querySelectorAll('textarea[data-prompt-index]');
    const updatedPrompts = Array.from(textareas).map(textarea => textarea.value.trim());
    
    try {
        const response = await fetch(`${API_BASE}/api/config/prompts`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                prompts: updatedPrompts
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            currentPrompts = updatedPrompts;
            showToast('Prompts sauvegardés avec succès', 'success');
        } else {
            showToast('Erreur lors de la sauvegarde', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de la sauvegarde des prompts', 'error');
    }
}

// === GESTION DES MESSAGES ===

// Envoi d'un message personnalisé
async function sendCustomMessage() {
    const message = document.getElementById('custom-message').value.trim();
    const userId = parseInt(document.getElementById('custom-message-user').value);
    
    console.log('Debug - Message:', message);
    console.log('Debug - User ID:', userId);
    console.log('Debug - User ID type:', typeof userId);
    console.log('Debug - Selector value:', document.getElementById('custom-message-user').value);
    
    if (!message) {
        showToast('Veuillez entrer un message', 'error');
        return;
    }
    
    // Vérifier si l'utilisateur est valide (pas NaN et dans la plage des utilisateurs)
    if (isNaN(userId) || userId < 0 || userId >= currentUsers.length) {
        showToast('Veuillez sélectionner un utilisateur valide', 'error');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/send-message`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: message,
                channel: 'default',
                user_id: userId
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('Message envoyé avec succès', 'success');
            document.getElementById('custom-message').value = '';
            addToRecentMessages(message);
        } else {
            showToast(result.error || 'Erreur lors de l\'envoi', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de l\'envoi du message', 'error');
    }
}

// Envoi du prochain message
async function sendNextMessage() {
    const nextMessageElement = document.getElementById('next-message');
    const message = nextMessageElement.textContent.trim();
    const userId = parseInt(document.getElementById('custom-message-user').value);
    
    if (message === 'Aucun message en attente') {
        showToast('Aucun message à envoyer', 'warning');
        return;
    }
    
    // Vérifier si l'utilisateur est valide (pas NaN et dans la plage des utilisateurs)
    if (isNaN(userId) || userId < 0 || userId >= currentUsers.length) {
        showToast('Veuillez sélectionner un utilisateur valide', 'error');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/send-message`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: message,
                channel: 'default',
                user_id: userId
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('Message envoyé avec succès', 'success');
            addToRecentMessages(message);
            nextMessageElement.textContent = 'Aucun message en attente';
        } else {
            showToast(result.error || 'Erreur lors de l\'envoi', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de l\'envoi du message', 'error');
    }
}

// Envoi de la dernière génération
async function sendLastGeneration() {
    const userId = parseInt(document.getElementById('custom-message-user').value);
    
    // Vérifier si l'utilisateur est valide (pas NaN et dans la plage des utilisateurs)
    if (isNaN(userId) || userId < 0 || userId >= currentUsers.length) {
        showToast('Veuillez sélectionner un utilisateur valide', 'error');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/generations`);
        const generations = await response.json();
        
        if (Object.keys(generations).length === 0) {
            showToast('Aucune génération disponible', 'warning');
            return;
        }
        
        const sortedKeys = Object.keys(generations).sort();
        const lastGeneration = generations[sortedKeys[sortedKeys.length - 1]];
        
        const sendResponse = await fetch(`${API_BASE}/api/send-message`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: lastGeneration,
                channel: 'default',
                user_id: userId
            })
        });
        
        const result = await sendResponse.json();
        
        if (result.success) {
            showToast('Dernière génération envoyée', 'success');
            addToRecentMessages(lastGeneration);
        } else {
            showToast(result.error || 'Erreur lors de l\'envoi', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de l\'envoi de la génération', 'error');
    }
}

// Ajout d'un message aux messages récents
function addToRecentMessages(message) {
    const container = document.getElementById('recent-messages');
    const messageElement = document.createElement('div');
    messageElement.className = 'message-item fade-in';
    messageElement.innerHTML = `
        <div class="message-content">${message}</div>
        <div class="message-time">${new Date().toLocaleTimeString()}</div>
    `;
    
    container.insertBefore(messageElement, container.firstChild);
    
    // Limiter à 10 messages récents
    const messages = container.children;
    if (messages.length > 10) {
        container.removeChild(messages[messages.length - 1]);
    }
}

// === GESTION DES SOUS-TITRES ===

// Chargement des sous-titres
async function loadSubtitles() {
    try {
        const response = await fetch(`${API_BASE}/api/subtitles`);
        const subtitles = await response.json();
        renderSubtitles(subtitles);
    } catch (error) {
        console.error('Erreur lors du chargement des sous-titres:', error);
    }
}

// Rendu des sous-titres
function renderSubtitles(subtitles) {
    const historyContainer = document.getElementById('subtitles-history');
    const lastSubtitleElement = document.getElementById('last-subtitle');
    
    if (Object.keys(subtitles).length === 0) {
        lastSubtitleElement.textContent = 'Aucun texte détecté pour le moment';
        historyContainer.innerHTML = '<p class="text-muted text-center">Aucun sous-titre disponible</p>';
        return;
    }
    
    const sortedKeys = Object.keys(subtitles).sort();
    const lastKey = sortedKeys[sortedKeys.length - 1];
    
    // Mettre à jour le dernier sous-titre
    lastSubtitleElement.textContent = subtitles[lastKey];
    
    // Mettre à jour l'historique
    historyContainer.innerHTML = sortedKeys.reverse().slice(0, 10).map(key => `
        <div class="subtitle-item fade-in">
            <div class="subtitle-content">${subtitles[key]}</div>
            <div class="subtitle-time text-muted small">${key}</div>
        </div>
    `).join('');
}

// Génération d'une réponse à partir du sous-titre
async function generateFromSubtitle() {
    const lastSubtitleElement = document.getElementById('last-subtitle');
    const text = lastSubtitleElement.textContent.trim();
    
    if (text === 'Aucun texte détecté pour le moment') {
        showToast('Aucun sous-titre disponible pour la génération', 'warning');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/generate-response`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                text: text
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('Génération de réponse lancée', 'success');
        } else {
            showToast(result.error || 'Erreur lors de la génération', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de la génération de réponse', 'error');
    }
}

function processSubtitles() {
    // Afficher un indicateur de chargement
    const button = event.target;
    const originalText = button.innerHTML;
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Traitement en cours...';
    button.disabled = true;
    
    fetch('/api/subtitles/process', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            // Actualiser les sous-titres
            loadSubtitles();
        } else {
            showToast('Erreur: ' + data.error, 'danger');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showToast('Erreur lors du traitement des sous-titres', 'danger');
    })
    .finally(() => {
        // Restaurer le bouton
        button.innerHTML = originalText;
        button.disabled = false;
    });
}

async function clearSubtitlesHistory() {
    // Demander confirmation avant de nettoyer
    if (!confirm('Êtes-vous sûr de vouloir nettoyer l\'historique des sous-titres ? Cette action est irréversible.')) {
        return;
    }
    
    try {
        const response = await fetch('/api/subtitles/clear', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showToast(data.message, 'success');
            // Vider l'affichage de l'historique
            document.getElementById('subtitles-history').innerHTML = '<div class="text-muted text-center">Aucun sous-titre dans l\'historique</div>';
            // Mettre à jour le dernier sous-titre
            document.getElementById('last-subtitle').innerHTML = 'Aucun texte détecté pour le moment';
            document.getElementById('last-subtitle').className = 'alert alert-warning';
        } else {
            showToast(data.error || 'Erreur lors du nettoyage', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors du nettoyage de l\'historique', 'error');
    }
}

// === GESTION DES GÉNÉRATIONS ===

// Chargement des générations
async function loadGenerations() {
    try {
        const response = await fetch(`${API_BASE}/api/generations`);
        const generations = await response.json();
        
        if (Object.keys(generations).length > 0) {
            const sortedKeys = Object.keys(generations).sort();
            const lastGeneration = generations[sortedKeys[sortedKeys.length - 1]];
            updateNextMessage(lastGeneration);
        }
    } catch (error) {
        console.error('Erreur lors du chargement des générations:', error);
    }
}

// Mise à jour du prochain message
function updateNextMessage(message) {
    const nextMessageElement = document.getElementById('next-message');
    nextMessageElement.textContent = message || 'Aucun message en attente';
}

// === GESTION DU STATUT ===

// Chargement du statut
async function loadStatus() {
    try {
        const response = await fetch(`${API_BASE}/api/status`);
        currentStatus = await response.json();
        updateDashboard(currentStatus);
    } catch (error) {
        console.error('Erreur lors du chargement du statut:', error);
    }
}

// Mise à jour du tableau de bord
function updateDashboard(status) {
    document.getElementById('flux-count').textContent = status.flux_count || 0;
    document.getElementById('recording-count').textContent = status.active_recordings || 0;
    document.getElementById('chat-count').textContent = status.chat_connections || 0;
    
    if (status.last_subtitle) {
        document.getElementById('last-subtitle').textContent = status.last_subtitle;
    }
    
    if (status.next_message) {
        updateNextMessage(status.next_message);
    }
    
    // Mettre à jour l'état du chat
    updateChatState();
}

// === ACTIONS RAPIDES ===

// Génération d'une réponse
async function generateResponse() {
    const lastSubtitleElement = document.getElementById('last-subtitle');
    const text = lastSubtitleElement.textContent.trim();
    
    if (text === 'Aucun texte détecté pour le moment') {
        showToast('Aucun sous-titre disponible pour la génération', 'warning');
        return;
    }
    
    await generateFromSubtitle();
}

// Actualisation des données
async function refreshData() {
    showToast('Actualisation en cours...', 'info');
    await loadInitialData();
    showToast('Données actualisées', 'success');
}

// === UTILITAIRES ===

// Affichage des notifications toast
function showToast(message, type = 'info') {
    // Créer le conteneur de toast s'il n'existe pas
    let container = document.querySelector('.toast-container');
    if (!container) {
        container = document.createElement('div');
        container.className = 'toast-container';
        document.body.appendChild(container);
    }
    
    const toastId = 'toast-' + Date.now();
    const toastColors = {
        success: 'text-bg-success',
        error: 'text-bg-danger',
        warning: 'text-bg-warning',
        info: 'text-bg-info'
    };
    
    const toastElement = document.createElement('div');
    toastElement.id = toastId;
    toastElement.className = `toast ${toastColors[type] || 'text-bg-info'}`;
    toastElement.setAttribute('role', 'alert');
    toastElement.innerHTML = `
        <div class="toast-header">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
            <strong class="me-auto">TwitchBot</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            ${message}
        </div>
    `;
    
    container.appendChild(toastElement);
    
    const toast = new bootstrap.Toast(toastElement, {
        autohide: true,
        delay: type === 'error' ? 5000 : 3000
    });
    
    toast.show();
    
    // Supprimer l'élément après fermeture
    toastElement.addEventListener('hidden.bs.toast', () => {
        container.removeChild(toastElement);
    });
}

// === FONCTIONS UTILITAIRES ===

function showAlert(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // Ajouter l'alerte en haut de la page
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    // Supprimer automatiquement après 5 secondes
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// Gestion des erreurs globales
window.addEventListener('error', function(e) {
    console.error('Erreur JavaScript:', e.error);
    showToast('Une erreur inattendue s\'est produite', 'error');
});

// Gestion des erreurs de promesses non capturées
window.addEventListener('unhandledrejection', function(e) {
    console.error('Promesse rejetée:', e.reason);
    showToast('Erreur de communication avec le serveur', 'error');
}); 

// === PARAMÈTRES ===

async function loadSettings() {
    try {
        const response = await fetch(`${API_BASE}/api/config/settings`);
        const result = await response.json();
        if (!result.success) return;
        const settings = result.settings || {};
        const maxCharsEl = document.getElementById('settings-message-max-chars');
        if (maxCharsEl) {
            maxCharsEl.value = Number.isFinite(settings.twitch_message_max_chars) ? settings.twitch_message_max_chars : 100;
        }
    } catch (e) {
        console.error('loadSettings error:', e);
    }
}

async function saveSettings() {
    try {
        const maxCharsEl = document.getElementById('settings-message-max-chars');
        const twitch_message_max_chars = maxCharsEl ? parseInt(maxCharsEl.value || '100', 10) : 100;

        const response = await fetch(`${API_BASE}/api/config/settings`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ settings: { twitch_message_max_chars } })
        });
        const result = await response.json();
        if (result.success) {
            showToast('Paramètres sauvegardés', 'success');
        } else {
            showToast(result.error || 'Erreur sauvegarde paramètres', 'error');
        }
    } catch (e) {
        console.error('saveSettings error:', e);
        showToast('Erreur sauvegarde paramètres', 'error');
    }
}

// === NAVBAR SOMMAIRE (tabs) ===
function activateMainTab(tabButtonId) {
    try {
        const el = document.getElementById(tabButtonId);
        if (!el) return;
        const tab = new bootstrap.Tab(el);
        tab.show();
    } catch (e) {
        console.error('activateMainTab error:', e);
    }
}

function syncNavbarSitemapActive(tabButtonId) {
    try {
        const links = document.querySelectorAll('.navbar-sitemap-link[data-main-tab]');
        links.forEach(a => {
            const target = a.getAttribute('data-main-tab');
            a.classList.toggle('active', target === tabButtonId);
        });
    } catch (e) {
        console.error('syncNavbarSitemapActive error:', e);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Sync initial
    const activeMain = document.querySelector('#mainTabs .nav-link.active');
    if (activeMain && activeMain.id) syncNavbarSitemapActive(activeMain.id);

    // Sync on tab changes
    const mainTabButtons = document.querySelectorAll('#mainTabs .nav-link[data-bs-toggle="tab"]');
    mainTabButtons.forEach(btn => {
        btn.addEventListener('shown.bs.tab', function(ev) {
            if (ev && ev.target && ev.target.id) syncNavbarSitemapActive(ev.target.id);
        });
    });
});

// === INTERACTION CHAT ===

let interactionConfig = null;
let interactionRegisteredAccounts = [];

async function loadInteractionConfig() {
    try {
        const response = await fetch(`${API_BASE}/api/interaction/config`);
        const result = await response.json();

        if (!result.success) {
            console.error('Erreur interaction config:', result.error);
            return;
        }

        interactionConfig = result.config || {};
        interactionRegisteredAccounts = result.registered_accounts || [];
        renderInteractionConfig();
    } catch (error) {
        console.error('Erreur lors du chargement interaction config:', error);
    }
}

function renderInteractionConfig() {
    if (!interactionConfig) return;

    const enabledEl = document.getElementById('interaction-enabled');
    const modeEl = document.getElementById('interaction-mode');
    const tgptEnabledEl = document.getElementById('interaction-tgpt-enabled');
    const tgptPrepromptEl = document.getElementById('interaction-tgpt-preprompt');
    const tgptMaxCharsEl = document.getElementById('interaction-tgpt-max-chars');
    const cooldownEl = document.getElementById('interaction-cooldown');
    const defaultsEl = document.getElementById('interaction-default-responses');
    const accountsEl = document.getElementById('interaction-registered-accounts');

    if (enabledEl) enabledEl.checked = !!interactionConfig.enabled;
    if (modeEl) modeEl.value = interactionConfig.mode || 'predefined';
    if (tgptEnabledEl) tgptEnabledEl.checked = !!interactionConfig.tgpt_enabled;
    if (tgptPrepromptEl) tgptPrepromptEl.value = interactionConfig.tgpt_preprompt || '';
    if (tgptMaxCharsEl) tgptMaxCharsEl.value = Number.isFinite(interactionConfig.tgpt_max_chars) ? interactionConfig.tgpt_max_chars : 100;
    if (cooldownEl) cooldownEl.value = Number.isFinite(interactionConfig.cooldown_seconds) ? interactionConfig.cooldown_seconds : 8;

    if (defaultsEl) {
        const defaults = Array.isArray(interactionConfig.default_responses) ? interactionConfig.default_responses : ['salut'];
        defaultsEl.value = defaults.join('\n');
    }

    if (accountsEl) {
        if (!interactionRegisteredAccounts || interactionRegisteredAccounts.length === 0) {
            accountsEl.textContent = 'Aucun compte enregistré (config/user.json)';
        } else {
            accountsEl.innerHTML = interactionRegisteredAccounts
                .map(a => `<div>@${escapeHtml(String(a))}</div>`)
                .join('');
        }
    }

    renderInteractionRules();
}

function renderInteractionRules() {
    const container = document.getElementById('interaction-rules');
    if (!container) return;

    const rules = Array.isArray(interactionConfig.rules) ? interactionConfig.rules : [];
    if (rules.length === 0) {
        container.innerHTML = `
            <div class="text-muted text-center py-3 border rounded bg-dark">
                Aucune règle. La réponse par défaut sera utilisée.
            </div>
        `;
        return;
    }

    container.innerHTML = rules.map((r, idx) => {
        const id = r.id || `rule_${idx}`;
        return `
            <div class="border rounded p-2 bg-dark">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex gap-3 align-items-center">
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="rule-enabled-${id}" ${r.enabled !== false ? 'checked' : ''} onchange="onInteractionRuleChange('${id}')">
                            <label class="form-check-label small text-muted" for="rule-enabled-${id}">Actif</label>
                        </div>
                        <div class="small text-muted">#${idx + 1}</div>
                    </div>
                    <div class="d-flex gap-2">
                        <button class="btn btn-success btn-sm" onclick="saveInteractionRule('${id}')">
                            <i class="fas fa-save me-1"></i>Enregistrer
                        </button>
                        <button class="btn btn-outline-danger btn-sm" onclick="deleteInteractionRule('${id}')">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>

                <div class="row g-2 mt-2">
                    <div class="col-md-4">
                        <label class="form-label small text-muted">Utilisateur source (optionnel)</label>
                        <input class="form-control form-control-sm" type="text" id="rule-from-${id}" value="${escapeAttr(r.from_username || '')}" placeholder="cammenbert" oninput="onInteractionRuleChange('${id}')">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small text-muted">Compte mentionné (optionnel)</label>
                        <input class="form-control form-control-sm" type="text" id="rule-mention-${id}" value="${escapeAttr(r.mention_account || '')}" placeholder="@exoticnaturees" oninput="onInteractionRuleChange('${id}')">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small text-muted">Contient (optionnel)</label>
                        <input class="form-control form-control-sm" type="text" id="rule-contains-${id}" value="${escapeAttr(r.contains_text || '')}" placeholder="etoile etoile" oninput="onInteractionRuleChange('${id}')">
                    </div>
                </div>

                <div class="mt-2">
                    <label class="form-label small text-muted">Réponse (sans @user)</label>
                    <input class="form-control form-control-sm" type="text" id="rule-response-${id}" value="${escapeAttr(r.response_text || '')}" placeholder="filante" oninput="onInteractionRuleChange('${id}')">
                </div>

                <div class="mt-2">
                    <label class="form-label small text-muted">Préprompt TGPT (optionnel, override)</label>
                    <textarea class="form-control form-control-sm" id="rule-tgpt-preprompt-${id}" rows="2" placeholder="Ex: Réponds en une phrase." oninput="onInteractionRuleChange('${id}')">${escapeHtml(r.tgpt_preprompt || '')}</textarea>
                </div>
            </div>
        `;
    }).join('');
}

function onInteractionRuleChange(ruleId) {
    const rules = Array.isArray(interactionConfig.rules) ? interactionConfig.rules : [];
    const rule = rules.find(x => String(x.id) === String(ruleId));
    if (!rule) return;

    const enabledEl = document.getElementById(`rule-enabled-${ruleId}`);
    const fromEl = document.getElementById(`rule-from-${ruleId}`);
    const mentionEl = document.getElementById(`rule-mention-${ruleId}`);
    const containsEl = document.getElementById(`rule-contains-${ruleId}`);
    const responseEl = document.getElementById(`rule-response-${ruleId}`);
    const tgptPrepromptEl = document.getElementById(`rule-tgpt-preprompt-${ruleId}`);

    rule.enabled = enabledEl ? enabledEl.checked : true;
    rule.from_username = fromEl ? fromEl.value.trim() : '';
    rule.mention_account = mentionEl ? mentionEl.value.trim() : '';
    rule.contains_text = containsEl ? containsEl.value.trim() : '';
    rule.response_text = responseEl ? responseEl.value.trim() : '';
    rule.tgpt_preprompt = tgptPrepromptEl ? tgptPrepromptEl.value : '';
}

async function saveInteractionRule(ruleId) {
    // S'assurer que les champs du DOM sont bien remontés dans l'objet
    onInteractionRuleChange(ruleId);
    await saveInteractionConfig();
}

function addInteractionRule() {
    if (!interactionConfig) interactionConfig = {};
    if (!Array.isArray(interactionConfig.rules)) interactionConfig.rules = [];

    const id = `r_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
    interactionConfig.rules.unshift({
        id,
        enabled: true,
        from_username: '',
        mention_account: '',
        contains_text: '',
        response_text: '',
        tgpt_preprompt: '',
    });

    renderInteractionRules();
}

function deleteInteractionRule(ruleId) {
    if (!interactionConfig || !Array.isArray(interactionConfig.rules)) return;
    interactionConfig.rules = interactionConfig.rules.filter(r => String(r.id) !== String(ruleId));
    renderInteractionRules();
}

async function saveInteractionConfig() {
    try {
        const enabledEl = document.getElementById('interaction-enabled');
        const modeEl = document.getElementById('interaction-mode');
        const tgptEnabledEl = document.getElementById('interaction-tgpt-enabled');
        const tgptPrepromptEl = document.getElementById('interaction-tgpt-preprompt');
        const tgptMaxCharsEl = document.getElementById('interaction-tgpt-max-chars');
        const cooldownEl = document.getElementById('interaction-cooldown');
        const defaultsEl = document.getElementById('interaction-default-responses');

        interactionConfig = interactionConfig || {};
        interactionConfig.enabled = enabledEl ? !!enabledEl.checked : true;
        interactionConfig.mode = modeEl ? modeEl.value : 'predefined';
        interactionConfig.tgpt_enabled = tgptEnabledEl ? !!tgptEnabledEl.checked : false;
        interactionConfig.tgpt_preprompt = tgptPrepromptEl ? tgptPrepromptEl.value : '';
        interactionConfig.tgpt_max_chars = tgptMaxCharsEl ? parseInt(tgptMaxCharsEl.value || '100', 10) : 100;
        interactionConfig.cooldown_seconds = cooldownEl ? parseInt(cooldownEl.value || '8', 10) : 8;

        const defaults = defaultsEl ? defaultsEl.value.split('\n').map(x => x.trim()).filter(Boolean) : ['salut'];
        interactionConfig.default_responses = defaults.length ? defaults : ['salut'];

        // Nettoyage minimal des règles
        if (Array.isArray(interactionConfig.rules)) {
            interactionConfig.rules = interactionConfig.rules.map(r => ({
                id: String(r.id || ''),
                enabled: r.enabled !== false,
                from_username: (r.from_username || '').trim() || null,
                mention_account: (r.mention_account || '').trim() || null,
                contains_text: (r.contains_text || '').trim() || null,
                response_text: (r.response_text || '').trim(),
                tgpt_preprompt: (r.tgpt_preprompt || '').trim() || null,
            })).filter(r => r.id);
        } else {
            interactionConfig.rules = [];
        }

        const response = await fetch(`${API_BASE}/api/interaction/config`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ config: interactionConfig })
        });
        const result = await response.json();

        if (result.success) {
            interactionConfig = result.config;
            renderInteractionConfig();
            showToast('Interaction chat sauvegardée', 'success');
        } else {
            showToast(result.error || 'Erreur sauvegarde interaction chat', 'error');
        }
    } catch (error) {
        console.error('Erreur save interaction:', error);
        showToast('Erreur sauvegarde interaction chat', 'error');
    }
}

async function refreshInteractionConfig() {
    await loadInteractionConfig();
}

async function refreshInteractionLog() {
    try {
        const response = await fetch(`${API_BASE}/api/interaction/log?limit=120`);
        const result = await response.json();
        const container = document.getElementById('interaction-log');
        if (!container) return;

        if (!result.success) {
            container.innerHTML = `<div class="text-danger small">Erreur: ${escapeHtml(String(result.error || 'unknown'))}</div>`;
            return;
        }

        const logs = Array.isArray(result.logs) ? result.logs : [];
        if (logs.length === 0) {
            container.innerHTML = `<div class="text-muted text-center">Aucun log</div>`;
            return;
        }

        container.innerHTML = logs.slice().reverse().map(l => {
            const t = escapeHtml(String(l.ts || ''));
            const typ = escapeHtml(String(l.type || ''));
            const from = escapeHtml(String(l.from || ''));
            const content = escapeHtml(String(l.content || ''));
            const response = escapeHtml(String(l.response || ''));
            const ruleId = l.rule_id ? `<span class="badge bg-info ms-2">rule ${escapeHtml(String(l.rule_id))}</span>` : '';

            let body = '';
            if (typ === 'responded') {
                body = `<div class="small"><strong>@${from}</strong> → <span class="text-muted">${content}</span></div>
                        <div class="small text-success">${response}</div>`;
            } else if (typ === 'error') {
                body = `<div class="small text-danger">${escapeHtml(String(l.error || 'error'))}</div>`;
            } else {
                body = `<div class="small text-muted">${escapeHtml(JSON.stringify(l))}</div>`;
            }

            return `
                <div class="subtitle-item fade-in">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="subtitle-time text-muted small">${t}</div>
                        <div><span class="badge bg-secondary">${typ}</span>${ruleId}</div>
                    </div>
                    ${body}
                </div>
            `;
        }).join('');
    } catch (error) {
        console.error('Erreur logs interaction:', error);
    }
}

function escapeHtml(text) {
    return String(text)
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
}

function escapeAttr(text) {
    return escapeHtml(text).replaceAll('`', '&#096;');
}

// === GESTION DU CHAT ===

// Variables globales pour le chat
let chatMessages = [];
let chatPaused = false;
let activeFlux = null;
let chatInput = null;
let chatMessagesContainer = null;
let chatUpdateInterval = null;

// Initialisation du chat
function initializeChat() {
    chatInput = document.getElementById('chat-input');
    chatMessagesContainer = document.getElementById('chat-messages');
    
    // Gestionnaire pour l'envoi de messages
    chatInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendChatMessage();
        }
    });
    
    // Mise à jour de l'état du chat selon les flux actifs
    updateChatState();
}

// Mise à jour de l'état du chat
function updateChatState() {
    const hasActiveFlux = currentStatus && currentStatus.flux_count > 0;
    
    if (hasActiveFlux) {
        chatInput.disabled = false;
        chatInput.nextElementSibling.disabled = false;
        chatInput.placeholder = "Tapez un message...";
        
        // Supprimer le message de bienvenue
        const welcomeElement = chatMessagesContainer.querySelector('.chat-welcome');
        if (welcomeElement) {
            welcomeElement.remove();
        }
        
        // Démarrer la récupération des messages de chat
        startChatUpdates();
        
        // Ajouter un message système seulement si c'est la première fois
        const existingSystemMessage = chatMessagesContainer.querySelector('.chat-message.system-message');
        if (!existingSystemMessage) {
            addSystemMessage('Chat connecté au stream');
        }
    } else {
        chatInput.disabled = true;
        chatInput.nextElementSibling.disabled = true;
        chatInput.placeholder = "Aucun flux actif";
        
        // Arrêter la récupération des messages
        stopChatUpdates();
        
        // Afficher le message de bienvenue
        if (!chatMessagesContainer.querySelector('.chat-welcome')) {
            chatMessagesContainer.innerHTML = `
                <div class="chat-welcome">
                    <i class="fas fa-comments text-muted"></i>
                    <p class="text-muted">Le chat apparaîtra ici quand un flux sera actif</p>
                </div>
            `;
        }
    }
}

// Démarrer les mises à jour du chat
function startChatUpdates() {
    if (chatUpdateInterval) {
        clearInterval(chatUpdateInterval);
    }
    
    // Récupérer les messages toutes les 3 secondes
    chatUpdateInterval = setInterval(loadChatMessages, 3000);
}

// Arrêter les mises à jour du chat
function stopChatUpdates() {
    if (chatUpdateInterval) {
        clearInterval(chatUpdateInterval);
        chatUpdateInterval = null;
    }
}

// Charger les messages de chat depuis l'API
async function loadChatMessages() {
    if (chatPaused) return;
    
    try {
        // Trouver le premier flux actif
        const activeFlux = bot_controller.flux_list.find(flux => flux.active);
        if (!activeFlux) return;
        
        const response = await fetch(`${API_BASE}/api/chat/${activeFlux.id}/messages`);
        const result = await response.json();
        
        if (result.success && result.messages) {
            // Ajouter les nouveaux messages
            result.messages.forEach(msg => {
                const messageExists = chatMessages.some(existing => 
                    existing.timestamp === msg.timestamp && 
                    existing.username === msg.username && 
                    existing.content === msg.content
                );
                
                if (!messageExists) {
                    addChatMessage(msg.username, msg.content, false, false);
                    chatMessages.push(msg);
                }
            });
        }
    } catch (error) {
        console.error('Erreur lors du chargement des messages de chat:', error);
    }
}

// Ajout d'un message au chat
function addChatMessage(username, message, isOwn = false, isSystem = false) {
    const messageElement = document.createElement('div');
    messageElement.className = `chat-message ${isOwn ? 'own-message' : ''} ${isSystem ? 'system-message' : ''}`;
    
    const timestamp = new Date().toLocaleTimeString('fr-FR', {
        hour: '2-digit',
        minute: '2-digit'
    });
    
    if (isSystem) {
        messageElement.innerHTML = `
            <div class="message-text">${message}</div>
            <div class="message-time">${timestamp}</div>
        `;
    } else {
        messageElement.innerHTML = `
            <div class="username">${username}</div>
            <div class="message-text">${message}</div>
            <div class="message-time">${timestamp}</div>
        `;
    }
    
    chatMessagesContainer.appendChild(messageElement);
    
    // Auto-scroll vers le bas
    chatMessagesContainer.scrollTop = chatMessagesContainer.scrollHeight;
    
    // Limiter le nombre de messages (garder les 100 derniers)
    const messages = chatMessagesContainer.querySelectorAll('.chat-message');
    if (messages.length > 100) {
        messages[0].remove();
    }
}

// Ajout d'un message système
function addSystemMessage(message) {
    // Vérifier si le message système existe déjà
    const existingMessages = chatMessagesContainer.querySelectorAll('.chat-message.system-message');
    for (let msg of existingMessages) {
        const messageText = msg.querySelector('.message-text');
        if (messageText && messageText.textContent === message) {
            return; // Message déjà présent, ne pas l'ajouter
        }
    }
    
    addChatMessage('', message, false, true);
}

// Envoi d'un message via le chat
async function sendChatMessage() {
    const message = chatInput.value.trim();
    const userId = parseInt(document.getElementById('chat-user-select').value);
    
    console.log('Debug - Chat Message:', message);
    console.log('Debug - Chat User ID:', userId);
    console.log('Debug - Chat User ID type:', typeof userId);
    console.log('Debug - Chat Selector value:', document.getElementById('chat-user-select').value);
    
    if (!message) return;
    
    // Vérifier si l'utilisateur est valide (pas NaN et dans la plage des utilisateurs)
    if (isNaN(userId) || userId < 0 || userId >= currentUsers.length) {
        showToast('Veuillez sélectionner un utilisateur valide', 'error');
        return;
    }
    
    // Trouver le premier flux actif
    const activeFlux = bot_controller.flux_list.find(flux => flux.active);
    if (!activeFlux) {
        showToast('Aucun flux actif pour envoyer le message', 'error');
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/chat/${activeFlux.id}/send`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                message: message,
                user_id: userId
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Ajouter le message au chat local
            addChatMessage('Vous', message, true);
            chatInput.value = '';
            showToast('Message envoyé', 'success');
        } else {
            showToast(result.error || 'Erreur lors de l\'envoi', 'error');
        }
    } catch (error) {
        console.error('Erreur lors de l\'envoi du message:', error);
        showToast('Erreur lors de l\'envoi du message', 'error');
    }
}

// Effacer le chat
function clearChat() {
    if (confirm('Voulez-vous vraiment effacer tous les messages du chat ?')) {
        chatMessagesContainer.innerHTML = `
            <div class="chat-welcome">
                <i class="fas fa-comments text-muted"></i>
                <p class="text-muted">Le chat apparaîtra ici quand un flux sera actif</p>
            </div>
        `;
        chatMessages = [];
        showToast('Chat effacé', 'info');
    }
}

// Pause/Reprendre le chat
function toggleChat() {
    chatPaused = !chatPaused;
    const toggleIcon = document.getElementById('chat-toggle-icon');
    
    if (chatPaused) {
        toggleIcon.className = 'fas fa-play';
        addSystemMessage('Chat en pause');
    } else {
        toggleIcon.className = 'fas fa-pause';
        addSystemMessage('Chat repris');
    }
    
    showToast(chatPaused ? 'Chat en pause' : 'Chat repris', 'info');
}

// Simulation de messages de chat (pour les tests)
function simulateChatMessages() {
    if (chatPaused) return;
    
    const usernames = ['Viewer1', 'ChatUser', 'TwitchFan', 'StreamLover', 'Gamer123'];
    const messages = [
        'Salut tout le monde !',
        'Super stream !',
        'Comment ça va ?',
        'J\'adore ce jeu',
        'Merci pour le stream',
        'GG !',
        'Belle partie',
        'Continue comme ça !',
        'J\'ai hâte de voir la suite',
        'Bon stream !'
    ];
    
    const randomUsername = usernames[Math.floor(Math.random() * usernames.length)];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    
    addChatMessage(randomUsername, randomMessage);
}

// Mise à jour du statut avec les informations du chat
function updateDashboard(status) {
    document.getElementById('flux-count').textContent = status.flux_count || 0;
    document.getElementById('recording-count').textContent = status.active_recordings || 0;
    document.getElementById('chat-count').textContent = status.chat_connections || 0;
    
    if (status.last_subtitle) {
        document.getElementById('last-subtitle').textContent = status.last_subtitle;
    }
    
    if (status.next_message) {
        updateNextMessage(status.next_message);
    }
    
    // Mettre à jour l'état du chat
    updateChatState();
}

// Initialisation du chat au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    initializeChat();
});

// === GESTION DES UTILISATEURS ===

// Variables globales pour les utilisateurs
let currentUsers = [];

// Chargement des utilisateurs
async function loadUsers() {
    try {
        const response = await fetch(`${API_BASE}/api/config/users`);
        currentUsers = await response.json();
        renderUsers();
        updateUserSelectors(); // Mettre à jour les sélecteurs après le chargement
    } catch (error) {
        console.error('Erreur lors du chargement des utilisateurs:', error);
    }
}

// Rendu de la liste des utilisateurs
function renderUsers() {
    const container = document.getElementById('users-list');
    
    if (currentUsers.length === 0) {
        container.innerHTML = `
            <div class="users-empty">
                <i class="fas fa-users"></i>
                <h5>Aucun utilisateur configuré</h5>
                <p>Ajoutez des utilisateurs pour envoyer des messages</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = currentUsers.map((user, index) => `
        <div class="user-item fade-in" data-user-id="${index}">
            <div class="user-info">
                <div class="user-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-details">
                    <div class="user-pseudo">
                        <span class="user-status active"></span>
                        ${user.tw_acc_pseudo}
                        <span class="user-charactere">${user.charactere}</span>
                    </div>
                    <div class="user-token">
                        ${user.tw_acc_token.substring(0, 20)}...
                    </div>
                </div>
                <div class="user-controls">
                    <div class="d-flex align-items-center me-2" title="Activer/désactiver cet utilisateur">
                        <span class="small text-muted me-1">Actif</span>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="user-enabled-${index}" ${user.enabled === false ? '' : 'checked'} onchange="toggleUserEnabled(${index})">
                        </div>
                    </div>
                    <div class="d-flex align-items-center me-2" title="Bypass anti-boucle Interaction chat">
                        <span class="small text-muted me-1">Bypass</span>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" id="user-bypass-${index}" ${user.interaction_bypass_antiloop ? 'checked' : ''} onchange="toggleUserInteractionBypass(${index})">
                        </div>
                    </div>
                    <button class="btn btn-sm btn-outline-primary" onclick="editUser(${index})">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteUser(${index})">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    `).join('');
    
    // Mettre à jour les sélecteurs d'utilisateurs
    updateUserSelectors();
}

async function toggleUserEnabled(userId) {
    try {
        const checkbox = document.getElementById(`user-enabled-${userId}`);
        if (!checkbox) return;
        const enabled = checkbox.checked;

        const response = await fetch(`${API_BASE}/api/config/users/${userId}/enabled`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ enabled })
        });
        const result = await response.json();

        if (result.success) {
            currentUsers[userId] = result.user;
            showToast(`Utilisateur ${enabled ? 'activé' : 'désactivé'}`, 'success');
        } else {
            checkbox.checked = !enabled;
            showToast(result.error || 'Erreur lors du changement d’état', 'error');
        }
    } catch (error) {
        console.error('Erreur toggleUserEnabled:', error);
        showToast('Erreur lors du changement d’état utilisateur', 'error');
    }
}

async function toggleUserInteractionBypass(userId) {
    try {
        const checkbox = document.getElementById(`user-bypass-${userId}`);
        if (!checkbox) return;
        const interaction_bypass_antiloop = checkbox.checked;

        const response = await fetch(`${API_BASE}/api/config/users/${userId}/interaction-bypass`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ interaction_bypass_antiloop })
        });
        const result = await response.json();

        if (result.success) {
            currentUsers[userId] = result.user;
            showToast(`Bypass anti-boucle: ${interaction_bypass_antiloop ? 'ON' : 'OFF'}`, 'success');
        } else {
            checkbox.checked = !interaction_bypass_antiloop;
            showToast(result.error || 'Erreur lors du changement', 'error');
        }
    } catch (error) {
        console.error('Erreur toggleUserInteractionBypass:', error);
        showToast('Erreur lors du changement bypass', 'error');
    }
}

// Mettre à jour les sélecteurs d'utilisateurs dans l'interface
function updateUserSelectors() {
    console.log('Debug - updateUserSelectors called');
    console.log('Debug - currentUsers:', currentUsers);
    
    const selectors = [
        'custom-message-user',
        'chat-user-select'
    ];
    
    selectors.forEach(selectorId => {
        const selector = document.getElementById(selectorId);
        if (selector) {
            console.log(`Debug - Updating selector: ${selectorId}`);
            
            // Sauvegarder la sélection actuelle
            const currentValue = selector.value;
            console.log(`Debug - Current value: ${currentValue}`);
            
            // Vider le sélecteur avec une valeur par défaut différente
            selector.innerHTML = '<option value="-1">Sélectionner un utilisateur...</option>';
            
            // Ajouter les utilisateurs
            currentUsers.forEach((user, index) => {
                const option = document.createElement('option');
                option.value = index.toString(); // Convertir en chaîne
                option.textContent = `${user.tw_acc_pseudo} ${user.charactere}`;
                selector.appendChild(option);
                console.log(`Debug - Added option: value=${index.toString()}, text=${user.tw_acc_pseudo} ${user.charactere}`);
            });
            
            // Restaurer la sélection si elle était valide
            if (currentValue && currentValue !== '-1' && currentValue !== '0') {
                selector.value = currentValue;
                console.log(`Debug - Restored value: ${currentValue}`);
            }
        } else {
            console.log(`Debug - Selector not found: ${selectorId}`);
        }
    });
    
    console.log('Debug - Selectors updated');
}

// Ouvrir le modal pour ajouter un utilisateur
function openAddUserModal() {
    document.getElementById('userModalTitle').textContent = 'Ajouter un Utilisateur';
    document.getElementById('user-edit-id').value = '';
    document.getElementById('user-pseudo').value = '';
    document.getElementById('user-token').value = '';
    document.getElementById('user-charactere').value = '😊';
    
    // Ouvrir le modal
    const modal = new bootstrap.Modal(document.getElementById('addUserModal'));
    modal.show();
}

// Ouvrir le modal pour modifier un utilisateur
function editUser(userId) {
    const user = currentUsers[userId];
    if (!user) return;
    
    document.getElementById('userModalTitle').textContent = 'Modifier l\'Utilisateur';
    document.getElementById('user-edit-id').value = userId;
    document.getElementById('user-pseudo').value = user.tw_acc_pseudo;
    document.getElementById('user-token').value = user.tw_acc_token;
    document.getElementById('user-charactere').value = user.charactere;
    
    // Ouvrir le modal
    const modal = new bootstrap.Modal(document.getElementById('addUserModal'));
    modal.show();
}

// Sauvegarder un utilisateur (ajout ou modification)
async function saveUser() {
    const userId = document.getElementById('user-edit-id').value;
    const pseudo = document.getElementById('user-pseudo').value.trim();
    const token = document.getElementById('user-token').value.trim();
    const charactere = document.getElementById('user-charactere').value.trim();
    
    if (!pseudo || !token) {
        showToast('Pseudo et token requis', 'error');
        return;
    }
    
    try {
        const url = userId ? `${API_BASE}/api/config/users/${userId}` : `${API_BASE}/api/config/users`;
        const method = userId ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                tw_acc_pseudo: pseudo,
                tw_acc_token: token,
                charactere: charactere
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast(userId ? 'Utilisateur modifié' : 'Utilisateur ajouté', 'success');
            bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
            await loadUsers();
            updateUserSelectors(); // Mettre à jour les sélecteurs
        } else {
            showToast(result.error || 'Erreur lors de la sauvegarde', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de la sauvegarde', 'error');
    }
}

// Supprimer un utilisateur
async function deleteUser(userId) {
    if (!confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ?')) {
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE}/api/config/users/${userId}`, {
            method: 'DELETE'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showToast('Utilisateur supprimé', 'success');
            await loadUsers();
            updateUserSelectors(); // Mettre à jour les sélecteurs
        } else {
            showToast(result.error || 'Erreur lors de la suppression', 'error');
        }
    } catch (error) {
        console.error('Erreur:', error);
        showToast('Erreur lors de la suppression', 'error');
    }
} 

// Variables globales pour la génération automatique
let autoSubtitleRunning = false;

// Variables globales pour l'envoi automatique de messages
let autoMessageRunning = false;

// Écouteurs Socket.IO pour la génération automatique
socket.on('subtitle_processing_start', function(data) {
    console.log('Début de traitement:', data.file);
    showProcessingFile(data.file);
});

socket.on('subtitle_processing_complete', function(data) {
    console.log('Traitement terminé:', data.file);
    hideProcessingFile();
    showAlert(`Sous-titre créé pour ${data.file}: ${data.subtitle}`, 'success');
    loadSubtitles(); // Actualiser les sous-titres
});

socket.on('subtitle_processing_error', function(data) {
    console.log('Erreur de traitement:', data.file, data.error);
    hideProcessingFile();
    showAlert(`Erreur pour ${data.file}: ${data.error}`, 'danger');
});

// Écouteurs Socket.IO pour l'envoi automatique de messages
socket.on('message_sending_start', function(data) {
    console.log('Début d\'envoi de message:', data.message);
    showAlert(`Envoi en cours: ${data.message}`, 'info');
});

socket.on('message_sending_complete', function(data) {
    console.log('Message envoyé:', data.message);
    showAlert(`Message envoyé: ${data.message}`, 'success');
    loadGenerations(); // Actualiser les générations
});

socket.on('message_sending_error', function(data) {
    console.log('Erreur d\'envoi:', data.message, data.error);
    showAlert(`Erreur d'envoi: ${data.error}`, 'danger');
});

// Fonction pour activer/désactiver l'envoi automatique de messages
async function toggleAutoMessage() {
    const toggle = document.getElementById('autoMessageToggle');
    const statusElement = document.getElementById('autoMessageStatus');
    
    if (toggle.checked) {
        // Démarrer l'envoi automatique de messages
        try {
            const response = await fetch('/api/messages/auto/start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                autoMessageRunning = true;
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                showAlert('Envoi automatique de messages démarré', 'success');
            } else {
                toggle.checked = false;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = false;
            showAlert('Erreur lors du démarrage', 'danger');
        }
    } else {
        // Arrêter l'envoi automatique de messages
        try {
            const response = await fetch('/api/messages/auto/stop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                autoMessageRunning = false;
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                showAlert('Envoi automatique de messages arrêté', 'info');
            } else {
                toggle.checked = true;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = true;
            showAlert('Erreur lors de l\'arrêt', 'danger');
        }
    }
}

// Fonction pour vérifier le statut de l'envoi automatique de messages au chargement
async function checkAutoMessageStatus() {
    try {
        const response = await fetch('/api/messages/auto/status');
        const status = await response.json();
        
        const toggle = document.getElementById('autoMessageToggle');
        const statusElement = document.getElementById('autoMessageStatus');
        
        if (toggle && statusElement) {
            // Synchroniser l'état du toggle avec le serveur
            toggle.checked = status.running;
            autoMessageRunning = status.running;
            
            if (status.running) {
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                console.log('Envoi automatique de messages actif');
            } else {
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                console.log('Envoi automatique de messages arrêté');
            }
        }
    } catch (error) {
        console.error('Erreur lors de la vérification du statut:', error);
        // En cas d'erreur, forcer l'arrêt
        const toggle = document.getElementById('autoMessageToggle');
        const statusElement = document.getElementById('autoMessageStatus');
        if (toggle && statusElement) {
            toggle.checked = false;
            statusElement.textContent = 'Arrêté';
            statusElement.className = 'text-muted';
            autoMessageRunning = false;
        }
    }
}

// Fonction pour activer/désactiver la génération automatique
async function toggleAutoSubtitle() {
    const toggle = document.getElementById('autoSubtitleToggle');
    const statusElement = document.getElementById('autoSubtitleStatus');
    
    if (toggle.checked) {
        // Démarrer la génération automatique
        try {
            const response = await fetch('/api/subtitles/auto/start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                autoSubtitleRunning = true;
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                showAlert('Génération automatique démarrée', 'success');
            } else {
                toggle.checked = false;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = false;
            showAlert('Erreur lors du démarrage', 'danger');
        }
    } else {
        // Arrêter la génération automatique
        try {
            const response = await fetch('/api/subtitles/auto/stop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                autoSubtitleRunning = false;
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                hideProcessingFile();
                showAlert('Génération automatique arrêtée', 'info');
            } else {
                toggle.checked = true;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = true;
            showAlert('Erreur lors de l\'arrêt', 'danger');
        }
    }
}

// Fonction pour afficher le fichier en cours de traitement
function showProcessingFile(fileName) {
    const processingElement = document.getElementById('processing-file');
    const fileNameElement = document.getElementById('current-file-name');
    
    if (processingElement && fileNameElement) {
        fileNameElement.textContent = `Traitement de: ${fileName}`;
        processingElement.classList.remove('d-none');
    }
}

// Fonction pour masquer le fichier en cours de traitement
function hideProcessingFile() {
    const processingElement = document.getElementById('processing-file');
    
    if (processingElement) {
        processingElement.classList.add('d-none');
    }
}

// Fonction pour vérifier le statut de la génération automatique au chargement
async function checkAutoSubtitleStatus() {
    try {
        const response = await fetch('/api/subtitles/auto/status');
        const status = await response.json();
        
        const toggle = document.getElementById('autoSubtitleToggle');
        const statusElement = document.getElementById('autoSubtitleStatus');
        
        if (toggle && statusElement) {
            toggle.checked = status.running;
            autoSubtitleRunning = status.running;
            
            if (status.running) {
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                
                if (status.current_file) {
                    showProcessingFile(status.current_file);
                }
            } else {
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                hideProcessingFile();
            }
        }
    } catch (error) {
        console.error('Erreur lors de la vérification du statut:', error);
    }
} 

// Fonction pour forcer l'arrêt de l'envoi automatique
async function forceStopAutoMessage() {
    try {
        const response = await fetch('/api/messages/auto/force-stop', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Mettre à jour l'interface
            const toggle = document.getElementById('autoMessageToggle');
            const statusElement = document.getElementById('autoMessageStatus');
            
            if (toggle && statusElement) {
                autoMessageRunning = false;
                toggle.checked = false;
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
            }
            
            showAlert('Arrêt forcé de l\'envoi automatique de messages', 'warning');
        } else {
            showAlert('Erreur: ' + result.error, 'danger');
        }
    } catch (error) {
        console.error('Erreur lors de l\'arrêt forcé:', error);
        showAlert('Erreur lors de l\'arrêt forcé', 'danger');
    }
}

// Fonction pour forcer l'arrêt de la génération automatique de sous-titres
async function forceStopAutoSubtitle() {
    try {
        const response = await fetch('/api/subtitles/auto/force-stop', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Mettre à jour l'interface
            const toggle = document.getElementById('autoSubtitleToggle');
            const statusElement = document.getElementById('autoSubtitleStatus');
            
            if (toggle && statusElement) {
                autoSubtitleRunning = false;
                toggle.checked = false;
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                hideProcessingFile();
            }
            
            showAlert('Arrêt forcé de la génération automatique de sous-titres', 'warning');
        } else {
            showAlert('Erreur: ' + result.error, 'danger');
        }
    } catch (error) {
        console.error('Erreur lors de l\'arrêt forcé:', error);
        showAlert('Erreur lors de l\'arrêt forcé', 'danger');
    }
}

// Fonction pour activer/désactiver l'envoi de messages dans le chat
async function toggleChatMessage() {
    const toggle = document.getElementById('chatMessageToggle');
    const statusElement = document.getElementById('chatMessageStatus');
    
    if (toggle.checked) {
        // Activer l'envoi de messages
        try {
            const response = await fetch('/api/chat/messages/enable', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'Activé';
                statusElement.className = 'text-success';
                showAlert('Envoi de messages dans le chat activé', 'success');
            } else {
                toggle.checked = false;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = false;
            showAlert('Erreur lors de l\'activation', 'danger');
        }
    } else {
        // Désactiver l'envoi de messages
        try {
            const response = await fetch('/api/chat/messages/disable', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'Désactivé';
                statusElement.className = 'text-muted';
                showAlert('Envoi de messages dans le chat désactivé', 'info');
            } else {
                toggle.checked = true;
                showAlert('Erreur: ' + result.error, 'danger');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = true;
            showAlert('Erreur lors de la désactivation', 'danger');
        }
    }
}

// Fonction pour vérifier le statut de l'envoi de messages chat au chargement
async function checkChatMessageStatus() {
    try {
        const response = await fetch('/api/chat/messages/status');
        const status = await response.json();
        
        const toggle = document.getElementById('chatMessageToggle');
        const statusElement = document.getElementById('chatMessageStatus');
        
        if (toggle && statusElement) {
            toggle.checked = status.enabled;
            
            if (status.enabled) {
                statusElement.textContent = 'Activé';
                statusElement.className = 'text-success';
            } else {
                statusElement.textContent = 'Désactivé';
                statusElement.className = 'text-muted';
            }
        }
    } catch (error) {
        console.error('Erreur lors de la vérification du statut chat:', error);
        // En cas d'erreur, forcer la désactivation par défaut
        const toggle = document.getElementById('chatMessageToggle');
        const statusElement = document.getElementById('chatMessageStatus');
        if (toggle && statusElement) {
            toggle.checked = false;
            statusElement.textContent = 'Désactivé';
            statusElement.className = 'text-muted';
        }
    }
} 

// === GESTION DES COMPOSANTS SYSTÈME ===

// Fonction pour activer/désactiver le générateur IA
async function toggleIAGenerator() {
    const toggle = document.getElementById('iaGeneratorToggle');
    const statusElement = document.getElementById('iaGeneratorStatus');
    
    if (toggle.checked) {
        // Démarrer le générateur IA
        try {
            const response = await fetch('/api/ia-generator/start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                showToast('Générateur IA démarré', 'success');
            } else {
                toggle.checked = false;
                showToast('Erreur: ' + result.message, 'error');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = false;
            showToast('Erreur lors du démarrage du générateur IA', 'error');
        }
    } else {
        // Arrêter le générateur IA
        try {
            const response = await fetch('/api/ia-generator/stop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                showToast('Générateur IA arrêté', 'info');
            } else {
                toggle.checked = true;
                showToast('Erreur: ' + result.message, 'error');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = true;
            showToast('Erreur lors de l\'arrêt du générateur IA', 'error');
        }
    }
}

// Fonction pour activer/désactiver le contrôleur Twitch
async function toggleControlTwitch() {
    const toggle = document.getElementById('controlTwitchToggle');
    const statusElement = document.getElementById('controlTwitchStatus');
    
    if (toggle.checked) {
        // Démarrer le contrôleur Twitch
        try {
            const response = await fetch('/api/control-twitch/start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'En cours...';
                statusElement.className = 'text-success';
                showToast('Contrôleur Twitch démarré', 'success');
            } else {
                toggle.checked = false;
                showToast('Erreur: ' + result.message, 'error');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = false;
            showToast('Erreur lors du démarrage du contrôleur Twitch', 'error');
        }
    } else {
        // Arrêter le contrôleur Twitch
        try {
            const response = await fetch('/api/control-twitch/stop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
            
            const result = await response.json();
            
            if (result.success) {
                statusElement.textContent = 'Arrêté';
                statusElement.className = 'text-muted';
                showToast('Contrôleur Twitch arrêté', 'info');
            } else {
                toggle.checked = true;
                showToast('Erreur: ' + result.message, 'error');
            }
        } catch (error) {
            console.error('Erreur:', error);
            toggle.checked = true;
            showToast('Erreur lors de l\'arrêt du contrôleur Twitch', 'error');
        }
    }
}

// Fonction pour vérifier le statut système au chargement
async function checkSystemStatus() {
    try {
        const response = await fetch('/api/system-status');
        const status = await response.json();
        
        // Mettre à jour le statut du générateur IA
        const iaGeneratorToggle = document.getElementById('iaGeneratorToggle');
        const iaGeneratorStatus = document.getElementById('iaGeneratorStatus');
        
        if (iaGeneratorToggle && iaGeneratorStatus) {
            iaGeneratorToggle.checked = status.ia_generator.running;
            iaGeneratorStatus.textContent = status.ia_generator.status;
            iaGeneratorStatus.className = status.ia_generator.running ? 'text-success' : 'text-muted';
        }
        
        // Mettre à jour le statut du contrôleur Twitch
        const controlTwitchToggle = document.getElementById('controlTwitchToggle');
        const controlTwitchStatus = document.getElementById('controlTwitchStatus');
        
        if (controlTwitchToggle && controlTwitchStatus) {
            controlTwitchToggle.checked = status.control_twitch.running;
            controlTwitchStatus.textContent = status.control_twitch.status;
            controlTwitchStatus.className = status.control_twitch.running ? 'text-success' : 'text-muted';
        }
        
        console.log('Statut système chargé:', status);
    } catch (error) {
        console.error('Erreur lors de la vérification du statut système:', error);
    }
}