// Monitoring View Component
class MonitoringViewComponent extends Component {
    constructor(container, viewModel, eventBus) {
        super(container, viewModel, eventBus);
        
        logger.debug('MonitoringViewComponent: Constructor called');
        logger.debug('MonitoringViewComponent: Container:', container);
        logger.debug('MonitoringViewComponent: Container ID:', container?.id);
        
        // Track if we've already loaded data to prevent unnecessary reloads
        this.dataLoaded = false;
        
        // Drawer state for desktop (shared singleton)
        this.drawer = new DrawerComponent();
    }

    mount() {
        logger.debug('MonitoringViewComponent: Mounting...');
        super.mount();
        
        // Set up refresh button event listener
        this.setupRefreshButton();
        
        // Only load data if we haven't already or if the view model is empty
        const clusterMembers = this.viewModel.get('clusterMembers');
        if (!this.dataLoaded || !clusterMembers || clusterMembers.length === 0) {
            this.loadData();
        }
        
        // Subscribe to view model changes
        this.setupSubscriptions();
    }

    setupRefreshButton() {
        const refreshBtn = this.findElement('#refresh-monitoring-btn');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', () => {
                this.refreshData();
            });
        }
    }

    setupSubscriptions() {
        // Subscribe to cluster members changes
        this.viewModel.subscribe('clusterMembers', () => {
            this.render();
        });
        
        // Subscribe to node resources changes
        this.viewModel.subscribe('nodeResources', () => {
            this.render();
        });
        
        // Subscribe to cluster summary changes
        this.viewModel.subscribe('clusterSummary', () => {
            this.render();
        });
        
        // Subscribe to loading state changes
        this.viewModel.subscribe('isLoading', () => {
            this.render();
        });
        
        // Subscribe to error changes
        this.viewModel.subscribe('error', () => {
            this.render();
        });
    }

    async loadData() {
        logger.debug('MonitoringViewComponent: Loading data...');
        this.dataLoaded = true;
        await this.viewModel.loadClusterData();
    }

    async refreshData() {
        logger.debug('MonitoringViewComponent: Refreshing data...');
        await this.viewModel.refresh();
    }

    // Determine if we should use desktop drawer behavior
    isDesktop() {
        return this.drawer.isDesktop();
    }

    // Open drawer for a specific node
    openDrawerForNode(nodeData) {
        const { ip, hostname } = nodeData;
        
        // Get display name for drawer title
        let displayName = ip;
        if (hostname && ip) {
            displayName = `${hostname} - ${ip}`;
        } else if (hostname) {
            displayName = hostname;
        } else if (ip) {
            displayName = ip;
        }

        // Open drawer with content callback
        this.drawer.openDrawer(displayName, (contentContainer, setActiveComponent) => {
            // Load and mount NodeDetails into drawer
            const nodeDetailsVM = new NodeDetailsViewModel();
            const nodeDetailsComponent = new NodeDetailsComponent(contentContainer, nodeDetailsVM, this.eventBus);
            setActiveComponent(nodeDetailsComponent);

            nodeDetailsVM.loadNodeDetails(ip).then(() => {
                nodeDetailsComponent.mount();
            }).catch((error) => {
                logger.error('Failed to load node details for drawer:', error);
                contentContainer.innerHTML = `
                    <div class="error">
                        <strong>Error loading node details:</strong><br>
                        ${this.escapeHtml(error.message)}
                    </div>
                `;
            });
        });
    }

    closeDrawer() {
        this.drawer.closeDrawer();
    }

    // Get color class based on utilization percentage (same logic as gauges)
    getUtilizationColorClass(percentage) {
        const numPercentage = parseFloat(percentage);
        
        if (numPercentage === 0 || isNaN(numPercentage)) return 'utilization-empty';
        if (numPercentage < 50) return 'utilization-green';
        if (numPercentage < 80) return 'utilization-yellow';
        return 'utilization-red';
    }

    // Format lastSeen timestamp to human readable format
    formatLastSeen(lastSeen) {
        if (!lastSeen) return 'Unknown';
        
        // lastSeen appears to be in milliseconds
        const now = Date.now();
        const diff = now - lastSeen;
        
        if (diff < 60000) { // Less than 1 minute
            return 'Just now';
        } else if (diff < 3600000) { // Less than 1 hour
            const minutes = Math.floor(diff / 60000);
            return `${minutes}m ago`;
        } else if (diff < 86400000) { // Less than 1 day
            const hours = Math.floor(diff / 3600000);
            const minutes = Math.floor((diff % 3600000) / 60000);
            return `${hours}h ${minutes}m ago`;
        } else { // More than 1 day
            const days = Math.floor(diff / 86400000);
            const hours = Math.floor((diff % 86400000) / 3600000);
            return `${days}d ${hours}h ago`;
        }
    }

    // Format flash size in human readable format
    formatFlashSize(bytes) {
        if (!bytes || bytes === 0) return 'Unknown';
        
        const units = ['B', 'KB', 'MB', 'GB'];
        let size = bytes;
        let unitIndex = 0;
        
        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }
        
        return `${size.toFixed(1)} ${units[unitIndex]}`;
    }

    // Clean up resources
    cleanup() {
        if (this.drawer) {
            this.drawer.cleanup();
        }
        super.cleanup();
    }

    // Setup click event listeners for node cards
    setupNodeCardClickListeners(container) {
        const nodeCards = container.querySelectorAll('.node-card');
        nodeCards.forEach(card => {
            const nodeIp = card.dataset.nodeIp;
            if (nodeIp) {
                // Find the node data
                const nodeResources = this.viewModel.get('nodeResources');
                const nodeData = nodeResources.get(nodeIp);
                
                if (nodeData) {
                    this.addEventListener(card, 'click', (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        this.openDrawerForNode(nodeData);
                    });
                    
                    // Add hover cursor style
                    card.style.cursor = 'pointer';
                }
            }
        });
    }

    render() {
        logger.debug('MonitoringViewComponent: Rendering...');
        
        const isLoading = this.viewModel.get('isLoading');
        const error = this.viewModel.get('error');
        const clusterSummary = this.viewModel.get('clusterSummary');
        const nodeResources = this.viewModel.get('nodeResources');
        const lastUpdated = this.viewModel.get('lastUpdated');
        
        // Render cluster summary
        this.renderClusterSummary(isLoading, error, clusterSummary, lastUpdated);
        
        // Render nodes monitoring
        this.renderNodesMonitoring(isLoading, error, nodeResources);
    }

    renderClusterSummary(isLoading, error, clusterSummary, lastUpdated) {
        const container = this.findElement('#cluster-summary');
        if (!container) return;
        
        if (isLoading) {
            container.innerHTML = `
                <div class="loading">
                    <div>Loading cluster resource summary...</div>
                </div>
            `;
            return;
        }
        
        if (error) {
            container.innerHTML = `
                <div class="error">
                    <div>${window.icon('error', { width: 14, height: 14, class: 'icon' })} Error: ${this.escapeHtml(String(error))}</div>
                </div>
            `;
            return;
        }
        
        const cpuUtilization = this.viewModel.getResourceUtilization('Cpu');
        const memoryUtilization = this.viewModel.getResourceUtilization('Memory');
        const storageUtilization = this.viewModel.getResourceUtilization('Storage');
        
        const lastUpdatedText = lastUpdated ? 
            `Last updated: ${lastUpdated.toLocaleTimeString()}` : 
            'Never updated';
        
        container.innerHTML = `
            <div class="cluster-summary-content">
                <div class="summary-header">
                    <h3>Summary</h3>
                    <div class="last-updated">${lastUpdatedText}</div>
                </div>
                
                <div class="summary-stats">
                    <div class="stat-card">
                        <div class="stat-icon">${window.icon('computer', { width: 18, height: 18 })}</div>
                        <div class="stat-content">
                            <div class="stat-label">Total Nodes</div>
                            <div class="stat-value">${clusterSummary.totalNodes}</div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon">${window.icon('cpu', { width: 18, height: 18 })}</div>
                        <div class="stat-content">
                            <div class="stat-label">CPU</div>
                            <div class="stat-value">${Math.round(clusterSummary.totalCpu - clusterSummary.availableCpu)}MHz / ${Math.round(clusterSummary.totalCpu)}MHz</div>
                            <div class="stat-utilization">
                                <div class="utilization-bar">
                                    <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
                                </div>
                                <span class="utilization-text">${cpuUtilization}% used</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon">${window.icon('memory', { width: 18, height: 18 })}</div>
                        <div class="stat-content">
                            <div class="stat-label">Memory</div>
                            <div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalMemory - clusterSummary.availableMemory, 'memory')} / ${this.viewModel.formatResourceValue(clusterSummary.totalMemory, 'memory')}</div>
                            <div class="stat-utilization">
                                <div class="utilization-bar">
                                    <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
                                </div>
                                <span class="utilization-text">${memoryUtilization}% used</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-icon">${window.icon('storage', { width: 18, height: 18 })}</div>
                        <div class="stat-content">
                            <div class="stat-label">Storage</div>
                            <div class="stat-value">${this.viewModel.formatResourceValue(clusterSummary.totalStorage - clusterSummary.availableStorage, 'storage')} / ${this.viewModel.formatResourceValue(clusterSummary.totalStorage, 'storage')}</div>
                            <div class="stat-utilization">
                                <div class="utilization-bar">
                                    <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
                                </div>
                                <span class="utilization-text">${storageUtilization}% used</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    renderNodesMonitoring(isLoading, error, nodeResources) {
        const container = this.findElement('#nodes-monitoring');
        if (!container) return;
        
        if (isLoading) {
            container.innerHTML = `
                <div class="loading">
                    <div>Loading node resource data...</div>
                </div>
            `;
            return;
        }
        
        if (error) {
            container.innerHTML = `
                <div class="error">
                    <div>${window.icon('error', { width: 14, height: 14, class: 'icon' })} Error: ${this.escapeHtml(String(error))}</div>
                </div>
            `;
            return;
        }
        
        if (!nodeResources || nodeResources.size === 0) {
            container.innerHTML = `
                <div class="no-data">
                    <div>No node resource data available</div>
                </div>
            `;
            return;
        }
        
        const nodesHtml = Array.from(nodeResources.values())
            .sort((a, b) => {
                // Sort by hostname, fallback to IP if hostname is not available
                const hostnameA = a.hostname || a.ip || '';
                const hostnameB = b.hostname || b.ip || '';
                return hostnameA.localeCompare(hostnameB);
            })
            .map(nodeData => {
                return this.renderNodeCard(nodeData);
            }).join('');
        
        const nodeCount = nodeResources.size;
        container.innerHTML = `
            <div class="nodes-monitoring-content">
                <h3>${window.icon('computer', { width: 16, height: 16, class: 'icon', strokeWidth: 2 })} Node Resource Details</h3>
                <div class="nodes-grid" data-item-count="${nodeCount}">
                    ${nodesHtml}
                </div>
            </div>
        `;
        
        // Add click event listeners to node cards
        this.setupNodeCardClickListeners(container);
    }

    renderNodeCard(nodeData) {
        const { ip, hostname, resources, hasResources, error, resourceSource, labels } = nodeData;
        
        
        if (!hasResources) {
            return `
                <div class="node-card error" data-node-ip="${ip}">
                    <div class="node-header">
                        <div class="status-hostname-group">
                            <div class="node-status-indicator status-offline">
                                ${window.icon('dotRed', { width: 12, height: 12 })}
                            </div>
                            <div class="node-title">${hostname || ip}</div>
                        </div>
                        <div class="node-ip">${ip}</div>
                    </div>
                    
                    ${labels && Object.keys(labels).length > 0 ? `
                    <div class="node-labels">
                        <div class="labels-container">
                            ${Object.entries(labels).map(([key, value]) => 
                                `<span class="label-chip">${key}: ${value}</span>`
                            ).join('')}
                        </div>
                        <div class="labels-divider"></div>
                    </div>
                    ` : ''}
                    
                    <div class="node-error">
                        <div class="error-label">${window.icon('warning', { width: 14, height: 14 })} Error</div>
                        <div class="error-message">${error || 'Monitoring endpoint not available'}</div>
                    </div>
                    ${nodeData.lastSeen ? `
                    <div class="node-uptime">
                        <div class="uptime-label">${window.icon('timer', { width: 14, height: 14 })} Last Seen</div>
                        <div class="uptime-value">${this.formatLastSeen(nodeData.lastSeen)}</div>
                    </div>
                    ` : ''}
                </div>
            `;
        }
        
        // Extract resource data (handle both monitoring API and basic data formats)
        const cpu = resources?.cpu || {};
        const memory = resources?.memory || {};
        const storage = resources?.filesystem || resources?.storage || {};
        const system = resources?.system || {};
        
        let cpuTotal, cpuAvailable, cpuUsed, cpuUtilization;
        let memoryTotal, memoryAvailable, memoryUsed, memoryUtilization;
        let storageTotal, storageAvailable, storageUsed, storageUtilization;
        
        if (resourceSource === 'monitoring') {
            // Real monitoring API format
            const cpuFreqMHz = nodeData.basic?.cpuFreqMHz || 80; // Get CPU frequency from basic resources
            cpuTotal = cpuFreqMHz; // Total CPU frequency in MHz
            cpuAvailable = cpuFreqMHz * (100 - (cpu.average_usage || 0)) / 100; // Available frequency
            cpuUsed = cpuFreqMHz * (cpu.average_usage || 0) / 100; // Used frequency
            cpuUtilization = Math.round(cpu.average_usage || 0);
            
            memoryTotal = memory.total_heap || 0;
            memoryAvailable = memory.free_heap || 0;
            memoryUsed = memoryTotal - memoryAvailable;
            memoryUtilization = memoryTotal > 0 ? Math.round((memoryUsed / memoryTotal) * 100) : 0;
            
            storageTotal = storage.total_bytes || 0;
            storageAvailable = storage.free_bytes || 0;
            storageUsed = storageTotal - storageAvailable;
            storageUtilization = storageTotal > 0 ? Math.round((storageUsed / storageTotal) * 100) : 0;
        } else {
            // Basic data format - use CPU frequency from basic resources
            const cpuFreqMHz = nodeData.basic?.cpuFreqMHz || 80;
            cpuTotal = cpuFreqMHz; // Total CPU frequency in MHz
            cpuAvailable = cpuFreqMHz * (cpu.available || 0.8); // Available frequency
            cpuUsed = cpuFreqMHz * (cpu.used || 0.2); // Used frequency
            cpuUtilization = cpuTotal > 0 ? Math.round((cpuUsed / cpuTotal) * 100) : 0;
            
            memoryTotal = memory.total || 0;
            memoryAvailable = memory.available || memory.free || 0;
            memoryUsed = memoryTotal - memoryAvailable;
            memoryUtilization = memoryTotal > 0 ? Math.round((memoryUsed / memoryTotal) * 100) : 0;
            
            storageTotal = storage.total || 0;
            storageAvailable = storage.available || storage.free || 0;
            storageUsed = storageTotal - storageAvailable;
            storageUtilization = storageTotal > 0 ? Math.round((storageUsed / storageTotal) * 100) : 0;
        }
        
        // Determine status indicator based on resource source
        const statusIcon = resourceSource === 'monitoring' ? window.icon('dotGreen', { width: 12, height: 12 }) : 
                          resourceSource === 'basic' ? window.icon('dotYellow', { width: 12, height: 12 }) : window.icon('dotRed', { width: 12, height: 12 });
        const statusClass = resourceSource === 'monitoring' ? 'status-online' : 
                           resourceSource === 'basic' ? 'status-warning' : 'status-offline';
        
        return `
            <div class="node-card" data-node-ip="${ip}">
                <div class="node-header">
                    <div class="status-hostname-group">
                        <div class="node-status-indicator ${statusClass}">
                            ${statusIcon}
                        </div>
                        <div class="node-title">${hostname || ip}</div>
                    </div>
                    <div class="node-ip">${ip}</div>
                </div>
                
                ${labels && Object.keys(labels).length > 0 ? `
                <div class="node-labels">
                    <div class="labels-container">
                        ${Object.entries(labels).map(([key, value]) => 
                            `<span class="label-chip">${key}: ${value}</span>`
                        ).join('')}
                    </div>
                    <div class="labels-divider"></div>
                </div>
                ` : ''}
                
                ${system.uptime_formatted ? `
                <div class="node-uptime">
                    <div class="uptime-label">${window.icon('timer', { width: 14, height: 14 })} Uptime</div>
                    <div class="uptime-value">${system.uptime_formatted}</div>
                </div>
                ` : ''}
                
                <div class="node-latency">
                    <div class="latency-label">${window.icon('latency', { width: 14, height: 14 })} Latency</div>
                    <div class="latency-value">${nodeData.latency ? `${nodeData.latency}ms` : 'N/A'}</div>
                </div>
                <div class="latency-divider"></div>
                
                ${(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize) ? `
                <div class="node-flash">
                    <div class="flash-label">${window.icon('storage', { width: 14, height: 14 })} Flash</div>
                    <div class="flash-value">${this.formatFlashSize(nodeData.basic?.flashChipSize || nodeData.resources?.flashChipSize)}</div>
                </div>
                ` : ''}
                
                <div class="node-resources">
                    <div class="resource-item">
                        <div class="resource-label">${window.icon('cpu', { width: 14, height: 14 })} CPU</div>
                        <div class="resource-value">
                            <span class="value-label">Used:</span> ${Math.round(cpuUsed)}MHz / <span class="value-label">Total:</span> ${Math.round(cpuTotal)}MHz
                        </div>
                        <div class="resource-utilization">
                            <div class="utilization-bar">
                                <div class="utilization-fill ${this.getUtilizationColorClass(cpuUtilization)}" style="width: ${cpuUtilization}%"></div>
                            </div>
                            <span class="utilization-text">${cpuUtilization}% used</span>
                        </div>
                    </div>
                    
                    <div class="resource-item">
                        <div class="resource-label">${window.icon('memory', { width: 14, height: 14 })} Memory</div>
                        <div class="resource-value">
                            <span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(memoryUsed, 'memory')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(memoryTotal, 'memory')}
                        </div>
                        <div class="resource-utilization">
                            <div class="utilization-bar">
                                <div class="utilization-fill ${this.getUtilizationColorClass(memoryUtilization)}" style="width: ${memoryUtilization}%"></div>
                            </div>
                            <span class="utilization-text">${memoryUtilization}% used</span>
                        </div>
                    </div>
                    
                    <div class="resource-item">
                        <div class="resource-label">${window.icon('storage', { width: 14, height: 14 })} Storage</div>
                        <div class="resource-value">
                            <span class="value-label">Used:</span> ${this.viewModel.formatResourceValue(storageUsed, 'storage')} / <span class="value-label">Total:</span> ${this.viewModel.formatResourceValue(storageTotal, 'storage')}
                        </div>
                        <div class="resource-utilization">
                            <div class="utilization-bar">
                                <div class="utilization-fill ${this.getUtilizationColorClass(storageUtilization)}" style="width: ${storageUtilization}%"></div>
                            </div>
                            <span class="utilization-text">${storageUtilization}% used</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}
