// Cluster Status Component for header badge
class ClusterStatusComponent extends Component {
    constructor(container, viewModel, eventBus) {
        super(container, viewModel, eventBus);
    }

    setupViewModelListeners() {
        // Subscribe to properties that affect cluster status
        this.subscribeToProperty('totalNodes', this.render.bind(this));
        this.subscribeToProperty('clientInitialized', this.render.bind(this));
        this.subscribeToProperty('error', this.render.bind(this));
    }

    render() {
        const totalNodes = this.viewModel.get('totalNodes');
        const clientInitialized = this.viewModel.get('clientInitialized');
        const error = this.viewModel.get('error');

        let statusText, statusIcon, statusClass;

        if (error) {
            statusText = 'Cluster Error';
            statusIcon = '❌';
            statusClass = 'cluster-status-error';
        } else if (totalNodes === 0) {
            statusText = 'Cluster Offline';
            statusIcon = '🔴';
            statusClass = 'cluster-status-offline';
        } else if (clientInitialized) {
            statusText = 'Cluster Online';
            statusIcon = '🟢';
            statusClass = 'cluster-status-online';
        } else {
            statusText = 'Cluster Connecting';
            statusIcon = '🟡';
            statusClass = 'cluster-status-connecting';
        }

        // Update the cluster status badge using the container passed to this component
        if (this.container) {
            this.container.innerHTML = `${statusIcon} ${statusText}`;
            
            // Remove all existing status classes
            this.container.classList.remove('cluster-status-online', 'cluster-status-offline', 'cluster-status-connecting', 'cluster-status-error');
            
            // Add the appropriate status class
            this.container.classList.add(statusClass);
        }
    }
} 