// Cluster View Component
class ClusterViewComponent extends Component {
    constructor(container, viewModel, eventBus) {
        super(container, viewModel, eventBus);
        
        logger.debug('ClusterViewComponent: Constructor called');
        logger.debug('ClusterViewComponent: Container:', container);
        logger.debug('ClusterViewComponent: Container ID:', container?.id);
        
        // Find elements for sub-components
        const primaryNodeContainer = this.findElement('.primary-node-info');
        const clusterMembersContainer = this.findElement('#cluster-members-container');
        
        logger.debug('ClusterViewComponent: Primary node container:', primaryNodeContainer);
        logger.debug('ClusterViewComponent: Cluster members container:', clusterMembersContainer);
        logger.debug('ClusterViewComponent: Cluster members container ID:', clusterMembersContainer?.id);
        logger.debug('ClusterViewComponent: Cluster members container innerHTML:', clusterMembersContainer?.innerHTML);
        
        // Create sub-components
        this.primaryNodeComponent = new PrimaryNodeComponent(
            primaryNodeContainer,
            viewModel,
            eventBus
        );
        
        this.clusterMembersComponent = new ClusterMembersComponent(
            clusterMembersContainer,
            viewModel,
            eventBus
        );
        
        logger.debug('ClusterViewComponent: Sub-components created');
        
        // Track if we've already loaded data to prevent unnecessary reloads
        this.dataLoaded = false;
    }

    mount() {
        logger.debug('ClusterViewComponent: Mounting...');
        super.mount();
        
        logger.debug('ClusterViewComponent: Mounting sub-components...');
        // Mount sub-components
        this.primaryNodeComponent.mount();
        this.clusterMembersComponent.mount();
        
        // Set up refresh button event listener (since it's in the cluster header, not in the members container)
        this.setupRefreshButton();
        
        // Set up deploy button event listener
        this.setupDeployButton();
        
        // Only load data if we haven't already or if the view model is empty
        const members = this.viewModel.get('members');
        const shouldLoadData = true; // always perform initial refresh quickly
        
        if (shouldLoadData) {
            logger.debug('ClusterViewComponent: Starting initial data load...');
            // Initial data load - ensure it happens after mounting
            // Trigger immediately to reduce perceived startup latency
            this.viewModel.updateClusterMembers().then(() => {
                this.dataLoaded = true;
            }).catch(error => {
                logger.error('ClusterViewComponent: Failed to load initial data:', error);
            });
        } else {
            logger.debug('ClusterViewComponent: Data already loaded, skipping initial load');
        }
        
        // Set up periodic updates
        // this.setupPeriodicUpdates(); // Disabled automatic refresh
        logger.debug('ClusterViewComponent: Mounted successfully');
    }
    
    setupRefreshButton() {
        logger.debug('ClusterViewComponent: Setting up refresh button...');
        
        const refreshBtn = this.findElement('.refresh-btn');
        logger.debug('ClusterViewComponent: Found refresh button:', !!refreshBtn, refreshBtn);
        
        if (refreshBtn) {
            logger.debug('ClusterViewComponent: Adding click event listener to refresh button');
            this.addEventListener(refreshBtn, 'click', this.handleRefresh.bind(this));
            logger.debug('ClusterViewComponent: Event listener added successfully');
        } else {
            logger.error('ClusterViewComponent: Refresh button not found!');
            logger.debug('ClusterViewComponent: Container HTML:', this.container.innerHTML);
            logger.debug('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button'));
        }
    }
    
    setupDeployButton() {
        logger.debug('ClusterViewComponent: Setting up deploy button...');
        
        const deployBtn = this.findElement('#deploy-firmware-btn');
        logger.debug('ClusterViewComponent: Found deploy button:', !!deployBtn, deployBtn);
        
        if (deployBtn) {
            logger.debug('ClusterViewComponent: Adding click event listener to deploy button');
            this.addEventListener(deployBtn, 'click', this.handleDeploy.bind(this));
            logger.debug('ClusterViewComponent: Event listener added successfully');
        } else {
            logger.error('ClusterViewComponent: Deploy button not found!');
            logger.debug('ClusterViewComponent: Container HTML:', this.container.innerHTML);
            logger.debug('ClusterViewComponent: All buttons in container:', this.container.querySelectorAll('button'));
        }
    }
    
    async handleDeploy() {
        logger.debug('ClusterViewComponent: Deploy button clicked, opening firmware upload drawer...');
        
        // Get current filtered members from cluster members component
        const filteredMembers = this.clusterMembersComponent ? this.clusterMembersComponent.getFilteredMembers() : [];
        
        if (!filteredMembers || filteredMembers.length === 0) {
            alert('No nodes available for firmware deployment. Please ensure cluster members are loaded and visible.');
            return;
        }
        
        // Open drawer with firmware upload interface
        this.openFirmwareUploadDrawer(filteredMembers);
    }
    
    openFirmwareUploadDrawer(targetNodes) {
        logger.debug('ClusterViewComponent: Opening firmware upload drawer for', targetNodes.length, 'nodes');
        
        // Get display name for drawer title
        const nodeCount = targetNodes.length;
        const displayName = `Firmware Deployment - ${nodeCount} node${nodeCount !== 1 ? 's' : ''}`;
        
        // Open drawer with content callback (hide terminal button for firmware upload)
        this.clusterMembersComponent.drawer.openDrawer(displayName, (contentContainer, setActiveComponent) => {
            // Create firmware upload view model and component
            const firmwareUploadVM = new ClusterFirmwareViewModel();
            firmwareUploadVM.setTargetNodes(targetNodes);
            
            // Create HTML for firmware upload interface
            contentContainer.innerHTML = `
                <div class="firmware-upload-drawer">
                    <div class="firmware-upload-section">
                        <!--div class="firmware-upload-header">
                            <h3>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
                                    <path d="M4 7l8-4 8 4v10l-8 4-8-4z"/>
                                    <path d="M12 8v8"/>
                                </svg>
                                Firmware Upload
                            </h3>
                        </div-->
                        
                        <div class="firmware-upload-controls">
                            <div class="file-input-wrapper">
                                <div class="file-input-left">
                                    <input type="file" id="firmware-file" accept=".bin,.hex" style="display: none;">
                                    <button class="upload-btn-compact" onclick="document.getElementById('firmware-file').click()">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
                                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                            <path d="M14 2v6h6"/>
                                        </svg>
                                        Choose File
                                    </button>
                                    <span class="file-info" id="file-info">No file selected</span>
                                </div>
                                <button class="deploy-btn-compact" id="deploy-btn" disabled>
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="margin-right:6px; vertical-align: -2px;">
                                        <path d="M12 16V4"/>
                                        <path d="M8 8l4-4 4 4"/>
                                        <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2"/>
                                    </svg>
                                    Deploy
                                </button>
                            </div>
                        </div>
                        
                        <div class="target-nodes-section">
                            <h3>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right:6px; vertical-align: -2px;">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                    <circle cx="9" cy="7" r="4"/>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                                </svg>
                                Target Nodes (${targetNodes.length})
                            </h3>
                            <div class="target-nodes-list">
                                ${targetNodes.map(node => `
                                    <div class="target-node-item" data-node-ip="${node.ip}">
                                        <div class="node-info">
                                            <span class="node-name">${node.hostname || node.ip}</span>
                                            <span class="node-ip">${node.ip}</span>
                                        </div>
                                        <div class="node-status">
                                            <span class="status-indicator ready">Ready</span>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                        
                        
                        <div id="firmware-progress-container">
                            <!-- Progress will be shown here during upload -->
                        </div>
                    </div>
                </div>
            `;
            
            // Create and mount firmware upload component
            const firmwareUploadComponent = new FirmwareUploadComponent(contentContainer, firmwareUploadVM, this.eventBus);
            setActiveComponent(firmwareUploadComponent);
            firmwareUploadComponent.mount();
            
        }, null, () => {
            // Close callback - clear any upload state
            logger.debug('ClusterViewComponent: Firmware upload drawer closed');
        }, true); // Hide terminal button for firmware upload
    }
    
    async handleRefresh() {
        logger.debug('ClusterViewComponent: Refresh button clicked, performing full refresh...');
        
        // Get the refresh button and show loading state
        const refreshBtn = this.findElement('.refresh-btn');
        logger.debug('ClusterViewComponent: Found refresh button for loading state:', !!refreshBtn);
        
        if (refreshBtn) {
            const originalText = refreshBtn.innerHTML;
            logger.debug('ClusterViewComponent: Original button text:', originalText);
            
            refreshBtn.innerHTML = `
                <svg class="refresh-icon spinning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M1 4v6h6M23 20v-6h-6"/>
                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
                </svg>
                Refreshing...
            `;
            refreshBtn.disabled = true;
            
            try {
                logger.debug('ClusterViewComponent: Starting cluster members update...');
                // Always perform a full refresh when user clicks refresh button
                await this.viewModel.updateClusterMembers();
                logger.debug('ClusterViewComponent: Cluster members update completed successfully');
            } catch (error) {
                logger.error('ClusterViewComponent: Error during refresh:', error);
                // Show error state
                if (this.clusterMembersComponent && this.clusterMembersComponent.showErrorState) {
                    this.clusterMembersComponent.showErrorState(error.message || 'Refresh failed');
                }
            } finally {
                logger.debug('ClusterViewComponent: Restoring button state...');
                // Restore button state
                refreshBtn.innerHTML = originalText;
                refreshBtn.disabled = false;
            }
        } else {
            logger.warn('ClusterViewComponent: Refresh button not found, using fallback refresh');
            // Fallback if button not found
            try {
                await this.viewModel.updateClusterMembers();
            } catch (error) {
                logger.error('ClusterViewComponent: Fallback refresh failed:', error);
                if (this.clusterMembersComponent && this.clusterMembersComponent.showErrorState) {
                    this.clusterMembersComponent.showErrorState(error.message || 'Refresh failed');
                }
            }
        }
    }

    unmount() {
        logger.debug('ClusterViewComponent: Unmounting...');
        
        // Unmount sub-components
        if (this.primaryNodeComponent) {
            this.primaryNodeComponent.unmount();
        }
        if (this.clusterMembersComponent) {
            this.clusterMembersComponent.unmount();
        }
        
        // Clear intervals
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
        }
        
        super.unmount();
        logger.debug('ClusterViewComponent: Unmounted');
    }

    // Override pause method to handle sub-components
    onPause() {
        logger.debug('ClusterViewComponent: Pausing...');
        
        // Pause sub-components
        if (this.primaryNodeComponent && this.primaryNodeComponent.isMounted) {
            this.primaryNodeComponent.pause();
        }
        if (this.clusterMembersComponent && this.clusterMembersComponent.isMounted) {
            this.clusterMembersComponent.pause();
        }
        
        // Clear any active intervals
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
            this.updateInterval = null;
        }
    }

    // Override resume method to handle sub-components
    onResume() {
        logger.debug('ClusterViewComponent: Resuming...');
        
        // Resume sub-components
        if (this.primaryNodeComponent && this.primaryNodeComponent.isMounted) {
            this.primaryNodeComponent.resume();
        }
        if (this.clusterMembersComponent && this.clusterMembersComponent.isMounted) {
            this.clusterMembersComponent.resume();
        }
        
        // Restart periodic updates if needed
        // this.setupPeriodicUpdates(); // Disabled automatic refresh
    }

    // Override to determine if re-render is needed on resume
    shouldRenderOnResume() {
        // Don't re-render on resume - the component should maintain its state
        return false;
    }

    setupPeriodicUpdates() {
        // Update primary node display every 10 seconds
        this.updateInterval = setInterval(() => {
            this.viewModel.updatePrimaryNodeDisplay();
        }, 10000);
    }
}

window.ClusterViewComponent = ClusterViewComponent;