// Rollout Component - Shows rollout panel with matching nodes and starts rollout
class RolloutComponent extends Component {
    constructor(container, viewModel, eventBus) {
        super(container, viewModel, eventBus);
        
        logger.debug('RolloutComponent: Constructor called');
        
        this.rolloutData = null;
        this.matchingNodes = [];
        this.onRolloutCallback = null;
        this.onCancelCallback = null;
    }

    setupEventListeners() {
        // Rollout button
        const rolloutBtn = this.findElement('#rollout-confirm-btn');
        if (rolloutBtn) {
            this.addEventListener(rolloutBtn, 'click', this.handleRollout.bind(this));
        }

        // Cancel button
        const cancelBtn = this.findElement('#rollout-cancel-btn');
        if (cancelBtn) {
            this.addEventListener(cancelBtn, 'click', this.handleCancel.bind(this));
        }
    }

    // Start rollout - hide labels and show status indicators
    startRollout() {
        const nodeItems = this.container.querySelectorAll('.rollout-node-item');
        nodeItems.forEach(item => {
            const labelsDiv = item.querySelector('.rollout-node-labels');
            const statusDiv = item.querySelector('.status-indicator');
            
            if (labelsDiv && statusDiv) {
                labelsDiv.style.display = 'none';
                statusDiv.style.display = 'block';
                statusDiv.textContent = 'Ready';
                statusDiv.className = 'status-indicator ready';
            }
        });

        // Disable the confirm button
        const confirmBtn = this.findElement('#rollout-confirm-btn');
        if (confirmBtn) {
            confirmBtn.disabled = true;
            confirmBtn.textContent = 'Rollout in Progress...';
        }
    }

    // Update status for a specific node
    updateNodeStatus(nodeIp, status) {
        const nodeItem = this.container.querySelector(`[data-node-ip="${nodeIp}"]`);
        if (!nodeItem) return;

        const statusDiv = nodeItem.querySelector('.status-indicator');
        if (!statusDiv) return;

        let displayStatus = status;
        let statusClass = '';

        switch (status) {
            case 'updating_labels':
                displayStatus = 'Updating Labels...';
                statusClass = 'uploading';
                break;
            case 'uploading':
                displayStatus = 'Uploading...';
                statusClass = 'uploading';
                break;
            case 'completed':
                displayStatus = 'Completed';
                statusClass = 'success';
                break;
            case 'failed':
                displayStatus = 'Failed';
                statusClass = 'error';
                break;
            default:
                displayStatus = status;
                statusClass = 'pending';
        }

        statusDiv.textContent = displayStatus;
        statusDiv.className = `status-indicator ${statusClass}`;
    }

    // Check if rollout is complete
    isRolloutComplete() {
        const statusIndicators = this.container.querySelectorAll('.status-indicator');
        for (const indicator of statusIndicators) {
            const status = indicator.textContent.toLowerCase();
            if (status !== 'completed' && status !== 'failed') {
                return false;
            }
        }
        return true;
    }

    // Reset to initial state (show labels, hide status indicators)
    resetRolloutState() {
        const nodeItems = this.container.querySelectorAll('.rollout-node-item');
        nodeItems.forEach(item => {
            const labelsDiv = item.querySelector('.rollout-node-labels');
            const statusDiv = item.querySelector('.status-indicator');
            
            if (labelsDiv && statusDiv) {
                labelsDiv.style.display = 'block';
                statusDiv.style.display = 'none';
            }
        });

        // Re-enable the confirm button
        const confirmBtn = this.findElement('#rollout-confirm-btn');
        if (confirmBtn) {
            confirmBtn.disabled = false;
            confirmBtn.textContent = `Rollout to ${this.matchingNodes.length} Node${this.matchingNodes.length !== 1 ? 's' : ''}`;
        }
    }

    mount() {
        super.mount();
        
        logger.debug('RolloutComponent: Mounting...');
        
        this.render();
        
        logger.debug('RolloutComponent: Mounted successfully');
    }

    setRolloutData(name, version, labels, matchingNodes) {
        this.rolloutData = { name, version, labels };
        this.matchingNodes = matchingNodes;
    }

    setOnRolloutCallback(callback) {
        this.onRolloutCallback = callback;
    }

    setOnCancelCallback(callback) {
        this.onCancelCallback = callback;
    }

    render() {
        if (!this.rolloutData) {
            this.container.innerHTML = '<div class="error">No rollout data available</div>';
            return;
        }

        const { name, version, labels } = this.rolloutData;
        
        // Render labels as chips
        const labelsHTML = Object.entries(labels).map(([key, value]) => 
            `<span class="label-chip" title="${key}: ${value}">${key}: ${value}</span>`
        ).join('');

        // Render matching nodes
        const nodesHTML = this.matchingNodes.map(node => {
            const nodeLabelsHTML = Object.entries(node.labels || {}).map(([key, value]) => 
                `<span class="label-chip" title="${key}: ${value}">${key}: ${value}</span>`
            ).join('');

            return `
                <div class="rollout-node-item" data-node-ip="${node.ip}">
                    <div class="rollout-node-info">
                        <div class="rollout-node-ip">${this.escapeHtml(node.ip)}</div>
                        <div class="rollout-node-version">Version: ${this.escapeHtml(node.version)}</div>
                    </div>
                    <div class="rollout-node-status">
                        <div class="rollout-node-labels">
                            ${nodeLabelsHTML}
                        </div>
                        <div class="status-indicator ready" style="display: none;">Ready</div>
                    </div>
                </div>
            `;
        }).join('');

        this.container.innerHTML = `
            <div class="rollout-panel">
                <div class="rollout-header">
                    <p>Deploy firmware to matching cluster nodes</p>
                </div>
                
                <div class="rollout-firmware-info">
                    <div class="rollout-firmware-name">${this.escapeHtml(name)}</div>
                    <div class="rollout-firmware-version">Version: ${this.escapeHtml(version)}</div>
                    <div class="rollout-firmware-labels">
                        ${labelsHTML}
                    </div>
                </div>

                <div class="rollout-matching-nodes">
                    <h4>Matching Nodes (${this.matchingNodes.length})</h4>
                    <div class="rollout-nodes-list">
                        ${nodesHTML}
                    </div>
                </div>

                <div class="rollout-warning">
                    <div class="warning-icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                            <line x1="12" y1="9" x2="12" y2="13"/>
                            <line x1="12" y1="17" x2="12.01" y2="17"/>
                        </svg>
                    </div>
                    <div class="warning-text">
                        <strong>Warning:</strong> This will update firmware on ${this.matchingNodes.length} node${this.matchingNodes.length !== 1 ? 's' : ''}. 
                        The rollout process cannot be cancelled once started.
                    </div>
                </div>

                <div class="rollout-actions">
                    <button id="rollout-cancel-btn" class="refresh-btn">Cancel</button>
                    <button id="rollout-confirm-btn" class="deploy-btn" ${this.matchingNodes.length === 0 ? 'disabled' : ''}>
                        Rollout to ${this.matchingNodes.length} Node${this.matchingNodes.length !== 1 ? 's' : ''}
                    </button>
                </div>
            </div>
        `;

        this.setupEventListeners();
    }

    handleRollout() {
        if (!this.onRolloutCallback || this.matchingNodes.length === 0) {
            return;
        }

        // Send the firmware info and matching nodes directly
        const rolloutData = {
            firmware: {
                name: this.rolloutData.name,
                version: this.rolloutData.version,
                labels: this.rolloutData.labels
            },
            nodes: this.matchingNodes
        };
        
        this.onRolloutCallback(rolloutData);
    }

    handleCancel() {
        if (this.onCancelCallback) {
            this.onCancelCallback();
        }
    }

    escapeHtml(text) {
        if (typeof text !== 'string') return text;
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

window.RolloutComponent = RolloutComponent;