// static/js/app.js
import { CONSISTENCY_POLL_INTERVAL } from './store/configStore.js';
import { checkConsistency, showConsistencyModal, resolveConsistency } from './components/consistency.js';
import { renderClustersTable } from './components/clustersTable.js';
import { renderListenersTable } from './components/listenersTable.js';
import { renderSecretsTable } from './components/secretsTable.js';
import { renderExtensionConfigsTable } from './components/extensionConfigsTable.js';
import { showModal, hideModal, setupEscKeyHandler, setupBackdropClickHandler } from './components/modals.js';
import { copyToClipboard, downloadYaml } from './components/configActions.js';
import { submitCluster, submitListener, submitFilterChain, submitSecret, submitExtensionConfig } from './components/resourceForms.js';

function switchTab(modalContent, tabName) {
    modalContent.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    modalContent.querySelectorAll('.code-block').forEach(content => content.style.display = 'none');
    const activeBtn = modalContent.querySelector(`.tab-button[data-tab="${tabName}"]`);
    const isSecret = modalContent.closest('#secretConfigModal');
    const contentIdPrefix = isSecret ? 'secret-modal' : 'modal';
    const activeContent = document.getElementById(`${contentIdPrefix}-${tabName}-content`);
    if (activeBtn) activeBtn.classList.add('active');
    if (activeContent) activeContent.style.display = 'block';
}

window.switchTab = switchTab;

// Consolidate everything into a global object if needed for inline HTML compatibility,
// but better to remove inline handlers. I will do both for now during transition.

async function loadAllData() {
    await Promise.all([
        renderListenersTable(),
        renderClustersTable(),
        renderSecretsTable(),
        renderExtensionConfigsTable()
    ]);
}

// Attach to window for the remaining inline handlers in index.html during transition
window.loadAllData = loadAllData;
window.checkConsistency = checkConsistency;
window.showConsistencyModal = showConsistencyModal;
window.resolveConsistency = resolveConsistency;
window.hideModal = (id) => hideModal(id);
window.showModal = (id) => showModal(id);
window.downloadYaml = downloadYaml;
window.copyToClipboard = copyToClipboard;

// Forms
window.submitNewCluster = submitCluster;
window.submitNewListener = submitListener;
window.submitNewFilterChain = submitFilterChain;
window.submitNewSecret = submitSecret;
window.submitNewExtensionConfig = submitExtensionConfig;

// Modal launchers (Add/Update)
window.showAddListenerModal = () => showModal('addListenerModal');
window.showAddClusterModal = () => showModal('addClusterModal');
window.showAddSecretModal = () => showModal('addSecretModal');
window.showAddExtensionConfigModal = () => showModal('addExtensionConfigModal');
window.showAddFilterChainModal = (name) => {
    document.getElementById('add-fc-listener-name').value = name;
    showModal('addFilterChainModal');
};

// Initial load
window.onload = () => {
    loadAllData();
    checkConsistency();
    setInterval(checkConsistency, CONSISTENCY_POLL_INTERVAL);
};