/**
 * Docker Section Management
 * Handles Docker hosts, containers, images, volumes, and alerts
 */

const dockerSection = {
    hosts: [],
    currentHostId: null,
    _initialized: false,
    stats: {
        total_hosts: 0,
        enabled_hosts: 0,
        total_containers: 0,
        running_containers: 0,
        total_images: 0,
        open_alerts: 0
    },

    async init() {
        await this.loadDockerHosts();
        await this.loadStats();
        this.setupEventListeners();
        this.setupWebSocket();
    },

    async ensureInit() {
        if (this._initialized) return;
        this._initialized = true;
        await this.init();
    },

    setupEventListeners() {
        // Search filter
        const searchInput = document.getElementById('docker-search');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                this.filterHosts(e.target.value);
            });
        }

        // Tab switching
        document.querySelectorAll('.docker-tab').forEach(tab => {
            tab.addEventListener('click', (e) => {
                const tabName = e.currentTarget.dataset.tab;
                this.switchTab(tabName);
            });
        });
    },

    setupWebSocket() {
        if (window.dashboard && window.dashboard.ws) {
            const originalOnMessage = window.dashboard.ws.onmessage;
            window.dashboard.ws.onmessage = (event) => {
                if (originalOnMessage) originalOnMessage(event);
                
                try {
                    const data = JSON.parse(event.data);
                    this.handleWebSocketMessage(data);
                } catch (e) {
                    console.error('Docker WS parse error:', e);
                }
            };
        }
    },

    handleWebSocketMessage(data) {
        switch (data.type) {
            case 'docker_host_updated':
                this.updateHostCard(data.host || data.data);
                break;
            case 'docker_alert_opened':
                this.showAlertNotification(data.data);
                this.updateAlertsBadge();
                break;
            case 'docker_alert_closed':
            case 'docker_alert_acknowledged':
                this.updateAlertsBadge();
                break;
        }
    },

    async fetchAPI(endpoint, options = {}) {
        const token = localStorage.getItem('accessToken');
        const apiKey = localStorage.getItem('apiKey');
        
        const headers = {
            'Content-Type': 'application/json',
            ...options.headers
        };
        
        if (token) {
            headers['Authorization'] = `Bearer ${token}`;
        } else if (apiKey) {
            headers['X-API-Key'] = apiKey;
        }
        
        const response = await fetch(`${window.location.origin}${endpoint}`, {
            ...options,
            headers
        });
        
        if (!response.ok) {
            // Handle 401 Unauthorized - redirect to login
            if (response.status === 401) {
                this.showToast('Session expirée, reconnexion requise', 'error');
                if (window.dashboard && typeof window.dashboard.logout === 'function') {
                    window.dashboard.logout();
                }
                return null;
            }
            throw new Error(`API Error: ${response.status}`);
        }
        
        return response.json();
    },

    async loadDockerHosts() {
        try {
            const response = await this.fetchAPI('/api/docker/hosts');
            this.hosts = response.hosts || [];
            this.renderHostsGrid();
        } catch (error) {
            console.error('Error loading Docker hosts:', error);
            this.renderError('Erreur lors du chargement des hosts Docker');
        }
    },

    async loadStats() {
        try {
            const stats = await this.fetchAPI('/api/docker/stats');
            this.stats = stats;
            this.updateStatsDisplay();
        } catch (error) {
            console.error('Error loading Docker stats:', error);
        }
    },

    updateStatsDisplay() {
        const el = (id, value) => {
            const elem = document.getElementById(id);
            if (elem) elem.textContent = value;
        };
        
        el('docker-stat-hosts', this.stats.enabled_hosts || 0);
        el('docker-stat-containers', this.stats.running_containers || 0);
        el('docker-stat-images', this.stats.total_images || 0);
        el('docker-stat-alerts', this.stats.open_alerts || 0);
        
        // Update alerts badge
        const badge = document.getElementById('docker-alerts-badge');
        if (badge) {
            if (this.stats.open_alerts > 0) {
                badge.textContent = this.stats.open_alerts;
                badge.classList.remove('hidden');
            } else {
                badge.classList.add('hidden');
            }
        }
    },

    renderHostsGrid() {
        const grid = document.getElementById('docker-hosts-grid');
        if (!grid) return;

        if (this.hosts.length === 0) {
            grid.innerHTML = `
                <div class="glass-card p-6 text-center col-span-full">
                    <i class="fab fa-docker text-4xl text-gray-600 mb-4"></i>
                    <p class="text-gray-400">Aucun host Docker configuré</p>
                    <p class="text-gray-500 text-sm mt-2">Activez Docker sur un host dans la section Hosts</p>
                </div>
            `;
            return;
        }

        grid.innerHTML = this.hosts.map(host => this.renderHostCard(host)).join('');
    },

    renderHostCard(host) {
        const statusColor = host.docker_status === 'online' ? 'green' : 
                           host.docker_status === 'offline' ? 'red' : 'yellow';
        const statusText = host.docker_status || 'unknown';
        
        const lastCollect = host.docker_last_collect_at 
            ? this.formatRelativeTime(host.docker_last_collect_at)
            : 'Jamais';

        return `
            <div class="glass-card p-4 cursor-pointer hover:border-purple-500/50 transition-all" 
                 data-host-id="${host.host_id}" onclick="dockerSection.viewDetails('${host.host_id}')">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold text-lg truncate">${host.host_name}</h3>
                    <span class="px-2 py-1 rounded-full text-xs font-medium bg-${statusColor}-500/20 text-${statusColor}-400">
                        ${statusText}
                    </span>
                </div>
                
                <div class="text-sm text-gray-400 mb-3">${host.host_ip}</div>
                
                <div class="grid grid-cols-2 gap-2 mb-3 text-sm">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-box text-blue-400"></i>
                        <span>${host.containers_running}/${host.containers_total} containers</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <i class="fas fa-layer-group text-purple-400"></i>
                        <span>${host.images_total} images</span>
                    </div>
                </div>
                
                ${host.open_alerts > 0 ? `
                    <div class="flex items-center gap-2 text-sm text-red-400 mb-3">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span>${host.open_alerts} alerte(s)</span>
                    </div>
                ` : ''}
                
                <div class="flex items-center justify-between text-xs text-gray-500">
                    <span><i class="fas fa-clock mr-1"></i>${lastCollect}</span>
                    ${host.docker_version ? `<span>v${host.docker_version}</span>` : ''}
                </div>
                
                <div class="flex gap-2 mt-3 pt-3 border-t border-gray-700">
                    <button onclick="event.stopPropagation(); dockerSection.collectNow('${host.host_id}')" 
                            class="flex-1 px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors">
                        <i class="fas fa-sync mr-1"></i>Collecter
                    </button>
                    <button onclick="event.stopPropagation(); dockerSection.toggleDockerEnabled('${host.host_id}', ${!host.docker_enabled})"
                            class="px-3 py-1.5 ${host.docker_enabled ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30' : 'bg-green-600/20 text-green-400 hover:bg-green-600/30'} rounded text-sm transition-colors">
                        <i class="fas fa-${host.docker_enabled ? 'pause' : 'play'}"></i>
                    </button>
                </div>
            </div>
        `;
    },

    filterHosts(query) {
        const cards = document.querySelectorAll('#docker-hosts-grid > div[data-host-id]');
        const lowerQuery = query.toLowerCase();
        
        cards.forEach(card => {
            const hostId = card.dataset.hostId;
            const host = this.hosts.find(h => h.host_id === hostId);
            if (host) {
                const matches = host.host_name.toLowerCase().includes(lowerQuery) ||
                               host.host_ip.toLowerCase().includes(lowerQuery);
                card.style.display = matches ? '' : 'none';
            }
        });
    },

    async viewDetails(hostId) {
        this.currentHostId = hostId;
        const host = this.hosts.find(h => h.host_id === hostId);
        
        if (!host) return;
        
        document.getElementById('docker-host-name').innerHTML = 
            `<i class="fab fa-docker mr-2 text-blue-400"></i>${host.host_name}`;
        
        // Show modal
        document.getElementById('docker-detail-modal').classList.remove('hidden');
        
        // Load containers by default
        this.switchTab('containers');
        await this.loadContainers(hostId);
    },

    closeModal() {
        document.getElementById('docker-detail-modal').classList.add('hidden');
        this.currentHostId = null;
    },

    switchTab(tabName) {
        // Update tab buttons
        document.querySelectorAll('.docker-tab').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.tab === tabName);
            tab.classList.toggle('text-gray-400', tab.dataset.tab !== tabName);
        });
        
        // Update tab content
        document.querySelectorAll('.docker-tab-content').forEach(content => {
            content.classList.toggle('hidden', !content.id.endsWith(tabName));
        });
        
        // Load content for the tab
        if (this.currentHostId) {
            switch (tabName) {
                case 'containers':
                    this.loadContainers(this.currentHostId);
                    break;
                case 'images':
                    this.loadImages(this.currentHostId);
                    break;
                case 'volumes':
                    this.loadVolumes(this.currentHostId);
                    break;
                case 'host-alerts':
                    this.loadHostAlerts(this.currentHostId);
                    break;
            }
        }
    },

    async loadContainers(hostId) {
        const container = document.getElementById('docker-containers-list');
        container.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        
        try {
            const response = await this.fetchAPI(`/api/docker/hosts/${hostId}/containers`);
            const containers = response.containers || [];
            
            if (containers.length === 0) {
                container.innerHTML = '<p class="text-gray-400 text-center py-4">Aucun container</p>';
                return;
            }
            
            container.innerHTML = containers.map(c => this.renderContainerRow(c, hostId)).join('');
        } catch (error) {
            container.innerHTML = `<p class="text-red-400 text-center py-4">Erreur: ${error.message}</p>`;
        }
    },

    renderContainerRow(c, hostId) {
        const stateColors = {
            running: 'green',
            exited: 'red',
            paused: 'yellow',
            created: 'blue',
            dead: 'red'
        };
        const stateColor = stateColors[c.state] || 'gray';
        
        const healthBadge = c.health ? `
            <span class="px-2 py-0.5 rounded text-xs bg-${c.health === 'healthy' ? 'green' : 'red'}-500/20 text-${c.health === 'healthy' ? 'green' : 'red'}-400">
                ${c.health}
            </span>
        ` : '';
        
        // Parse ports and create clickable links
        const portLinks = this.parsePortLinks(c.ports, hostId);

        return `
            <div class="bg-gray-800/50 rounded-lg p-3 flex items-center justify-between gap-4">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="w-2 h-2 rounded-full bg-${stateColor}-500"></span>
                        <span class="font-medium truncate">${c.name}</span>
                        ${c.compose_project ? `<span class="px-2 py-0.5 rounded text-xs bg-purple-500/20 text-purple-400">${c.compose_project}</span>` : ''}
                        ${healthBadge}
                        ${portLinks}
                    </div>
                    <div class="text-sm text-gray-400 truncate mt-1">${c.image}</div>
                    <div class="text-xs text-gray-500 mt-1">${c.status || c.state}</div>
                </div>
                
                <div class="flex items-center gap-1">
                    ${c.state !== 'running' ? `
                        <button onclick="dockerSection.startContainer('${hostId}', '${c.container_id}')" 
                                class="p-2 hover:bg-gray-700 rounded transition-colors text-green-400" title="Démarrer">
                            <i class="fas fa-play"></i>
                        </button>
                    ` : `
                        <button onclick="dockerSection.stopContainer('${hostId}', '${c.container_id}')"
                                class="p-2 hover:bg-gray-700 rounded transition-colors text-red-400" title="Arrêter">
                            <i class="fas fa-stop"></i>
                        </button>
                    `}
                    <button onclick="dockerSection.restartContainer('${hostId}', '${c.container_id}')"
                            class="p-2 hover:bg-gray-700 rounded transition-colors text-yellow-400" title="Redémarrer">
                        <i class="fas fa-redo"></i>
                    </button>
                    <button onclick="dockerSection.showLogs('${hostId}', '${c.container_id}', '${c.name}')"
                            class="p-2 hover:bg-gray-700 rounded transition-colors text-blue-400" title="Logs">
                        <i class="fas fa-file-alt"></i>
                    </button>
                    <button onclick="dockerSection.showInspect('${hostId}', '${c.container_id}', '${c.name}')"
                            class="p-2 hover:bg-gray-700 rounded transition-colors text-cyan-400" title="Inspect">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        `;
    },

    parsePortLinks(ports, hostId) {
        if (!ports) return '';
        
        // Get host IP for building URLs
        const host = this.hosts.find(h => h.host_id === hostId);
        const hostIp = host ? host.host_ip : 'localhost';
        
        // Parse ports from the raw string or object
        const portStr = ports.raw || (typeof ports === 'string' ? ports : '');
        if (!portStr) return '';
        
        // Extract port mappings like "0.0.0.0:8080->80/tcp" or "8080/tcp"
        const portRegex = /(?:([\d.]+):)?(\d+)->\d+\/tcp/g;
        const links = [];
        let match;
        
        while ((match = portRegex.exec(portStr)) !== null) {
            const bindIp = match[1] || '0.0.0.0';
            const hostPort = match[2];
            
            // Skip if bound to 127.0.0.1 only (not accessible externally)
            if (bindIp === '127.0.0.1') continue;
            
            // Determine protocol (https for common secure ports)
            const protocol = ['443', '8443', '9443'].includes(hostPort) ? 'https' : 'http';
            const url = `${protocol}://${hostIp}:${hostPort}`;
            
            links.push(`
                <a href="${url}" target="_blank" rel="noopener noreferrer" 
                   onclick="event.stopPropagation()" 
                   class="px-2 py-0.5 rounded text-xs bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 transition-colors"
                   title="Ouvrir ${url}">
                    <i class="fas fa-external-link-alt mr-1"></i>${hostPort}
                </a>
            `);
        }
        
        return links.join('');
    },

    async loadImages(hostId) {
        const container = document.getElementById('docker-images-list');
        container.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        
        try {
            const response = await this.fetchAPI(`/api/docker/hosts/${hostId}/images`);
            if (!response) return; // 401 handled
            
            const images = response.images || [];
            
            if (images.length === 0) {
                container.innerHTML = '<p class="text-gray-400 text-center py-4">Aucune image</p>';
                return;
            }
            
            // Show unused count if any
            const unusedInfo = response.unused_count > 0 
                ? `<div class="text-sm text-yellow-400 mb-3"><i class="fas fa-info-circle mr-1"></i>${response.unused_count} image(s) non utilisée(s)</div>`
                : '';
            
            container.innerHTML = unusedInfo + images.map(img => {
                const unusedBadge = !img.in_use 
                    ? `<span class="px-2 py-0.5 rounded text-xs bg-yellow-500/20 text-yellow-400 cursor-help" title="Cette image n'est utilisée par aucun container">Unused</span>`
                    : '';
                
                return `
                    <div class="bg-gray-800/50 rounded-lg p-3 flex items-center justify-between gap-4">
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="font-medium">${img.repo_tags?.[0] || img.image_id.substring(0, 12)}</span>
                                ${unusedBadge}
                            </div>
                            <div class="text-sm text-gray-400 mt-1">
                                <span class="mr-4"><i class="fas fa-hdd mr-1"></i>${this.formatBytes(img.size)}</span>
                                <span><i class="fas fa-clock mr-1"></i>${this.formatRelativeTime(img.created)}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-1">
                            <button onclick="dockerSection.removeImage('${hostId}', '${img.image_id}', ${!img.in_use})"
                                    class="p-2 hover:bg-gray-700 rounded transition-colors ${img.in_use ? 'text-gray-500' : 'text-red-400'}" 
                                    title="${img.in_use ? 'Supprimer (forcé car en cours d\'utilisation)' : 'Supprimer l\'image'}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            container.innerHTML = `<p class="text-red-400 text-center py-4">Erreur: ${error.message}</p>`;
        }
    },

    async loadVolumes(hostId) {
        const container = document.getElementById('docker-volumes-list');
        container.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        
        try {
            const response = await this.fetchAPI(`/api/docker/hosts/${hostId}/volumes`);
            const volumes = response.volumes || [];
            
            if (volumes.length === 0) {
                container.innerHTML = '<p class="text-gray-400 text-center py-4">Aucun volume</p>';
                return;
            }
            
            container.innerHTML = volumes.map(vol => `
                <div class="bg-gray-800/50 rounded-lg p-3">
                    <div class="font-medium">${vol.name}</div>
                    <div class="text-sm text-gray-400 mt-1">
                        <span class="mr-4"><i class="fas fa-cog mr-1"></i>${vol.driver}</span>
                        <span class="truncate"><i class="fas fa-folder mr-1"></i>${vol.mountpoint}</span>
                    </div>
                </div>
            `).join('');
        } catch (error) {
            container.innerHTML = `<p class="text-red-400 text-center py-4">Erreur: ${error.message}</p>`;
        }
    },

    async loadHostAlerts(hostId) {
        const container = document.getElementById('docker-host-alerts-list');
        container.innerHTML = '<div class="loading-spinner mx-auto"></div>';
        
        try {
            const response = await this.fetchAPI(`/api/docker/alerts?host_id=${hostId}`);
            const alerts = response.alerts || [];
            
            if (alerts.length === 0) {
                container.innerHTML = '<p class="text-gray-400 text-center py-4">Aucune alerte</p>';
                return;
            }
            
            container.innerHTML = alerts.map(alert => this.renderAlertRow(alert)).join('');
        } catch (error) {
            container.innerHTML = `<p class="text-red-400 text-center py-4">Erreur: ${error.message}</p>`;
        }
    },

    renderAlertRow(alert) {
        const severityColors = {
            warning: 'yellow',
            error: 'red',
            critical: 'red'
        };
        const color = severityColors[alert.severity] || 'gray';
        
        return `
            <div class="bg-gray-800/50 rounded-lg p-3 border-l-4 border-${color}-500">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-${color}-400"></i>
                        <span class="font-medium">${alert.container_name}</span>
                        <span class="px-2 py-0.5 rounded text-xs bg-${color}-500/20 text-${color}-400">${alert.severity}</span>
                    </div>
                    ${alert.state === 'open' ? `
                        <button onclick="dockerSection.acknowledgeAlert(${alert.id})"
                                class="px-2 py-1 text-xs bg-gray-700 hover:bg-gray-600 rounded transition-colors">
                            Acquitter
                        </button>
                    ` : `
                        <span class="text-xs text-gray-500">${alert.state}</span>
                    `}
                </div>
                <div class="text-sm text-gray-400 mt-2">${alert.message}</div>
                <div class="text-xs text-gray-500 mt-1">${this.formatRelativeTime(alert.opened_at)}</div>
            </div>
        `;
    },

    // Container Actions
    async startContainer(hostId, containerId) {
        await this.executeAction(hostId, containerId, 'start');
    },

    async stopContainer(hostId, containerId) {
        await this.executeAction(hostId, containerId, 'stop');
    },

    async restartContainer(hostId, containerId) {
        await this.executeAction(hostId, containerId, 'restart');
    },

    async executeAction(hostId, containerId, action) {
        try {
            const response = await this.fetchAPI(`/api/docker/containers/${hostId}/${containerId}/${action}`, {
                method: 'POST'
            });
            
            if (response.success) {
                this.showToast(`Container ${action} successful`, 'success');
                // Refresh containers list
                setTimeout(() => this.loadContainers(hostId), 1000);
            } else {
                this.showToast(`Failed: ${response.error || response.message}`, 'error');
            }
        } catch (error) {
            this.showToast(`Error: ${error.message}`, 'error');
        }
    },

    async showLogs(hostId, containerId, containerName) {
        document.getElementById('docker-logs-title').innerHTML = 
            `<i class="fas fa-file-alt mr-2 text-green-400"></i>${containerName} - Logs`;
        document.getElementById('docker-logs-content').textContent = 'Chargement des logs...';
        document.getElementById('docker-logs-modal').classList.remove('hidden');
        
        try {
            const response = await this.fetchAPI(`/api/docker/containers/${hostId}/${containerId}/logs?tail=500`);
            document.getElementById('docker-logs-content').textContent = response.logs || 'Aucun log disponible';
        } catch (error) {
            document.getElementById('docker-logs-content').textContent = `Erreur: ${error.message}`;
        }
    },

    closeLogsModal() {
        document.getElementById('docker-logs-modal').classList.add('hidden');
    },

    async showInspect(hostId, containerId, containerName) {
        document.getElementById('docker-logs-title').innerHTML = 
            `<i class="fas fa-search mr-2 text-cyan-400"></i>${containerName} - Inspect`;
        document.getElementById('docker-logs-content').textContent = 'Chargement des informations...';
        document.getElementById('docker-logs-modal').classList.remove('hidden');
        
        try {
            const response = await this.fetchAPI(`/api/docker/containers/${hostId}/${containerId}/inspect`);
            if (!response) return; // 401 handled
            
            // Format JSON nicely
            const inspectData = response.inspect_data || {};
            document.getElementById('docker-logs-content').textContent = 
                JSON.stringify(inspectData, null, 2);
        } catch (error) {
            document.getElementById('docker-logs-content').textContent = `Erreur: ${error.message}`;
        }
    },

    async removeImage(hostId, imageId, canDeleteDirectly = false) {
        const force = !canDeleteDirectly;
        const confirmMsg = force 
            ? 'Cette image est utilisée par un ou plusieurs containers. Voulez-vous forcer la suppression ?'
            : 'Voulez-vous supprimer cette image ?';
        
        if (!confirm(confirmMsg)) return;
        
        try {
            const response = await this.fetchAPI(`/api/docker/images/${hostId}/${imageId}?force=${force}`, {
                method: 'DELETE'
            });
            
            if (!response) return; // 401 handled
            
            if (response.success) {
                this.showToast('Image supprimée avec succès', 'success');
                // Refresh images list
                await this.loadImages(hostId);
            } else {
                this.showToast(`Erreur: ${response.error || response.message}`, 'error');
            }
        } catch (error) {
            this.showToast(`Erreur: ${error.message}`, 'error');
        }
    },

    async collectNow(hostId) {
        try {
            this.showToast('Collection en cours...', 'info');
            const response = await this.fetchAPI(`/api/docker/hosts/${hostId}/collect`, {
                method: 'POST'
            });
            
            if (response.success) {
                this.showToast(`Collection terminée: ${response.containers_count} containers`, 'success');
                await this.loadDockerHosts();
                await this.loadStats();
            } else {
                this.showToast(`Erreur: ${response.error}`, 'error');
            }
        } catch (error) {
            this.showToast(`Erreur: ${error.message}`, 'error');
        }
    },

    async collectAll() {
        try {
            this.showToast('Collection de tous les hosts...', 'info');
            const response = await this.fetchAPI('/api/docker/collect-all', {
                method: 'POST'
            });
            
            this.showToast(`Collecte terminée: ${response.successful}/${response.total_hosts} hosts`, 
                          response.failed > 0 ? 'warning' : 'success');
            await this.loadDockerHosts();
            await this.loadStats();
        } catch (error) {
            this.showToast(`Erreur: ${error.message}`, 'error');
        }
    },

    async toggleDockerEnabled(hostId, enabled) {
        try {
            await this.fetchAPI(`/api/docker/hosts/${hostId}/enable`, {
                method: 'POST',
                body: JSON.stringify({ enabled })
            });
            
            this.showToast(`Docker monitoring ${enabled ? 'activé' : 'désactivé'}`, 'success');
            await this.loadDockerHosts();
            await this.loadStats();
        } catch (error) {
            this.showToast(`Erreur: ${error.message}`, 'error');
        }
    },

    async acknowledgeAlert(alertId) {
        try {
            await this.fetchAPI(`/api/docker/alerts/${alertId}/acknowledge`, {
                method: 'POST'
            });
            
            this.showToast('Alerte acquittée', 'success');
            if (this.currentHostId) {
                await this.loadHostAlerts(this.currentHostId);
            }
            await this.loadStats();
        } catch (error) {
            this.showToast(`Erreur: ${error.message}`, 'error');
        }
    },

    showAlerts() {
        // Navigate to alerts tab in modal or show alerts modal
        if (this.currentHostId) {
            this.switchTab('host-alerts');
        }
    },

    updateHostCard(hostData) {
        const card = document.querySelector(`[data-host-id="${hostData.host_id}"]`);
        if (card) {
            card.outerHTML = this.renderHostCard(hostData);
        }
    },

    async updateAlertsBadge() {
        await this.loadStats();
    },

    showAlertNotification(alert) {
        this.showToast(`Alerte Docker: ${alert.container_name} - ${alert.message}`, 'warning');
    },

    renderError(message) {
        const grid = document.getElementById('docker-hosts-grid');
        if (grid) {
            grid.innerHTML = `
                <div class="glass-card p-6 text-center col-span-full">
                    <i class="fas fa-exclamation-circle text-4xl text-red-500 mb-4"></i>
                    <p class="text-red-400">${message}</p>
                </div>
            `;
        }
    },

    showToast(message, type = 'info') {
        // Use existing toast system or create simple one
        if (window.dashboard && window.dashboard.showToast) {
            window.dashboard.showToast(message, type);
        } else {
            console.log(`[${type.toUpperCase()}] ${message}`);
        }
    },

    formatRelativeTime(dateStr) {
        if (!dateStr) return 'N/A';
        
        const date = new Date(dateStr);
        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMins / 60);
        const diffDays = Math.floor(diffHours / 24);
        
        if (diffMins < 1) return 'À l\'instant';
        if (diffMins < 60) return `Il y a ${diffMins}min`;
        if (diffHours < 24) return `Il y a ${diffHours}h`;
        return `Il y a ${diffDays}j`;
    },

    formatBytes(bytes) {
        if (!bytes) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    }
};

function setupDockerAutoInit() {
    // Initialize when Docker page is shown
    const dockerPage = document.getElementById('page-docker');
    if (!dockerPage) return;

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (
                mutation.target.id === 'page-docker' &&
                mutation.target.classList.contains('active')
            ) {
                dockerSection.ensureInit();
            }
        });
    });

    observer.observe(dockerPage, { attributes: true, attributeFilter: ['class'] });

    // Also initialize if already on Docker page
    if (dockerPage.classList.contains('active')) {
        dockerSection.ensureInit();
    }
}

// If this script is loaded after DOMContentLoaded (common when injected late),
// a DOMContentLoaded listener would never fire. Handle both cases.
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupDockerAutoInit);
} else {
    setupDockerAutoInit();
}