{% extends "base.html" %}

{% block title %}All Clusters - AtlasUI{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h1><i class="bi bi-hdd-rack"></i> All Clusters</h1>
            <div>
                <button class="btn btn-success btn-sm me-2" id="createClusterBtn">
                    <i class="bi bi-plus-circle"></i> Create Cluster
                </button>
                <button class="btn btn-outline-success btn-sm" id="refreshBtn">
                    <i class="bi bi-arrow-clockwise"></i> Refresh
                </button>
            </div>
        </div>

        <!-- Loading indicator -->
        <div id="loadingIndicator" class="text-center my-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading clusters...</p>
        </div>

        <!-- Error message -->
        <div id="errorMessage" class="alert alert-danger d-none" role="alert">
            <i class="bi bi-exclamation-triangle"></i>
            <span id="errorText"></span>
        </div>

        <!-- Clusters table -->
        <div id="clustersTable" class="d-none">
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Organization</th>
                            <th>Project</th>
                            <th>Status</th>
                            <th>Type</th>
                            <th>MongoDB</th>
                            <th>Provider</th>
                            <th>Region</th>
                            <th>Instance</th>
                            <th>Users</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="clustersContainer">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loginModalLabel">
                    <i class="bi bi-key"></i> Login to Cluster
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="loginError" class="alert alert-danger d-none"></div>
                <div id="loginSuccess" class="alert alert-success d-none"></div>

                <form id="loginForm">
                    <input type="hidden" id="clusterConnectionString" />
                    <input type="hidden" id="clusterName" />

                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" required autocomplete="username">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" required autocomplete="current-password">
                    </div>
                </form>

                <!-- Databases list (shown after successful login) -->
                <div id="databasesList" class="d-none mt-3">
                    <h6>Databases:</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Collections</th>
                                    <th>Indexes</th>
                                    <th>Size</th>
                                </tr>
                            </thead>
                            <tbody id="databasesTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="loginBtn">
                    <i class="bi bi-box-arrow-in-right"></i> Login
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">
                    <i class="bi bi-person-plus"></i> Add Database User
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="addUserError" class="alert alert-danger d-none"></div>
                <div id="addUserSuccess" class="alert alert-success d-none"></div>

                <form id="addUserForm">
                    <input type="hidden" id="addUserProjectId" />

                    <div class="mb-3">
                        <label for="newUsername" class="form-label">Username <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newUsername" required>
                        <div class="form-text">Database username for authentication</div>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">Password <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" id="newPassword" required>
                        <div class="form-text">Must be at least 8 characters</div>
                    </div>
                    <div class="mb-3">
                        <label for="userRole" class="form-label">Role <span class="text-danger">*</span></label>
                        <select class="form-select" id="userRole" required>
                            <option value="">Select a role...</option>
                            <option value="readWrite">Read and Write (readWrite)</option>
                            <option value="read">Read Only (read)</option>
                            <option value="dbAdmin">Database Admin (dbAdmin)</option>
                            <option value="atlasAdmin">Atlas Admin (atlasAdmin)</option>
                        </select>
                        <div class="form-text">User permissions on the database</div>
                    </div>
                    <div class="mb-3">
                        <label for="targetDatabase" class="form-label">Target Database</label>
                        <input type="text" class="form-control" id="targetDatabase" value="admin">
                        <div class="form-text">Database where the role applies (default: admin)</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="addUserBtn">
                    <i class="bi bi-person-plus"></i> Add User
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Details Panel (Offcanvas) -->
<div class="offcanvas offcanvas-end offcanvas-wide" tabindex="-1" id="detailsPanel" aria-labelledby="detailsPanelLabel">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title" id="detailsPanelLabel">
            <i class="bi bi-info-circle"></i> Cluster Details
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div id="detailsContent">
            <p class="text-muted">Click on a cluster name to view its details</p>
        </div>
    </div>
</div>

<!-- Logout Confirmation Modal -->
<div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logoutModalLabel">
                    <i class="bi bi-box-arrow-right"></i> Confirm Logout
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>You will be logged out from cluster:</p>
                <p class="text-center"><strong id="logoutClusterName"></strong></p>
                <p class="text-muted small">Your session will be closed and you will need to login again to access this cluster's databases.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmLogoutBtn">
                    <i class="bi bi-box-arrow-right"></i> Logout
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Create Cluster Modal -->
<div class="modal fade" id="createClusterModal" tabindex="-1" aria-labelledby="createClusterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createClusterModalLabel">
                    <i class="bi bi-plus-circle"></i> Create New Cluster
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="createClusterError" class="alert alert-danger d-none"></div>

                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    The cluster creation will be queued and processed in the background. You can track its progress in the Operations panel at the bottom of the screen.
                </div>

                <form id="createClusterForm">
                    <div class="mb-3">
                        <label for="createClusterProjectId" class="form-label">Project <span class="text-danger">*</span></label>
                        <select class="form-select" id="createClusterProjectId" required>
                            <option value="">Select project...</option>
                        </select>
                        <div class="form-text">Select the project where this cluster will be created</div>
                    </div>

                    <div class="mb-3">
                        <label for="clusterNameInput" class="form-label">Cluster Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="clusterNameInput" required
                               placeholder="e.g., my-cluster">
                        <div class="form-text">Must be unique within the project. Lowercase alphanumeric and hyphens only.</div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="providerName" class="form-label">Cloud Provider <span class="text-danger">*</span></label>
                                <select class="form-select" id="providerName" required>
                                    <option value="">Select provider...</option>
                                    <option value="AWS">Amazon Web Services (AWS)</option>
                                    <option value="GCP">Google Cloud Platform (GCP)</option>
                                    <option value="AZURE">Microsoft Azure</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="regionName" class="form-label">Region <span class="text-danger">*</span></label>
                                <select class="form-select" id="regionName" required disabled>
                                    <option value="">Select region...</option>
                                </select>
                                <div class="form-text">Region availability depends on provider</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="instanceSize" class="form-label">Instance Size <span class="text-danger">*</span></label>
                                <select class="form-select" id="instanceSize" required>
                                    <option value="">Select size...</option>
                                    <optgroup label="Free Tier">
                                        <option value="M0">M0 - Free (512MB storage, shared CPU)</option>
                                    </optgroup>
                                    <optgroup label="Flex (Shared Tier)">
                                        <option value="FLEX">Flex - Pay-per-use (auto-scaling shared infrastructure)</option>
                                    </optgroup>
                                    <optgroup label="Dedicated Clusters">
                                        <option value="M10">M10 - 2GB RAM</option>
                                        <option value="M20">M20 - 4GB RAM</option>
                                        <option value="M30">M30 - 8GB RAM</option>
                                        <option value="M40">M40 - 16GB RAM</option>
                                        <option value="M50">M50 - 32GB RAM</option>
                                        <option value="M60">M60 - 64GB RAM</option>
                                        <option value="M80">M80 - 128GB RAM</option>
                                        <option value="M140">M140 - 192GB RAM</option>
                                        <option value="M200">M200 - 256GB RAM</option>
                                        <option value="M300">M300 - 384GB RAM</option>
                                    </optgroup>
                                </select>
                                <div class="form-text">M0 is free tier. Flex auto-scales on shared infrastructure. M10+ are dedicated clusters with fixed resources.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="mongoDBVersion" class="form-label">MongoDB Version</label>
                                <select class="form-select" id="mongoDBVersion">
                                    <option value="">Latest version</option>
                                    <option value="8.0">8.0</option>
                                    <option value="7.0">7.0</option>
                                    <option value="6.0">6.0</option>
                                    <option value="5.0">5.0</option>
                                </select>
                                <div class="form-text">Leave blank for latest stable version</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="clusterType" class="form-label">Cluster Type <span class="text-danger">*</span></label>
                        <select class="form-select" id="clusterType" required>
                            <option value="REPLICASET">Replica Set (Recommended)</option>
                            <option value="SHARDED">Sharded Cluster</option>
                        </select>
                        <div class="form-text">Replica Set is recommended for most use cases</div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="enableBackup">
                        <label class="form-check-label" for="enableBackup">
                            Enable Cloud Backup (Recommended)
                        </label>
                    </div>

                    <div class="alert alert-info small">
                        <i class="bi bi-info-circle"></i>
                        <strong>Note:</strong> Creating a cluster may take several minutes. M0 (Free Tier) clusters have usage limitations.
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="submitCreateClusterBtn">
                    <i class="bi bi-plus-circle"></i> Create Cluster
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Cluster Confirmation Modal -->
<div class="modal fade" id="deleteClusterModal" tabindex="-1" aria-labelledby="deleteClusterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteClusterModalLabel">
                    <i class="bi bi-exclamation-triangle-fill"></i> Confirm Cluster Deletion
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <strong>Warning:</strong> This action cannot be undone!
                </div>
                <p>You are about to permanently delete the cluster:</p>
                <p class="text-center"><strong id="deleteClusterName"></strong></p>
                <p class="text-danger"><strong>All data in this cluster will be lost permanently.</strong></p>
                <p class="text-muted small">Please ensure you have backups of any important data before proceeding.</p>

                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    The deletion will be queued and processed in the background. You can track its progress in the Operations panel at the bottom of the screen.
                </div>

                <div class="mb-3 mt-3">
                    <label for="confirmClusterName" class="form-label">
                        Type the cluster name to confirm deletion:
                    </label>
                    <input type="text" class="form-control" id="confirmClusterName"
                           placeholder="Enter cluster name">
                </div>

                <div id="deleteClusterError" class="alert alert-danger d-none mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteClusterBtn" disabled>
                    <i class="bi bi-trash"></i> Delete Cluster
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    h1 {
        font-size: 1.25rem;
    }

    .offcanvas-wide {
        width: 600px !important;
        max-width: 90vw;
    }

    .cluster-name-link {
        cursor: pointer;
        color: #00684a;
        text-decoration: none;
    }

    .cluster-name-link:hover {
        text-decoration: underline;
    }

    /* Cluster creation animations */
    .cluster-creation-animation {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .pulse-icon {
        animation: pulse 2s ease-in-out infinite;
        display: inline-block;
    }

    .spinning-gear {
        animation: spin 2s linear infinite;
        display: inline-block;
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
</style>

<script>
let clusters = [];
// Track clusters currently being deleted (key: "projectId:clusterName")
const deletingClusters = new Set();

// Global function to mark cluster as being deleted
window.markClusterDeleting = function(projectId, clusterName) {
    const key = `${projectId}:${clusterName}`;
    deletingClusters.add(key);
    console.log(`Marked cluster as deleting: ${key}`);
};

// Global function to unmark cluster as being deleted
window.unmarkClusterDeleting = function(projectId, clusterName) {
    const key = `${projectId}:${clusterName}`;
    deletingClusters.delete(key);
    console.log(`Unmarked cluster as deleting: ${key}`);
};

// Global function to check if cluster is being deleted
window.isClusterDeleting = function(projectId, clusterName) {
    const key = `${projectId}:${clusterName}`;
    return deletingClusters.has(key);
};

document.addEventListener('DOMContentLoaded', function() {
    loadClusters();
    document.getElementById('refreshBtn').addEventListener('click', loadClusters);
});

async function loadClusters() {
    const loading = document.getElementById('loadingIndicator');
    const error = document.getElementById('errorMessage');
    const table = document.getElementById('clustersTable');

    loading.classList.remove('d-none');
    error.classList.add('d-none');
    table.classList.add('d-none');

    const startTime = performance.now();
    console.log('[TIMING] Starting cluster load...');

    try {
        // Fetch all organizations
        const orgStart = performance.now();
        const orgsResponse = await fetch('/api/organizations/?itemsPerPage=500');
        if (!orgsResponse.ok) throw new Error('Failed to fetch organizations');
        const orgsData = await orgsResponse.json();
        console.log(`[TIMING] Organizations fetched in ${(performance.now() - orgStart).toFixed(0)}ms`);

        // Fetch all projects in parallel
        const projectPromises = (orgsData.results || []).map(async (org) => {
            const projectsResponse = await fetch(`/api/organizations/${org.id}/projects?itemsPerPage=500`);
            if (!projectsResponse.ok) return [];
            const projectsData = await projectsResponse.json();
            return (projectsData.results || []).map(project => ({
                ...project,
                orgName: org.name,
                orgId: org.id
            }));
        });

        const projectArrays = await Promise.all(projectPromises);
        const allProjects = projectArrays.flat();
        console.log(`[TIMING] All projects fetched in ${(performance.now() - startTime).toFixed(0)}ms (${allProjects.length} projects)`);

        // Fetch clusters and users for all projects in parallel
        const clusterStart = performance.now();
        const clusterPromises = allProjects.map(async (project) => {
            // Fetch regular clusters, Flex clusters, and users in parallel for this project
            const [regularClusters, flexClusters, projectUsers] = await Promise.all([
                // Regular clusters
                fetch(`/api/clusters/${project.id}?itemsPerPage=500`)
                    .then(r => r.ok ? r.json() : { results: [] })
                    .then(data => data.results || [])
                    .catch(() => []),

                // Flex clusters
                fetch(`/api/clusters/${project.id}/flex/list?itemsPerPage=500`)
                    .then(r => r.ok ? r.json() : { results: [] })
                    .then(data => data.results || [])
                    .catch(() => []),

                // Users
                fetch(`/api/users/${project.id}`)
                    .then(r => r.ok ? r.json() : { results: [] })
                    .then(data => data.results || [])
                    .catch(() => [])
            ]);

            // Combine and annotate clusters
            const projectClusters = [...regularClusters, ...flexClusters];
            return projectClusters.map(cluster => ({
                ...cluster,
                orgName: project.orgName,
                orgId: project.orgId,
                projectName: project.name,
                projectId: project.id,
                users: projectUsers
            }));
        });

        const clusterArrays = await Promise.all(clusterPromises);
        clusters = clusterArrays.flat();
        console.log(`[TIMING] All clusters fetched in ${(performance.now() - clusterStart).toFixed(0)}ms (${clusters.length} clusters)`);
        console.log(`[TIMING] TOTAL load time: ${(performance.now() - startTime).toFixed(0)}ms`);

        renderClusters();
        loading.classList.add('d-none');
        table.classList.remove('d-none');

    } catch (err) {
        console.error('Error loading clusters:', err);
        loading.classList.add('d-none');
        error.classList.remove('d-none');
        document.getElementById('errorText').textContent = err.message;
    }
}

function renderClusters() {
    const container = document.getElementById('clustersContainer');
    container.innerHTML = '';

    if (clusters.length === 0) {
        container.innerHTML = '<tr><td colspan="11" class="text-center"><div class="alert alert-info mb-0">No clusters found</div></td></tr>';
        return;
    }

    clusters.forEach(cluster => {
        const row = document.createElement('tr');
        // Override status if cluster is being deleted
        const isDeleting = window.isClusterDeleting(cluster.projectId, cluster.name);
        const displayStatus = isDeleting ? 'DELETING' : (cluster.stateName || 'UNKNOWN');
        const statusClass = getStatusBadgeClass(displayStatus);
        const users = cluster.users || [];

        row.innerHTML = `
            <td>
                <a href="javascript:void(0)" class="cluster-name-link" onclick="showClusterDetails('${cluster.id || cluster.name}')">
                    <strong>${cluster.name}</strong>
                </a>
            </td>
            <td>
                <a href="/organizations/${encodeURIComponent(cluster.orgName)}/projects" class="text-decoration-none">
                    <i class="bi bi-building"></i> ${cluster.orgName}
                </a>
            </td>
            <td>
                <a href="/projects/${encodeURIComponent(cluster.projectName)}" class="text-decoration-none">
                    <i class="bi bi-folder"></i> ${cluster.projectName}
                </a>
            </td>
            <td><span class="badge ${statusClass}">${displayStatus}</span></td>
            <td>
                <a href="/clusters/${encodeURIComponent(cluster.name)}/databases" class="text-decoration-none">
                    ${cluster.clusterType || 'N/A'}
                </a>
            </td>
            <td>${cluster.mongoDBVersion || 'N/A'}</td>
            <td>${cluster.providerSettings?.providerName || 'N/A'}</td>
            <td>${cluster.providerSettings?.regionName || 'N/A'}</td>
            <td>${cluster.providerSettings?.instanceSizeName || 'N/A'}</td>
            <td><span class="badge bg-secondary">${users.length}</span></td>
            <td>
                <button class="btn btn-sm btn-outline-primary cluster-login-btn me-1"
                        data-cluster="${cluster.name}"
                        onclick="handleClusterAction('${cluster.name}')">
                    <i class="bi bi-box-arrow-in-right"></i> Login
                </button>
                <button class="btn btn-sm btn-outline-danger"
                        onclick="showDeleteClusterConfirmation('${cluster.name}', '${cluster.projectId}', '${cluster.providerSettings?.providerName || ''}', '${cluster.providerSettings?.instanceSizeName || ''}')">
                    <i class="bi bi-trash"></i> Delete
                </button>
            </td>
        `;
        container.appendChild(row);
    });
}

function formatConnectionString(connectionString) {
    // Insert username:password@ placeholder after the protocol (mongodb:// or mongodb+srv://)
    if (!connectionString) return connectionString;

    // Match mongodb:// or mongodb+srv://
    const match = connectionString.match(/^(mongodb(?:\+srv)?:\/\/)(.*)/);
    if (match) {
        return `${match[1]}<strong>username:password@</strong>${match[2]}`;
    }
    return connectionString;
}

function getStatusBadgeClass(status) {
    switch (status) {
        case 'IDLE':
            return 'bg-success';
        case 'CREATING':
        case 'UPDATING':
            return 'bg-warning';
        case 'DELETING':
        case 'DELETED':
            return 'bg-danger';
        case 'REPAIRING':
            return 'bg-info';
        default:
            return 'bg-secondary';
    }
}

async function showClusterDetails(clusterId) {
    // Find cluster in the clusters array
    const cluster = clusters.find(c => (c.id === clusterId || c.name === clusterId));
    if (!cluster) return;

    const detailsContent = document.getElementById('detailsContent');

    // Show loading state
    detailsContent.innerHTML = `
        <div class="text-center my-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading cluster details...</p>
        </div>
    `;

    // Open the offcanvas immediately
    const offcanvas = new bootstrap.Offcanvas(document.getElementById('detailsPanel'));
    offcanvas.show();

    try {
        // Fetch additional data in parallel
        const [alertsData, snapshotsData, advancedConfigData, usersData] = await Promise.all([
            fetch(`/api/alerts/${cluster.projectId}`).then(r => r.ok ? r.json() : { results: [] }).catch(() => ({ results: [] })),
            fetch(`/api/backups/${cluster.projectId}/${cluster.name}/snapshots`).then(r => r.ok ? r.json() : { results: [] }).catch(() => ({ results: [] })),
            fetch(`/api/clusters/${cluster.projectId}/${cluster.name}/advanced-configuration`).then(r => r.ok ? r.json() : {}).catch(() => ({})),
            fetch(`/api/users/${cluster.projectId}`).then(r => r.ok ? r.json() : { results: [] }).catch(() => ({ results: [] }))
        ]);

        const alerts = (alertsData.results || []).filter(alert => alert.clusterName === cluster.name);
        const snapshots = snapshotsData.results || [];
        const advancedConfig = advancedConfigData;
        const users = usersData.results || [];
        const statusClass = getStatusBadgeClass(cluster.stateName);

    // Build comprehensive details HTML
    let html = `
        <h5 class="mb-3">
            <i class="bi bi-hdd-rack"></i> ${cluster.name}
        </h5>

        <div class="mb-3">
            <span class="badge ${statusClass}">${cluster.stateName || 'UNKNOWN'}</span>
            ${cluster.paused ? '<span class="badge bg-warning text-dark ms-1">PAUSED</span>' : ''}
            ${alerts.length > 0 ? `<span class="badge bg-danger ms-1">${alerts.length} Alert${alerts.length > 1 ? 's' : ''}</span>` : ''}
        </div>

        <div class="mb-3">
            <h6 class="text-muted">Basic Information</h6>
            <table class="table table-sm">
                <tbody>
                    <tr><th width="40%">Name</th><td>${cluster.name}</td></tr>
                    ${cluster.id ? `<tr><th>ID</th><td><code class="small">${cluster.id}</code></td></tr>` : ''}
                    ${cluster.groupId ? `<tr><th>Group ID</th><td><code class="small">${cluster.groupId}</code></td></tr>` : ''}
                    <tr><th>Status</th><td><span class="badge ${statusClass}">${cluster.stateName || 'UNKNOWN'}</span></td></tr>
                    <tr><th>Cluster Type</th><td>${cluster.clusterType || 'N/A'}</td></tr>
                    <tr><th>MongoDB Version</th><td>${cluster.mongoDBVersion || 'N/A'}</td></tr>
                    ${cluster.mongoDBMajorVersion ? `<tr><th>Major Version</th><td>${cluster.mongoDBMajorVersion}</td></tr>` : ''}
                    ${cluster.createDate ? `<tr><th>Created</th><td>${new Date(cluster.createDate).toLocaleString()}</td></tr>` : ''}
                    ${cluster.replicationFactor ? `<tr><th>Replication Factor</th><td>${cluster.replicationFactor}</td></tr>` : ''}
                    ${cluster.numShards ? `<tr><th>Number of Shards</th><td>${cluster.numShards}</td></tr>` : ''}
                    ${cluster.diskSizeGB ? `<tr><th>Disk Size</th><td>${cluster.diskSizeGB} GB</td></tr>` : ''}
                    ${cluster.paused !== undefined ? `<tr><th>Paused</th><td><span class="badge ${cluster.paused ? 'bg-warning' : 'bg-success'}">${cluster.paused ? 'Yes' : 'No'}</span></td></tr>` : ''}
                    ${cluster.backupEnabled !== undefined ? `<tr><th>Backup Enabled</th><td><span class="badge ${cluster.backupEnabled ? 'bg-success' : 'bg-secondary'}">${cluster.backupEnabled ? 'Yes' : 'No'}</span></td></tr>` : ''}
                    ${cluster.providerBackupEnabled !== undefined ? `<tr><th>Provider Backup</th><td><span class="badge ${cluster.providerBackupEnabled ? 'bg-success' : 'bg-secondary'}">${cluster.providerBackupEnabled ? 'Yes' : 'No'}</span></td></tr>` : ''}
                    ${cluster.pitEnabled !== undefined ? `<tr><th>Point-in-Time Restore</th><td><span class="badge ${cluster.pitEnabled ? 'bg-success' : 'bg-secondary'}">${cluster.pitEnabled ? 'Enabled' : 'Disabled'}</span></td></tr>` : ''}
                    ${snapshots.length > 0 ? `<tr><th>Snapshots</th><td><span class="badge bg-info">${snapshots.length}</span></td></tr>` : ''}
                    ${cluster.encryptionAtRestProvider ? `<tr><th>Encryption Provider</th><td>${cluster.encryptionAtRestProvider}</td></tr>` : ''}
                    ${cluster.versionReleaseSystem ? `<tr><th>Version Release System</th><td>${cluster.versionReleaseSystem}</td></tr>` : ''}
                    ${cluster.rootCertType ? `<tr><th>Root Cert Type</th><td>${cluster.rootCertType}</td></tr>` : ''}
                </tbody>
            </table>
        </div>
    `;

    // Provider settings
    if (cluster.providerSettings) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Provider Settings</h6>
                <table class="table table-sm">
                    <tbody>
                        ${cluster.providerSettings.providerName ? `<tr><th width="40%">Provider</th><td>${cluster.providerSettings.providerName}</td></tr>` : ''}
                        ${cluster.providerSettings.regionName ? `<tr><th>Region</th><td>${cluster.providerSettings.regionName}</td></tr>` : ''}
                        ${cluster.providerSettings.instanceSizeName ? `<tr><th>Instance Size</th><td>${cluster.providerSettings.instanceSizeName}</td></tr>` : ''}
                        ${cluster.providerSettings.backingProviderName ? `<tr><th>Backing Provider</th><td>${cluster.providerSettings.backingProviderName}</td></tr>` : ''}
                        ${cluster.providerSettings.diskIOPS ? `<tr><th>Disk IOPS</th><td>${cluster.providerSettings.diskIOPS}</td></tr>` : ''}
                        ${cluster.providerSettings.encryptEBSVolume !== undefined ? `<tr><th>Encrypted EBS</th><td><span class="badge ${cluster.providerSettings.encryptEBSVolume ? 'bg-success' : 'bg-secondary'}">${cluster.providerSettings.encryptEBSVolume ? 'Yes' : 'No'}</span></td></tr>` : ''}
                        ${cluster.providerSettings.volumeType ? `<tr><th>Volume Type</th><td>${cluster.providerSettings.volumeType}</td></tr>` : ''}
                    </tbody>
                </table>
            </div>
        `;
    }

    // Bi-Connector
    if (cluster.biConnector) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">BI Connector</h6>
                <table class="table table-sm">
                    <tbody>
                        ${cluster.biConnector.enabled !== undefined ? `<tr><th>Enabled</th><td>${cluster.biConnector.enabled ? 'Yes' : 'No'}</td></tr>` : ''}
                        ${cluster.biConnector.readPreference ? `<tr><th>Read Preference</th><td>${cluster.biConnector.readPreference}</td></tr>` : ''}
                    </tbody>
                </table>
            </div>
        `;
    }

    // Labels/Tags
    if (cluster.labels && cluster.labels.length > 0) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Labels</h6>
                ${cluster.labels.map(label =>
                    `<span class="badge bg-secondary me-1">${label.key}: ${label.value}</span>`
                ).join('')}
            </div>
        `;
    }

    if (cluster.tags && cluster.tags.length > 0) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Tags</h6>
                ${cluster.tags.map(tag => `<span class="badge bg-secondary me-1">${tag}</span>`).join('')}
            </div>
        `;
    }

    // Connection strings
    if (cluster.connectionStrings) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Connection Strings</h6>
                <div class="small">
        `;

        if (cluster.connectionStrings.standardSrv) {
            html += `
                <div class="mb-2">
                    <strong>Standard SRV:</strong><br>
                    <code class="small text-break">${formatConnectionString(cluster.connectionStrings.standardSrv)}</code>
                </div>
            `;
        }

        if (cluster.connectionStrings.standard) {
            html += `
                <div class="mb-2">
                    <strong>Standard:</strong><br>
                    <code class="small text-break">${formatConnectionString(cluster.connectionStrings.standard)}</code>
                </div>
            `;
        }

        html += `</div></div>`;
    }

    // Database users
    if (users.length > 0) {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Database Users (${users.length})</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Username</th>
                                <th>Database</th>
                                <th>Roles</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${users.map(user => `
                                <tr>
                                    <td><strong>${user.username}</strong></td>
                                    <td><code class="small">${user.databaseName || 'admin'}</code></td>
                                    <td>
                                        ${user.roles && user.roles.length > 0 ?
                                            user.roles.map(role => `<span class="badge bg-secondary me-1">${role.roleName}</span>`).join('') :
                                            '<span class="text-muted">No roles</span>'
                                        }
                                    </td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    } else {
        html += `
            <div class="mb-3">
                <h6 class="text-muted">Database Users</h6>
                <p class="small text-muted">No database users in this project</p>
            </div>
        `;
    }

        detailsContent.innerHTML = html;

    } catch (err) {
        console.error('Error loading cluster details:', err);
        detailsContent.innerHTML = `
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle"></i>
                Failed to load cluster details: ${err.message}
            </div>
        `;
    }
}

function showLoginModal(connectionString, clusterName) {
    // Reset the form and hide messages
    document.getElementById('loginForm').reset();
    document.getElementById('loginError').classList.add('d-none');
    document.getElementById('loginSuccess').classList.add('d-none');
    document.getElementById('databasesList').classList.add('d-none');

    // Set the connection string and cluster name
    document.getElementById('clusterConnectionString').value = connectionString;
    document.getElementById('clusterName').value = clusterName;

    // Update modal title
    document.getElementById('loginModalLabel').innerHTML = `<i class="bi bi-key"></i> Login to ${clusterName}`;

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('loginModal'));
    modal.show();
}

async function loginToCluster() {
    const loginBtn = document.getElementById('loginBtn');
    const loginError = document.getElementById('loginError');
    const loginSuccess = document.getElementById('loginSuccess');
    const databasesList = document.getElementById('databasesList');

    const connectionString = document.getElementById('clusterConnectionString').value;
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    if (!username || !password) {
        loginError.textContent = 'Please enter username and password';
        loginError.classList.remove('d-none');
        return;
    }

    // Hide previous messages
    loginError.classList.add('d-none');
    loginSuccess.classList.add('d-none');
    databasesList.classList.add('d-none');

    // Show loading state
    loginBtn.disabled = true;
    loginBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Connecting...';

    try {
        const response = await fetch('/api/clusters/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                connection_string: connectionString,
                username: username,
                password: password
            })
        });

        const data = await response.json();

        if (response.ok) {
            // Show success message
            loginSuccess.textContent = `Successfully connected! Found ${data.total} database(s)`;
            loginSuccess.classList.remove('d-none');

            // Populate databases table
            const tbody = document.getElementById('databasesTableBody');
            tbody.innerHTML = '';

            data.databases.forEach(db => {
                const row = document.createElement('tr');
                if (db.error) {
                    row.innerHTML = `
                        <td>${db.name}</td>
                        <td colspan="3" class="text-danger small">${db.error}</td>
                    `;
                } else {
                    row.innerHTML = `
                        <td><strong>${db.name}</strong></td>
                        <td>${db.collections || 0}</td>
                        <td>${db.indexes || 0}</td>
                        <td>${formatBytes(db.sizeOnDisk || 0)}</td>
                    `;
                }
                tbody.appendChild(row);
            });

            // Show databases list
            databasesList.classList.remove('d-none');

        } else {
            loginError.textContent = data.detail || 'Failed to connect to cluster';
            loginError.classList.remove('d-none');
        }

    } catch (err) {
        console.error('Login error:', err);
        loginError.textContent = 'Failed to connect to cluster: ' + err.message;
        loginError.classList.remove('d-none');
    } finally {
        // Reset button state
        loginBtn.disabled = false;
        loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> Login';
    }
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
}

function showAddUserModal(projectId, projectName) {
    // Reset the form and hide messages
    document.getElementById('addUserForm').reset();
    document.getElementById('addUserError').classList.add('d-none');
    document.getElementById('addUserSuccess').classList.add('d-none');

    // Set the project ID
    document.getElementById('addUserProjectId').value = projectId;

    // Update modal title
    document.getElementById('addUserModalLabel').innerHTML =
        `<i class="bi bi-person-plus"></i> Add Database User to ${projectName}`;

    // Show the modal
    const modal = new bootstrap.Modal(document.getElementById('addUserModal'));
    modal.show();
}

async function addDatabaseUser() {
    const addUserBtn = document.getElementById('addUserBtn');
    const addUserError = document.getElementById('addUserError');
    const addUserSuccess = document.getElementById('addUserSuccess');

    const projectId = document.getElementById('addUserProjectId').value;
    const username = document.getElementById('newUsername').value;
    const password = document.getElementById('newPassword').value;
    const roleName = document.getElementById('userRole').value;
    const databaseName = document.getElementById('targetDatabase').value;

    if (!username || !password || !roleName) {
        addUserError.textContent = 'Please fill in all required fields';
        addUserError.classList.remove('d-none');
        return;
    }

    // Hide previous messages
    addUserError.classList.add('d-none');
    addUserSuccess.classList.add('d-none');

    // Show loading state
    addUserBtn.disabled = true;
    addUserBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Adding...';

    try {
        const response = await fetch(`/api/users/${projectId}/database-users`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: username,
                password: password,
                databaseName: databaseName,
                roles: [
                    {
                        roleName: roleName,
                        databaseName: databaseName
                    }
                ]
            })
        });

        const data = await response.json();

        if (response.ok) {
            // Show success message
            addUserSuccess.textContent = `User "${username}" added successfully!`;
            addUserSuccess.classList.remove('d-none');

            // Reload clusters after a short delay to show updated users
            setTimeout(() => {
                bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
                loadClusters();
            }, 1500);

        } else {
            addUserError.textContent = data.detail || 'Failed to add user';
            addUserError.classList.remove('d-none');
        }

    } catch (err) {
        console.error('Add user error:', err);
        addUserError.textContent = 'Failed to add user: ' + err.message;
        addUserError.classList.remove('d-none');
    } finally {
        // Reset button state
        addUserBtn.disabled = false;
        addUserBtn.innerHTML = '<i class="bi bi-person-plus"></i> Add User';
    }
}

// Handle cluster login/logout button action
let currentLogoutCluster = null;

function handleClusterAction(clusterName) {
    const button = document.querySelector(`button[data-cluster="${clusterName}"]`);
    const isLoggedIn = button.classList.contains('btn-outline-danger');

    if (isLoggedIn) {
        // Show logout confirmation
        showLogoutConfirmation(clusterName);
    } else {
        // Navigate to databases page for login
        window.location.href = `/clusters/${encodeURIComponent(clusterName)}/databases`;
    }
}

function showLogoutConfirmation(clusterName) {
    currentLogoutCluster = clusterName;
    document.getElementById('logoutClusterName').textContent = clusterName;

    const logoutModal = new bootstrap.Modal(document.getElementById('logoutModal'));
    logoutModal.show();
}

async function performLogout() {
    if (!currentLogoutCluster) return;

    const button = document.querySelector(`button[data-cluster="${currentLogoutCluster}"]`);

    try {
        // Call logout API
        const response = await fetch('/api/clusters/session/logout', {
            method: 'POST'
        });

        if (response.ok) {
            // Update button to login state
            button.classList.remove('btn-outline-danger');
            button.classList.add('btn-outline-primary');
            button.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> Login';

            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('logoutModal')).hide();

            // Show success message
            console.log(`Logged out from ${currentLogoutCluster}`);
        } else {
            console.error('Logout failed');
        }
    } catch (err) {
        console.error('Logout error:', err);
    }

    currentLogoutCluster = null;
}

async function checkSessionStatus() {
    try {
        const response = await fetch('/api/clusters/session/status');
        const data = await response.json();

        if (data.active && data.cluster_name) {
            // Update the button for the logged-in cluster
            const button = document.querySelector(`button[data-cluster="${data.cluster_name}"]`);
            if (button) {
                button.classList.remove('btn-outline-primary');
                button.classList.add('btn-outline-danger');
                button.innerHTML = '<i class="bi bi-box-arrow-right"></i> Logout';
            }
        }
    } catch (err) {
        console.log('No active session or error checking session');
    }
}

// Region data by cloud provider
const regionsByProvider = {
    'AWS': [
        { value: 'US_EAST_1', label: 'US East (N. Virginia)' },
        { value: 'US_EAST_2', label: 'US East (Ohio)' },
        { value: 'US_WEST_1', label: 'US West (N. California)' },
        { value: 'US_WEST_2', label: 'US West (Oregon)' },
        { value: 'CA_CENTRAL_1', label: 'Canada (Central)' },
        { value: 'EU_WEST_1', label: 'EU (Ireland)' },
        { value: 'EU_WEST_2', label: 'EU (London)' },
        { value: 'EU_CENTRAL_1', label: 'EU (Frankfurt)' },
        { value: 'EU_NORTH_1', label: 'EU (Stockholm)' },
        { value: 'AP_SOUTH_1', label: 'Asia Pacific (Mumbai)' },
        { value: 'AP_SOUTHEAST_1', label: 'Asia Pacific (Singapore)' },
        { value: 'AP_SOUTHEAST_2', label: 'Asia Pacific (Sydney)' },
        { value: 'AP_NORTHEAST_1', label: 'Asia Pacific (Tokyo)' },
        { value: 'SA_EAST_1', label: 'South America (São Paulo)' }
    ],
    'GCP': [
        { value: 'CENTRAL_US', label: 'Iowa (us-central1)' },
        { value: 'EASTERN_US', label: 'South Carolina (us-east4)' },
        { value: 'WESTERN_US', label: 'Oregon (us-west1)' },
        { value: 'WESTERN_EUROPE', label: 'Belgium (europe-west1)' },
        { value: 'EASTERN_ASIA_PACIFIC', label: 'Taiwan (asia-east1)' },
        { value: 'NORTHEASTERN_ASIA_PACIFIC', label: 'Tokyo (asia-northeast1)' },
        { value: 'SOUTHEASTERN_ASIA_PACIFIC', label: 'Singapore (asia-southeast1)' },
        { value: 'AUSTRALIA_SOUTHEAST_1', label: 'Sydney (australia-southeast1)' }
    ],
    'AZURE': [
        { value: 'EAST_US_2', label: 'East US 2 (Virginia)' },
        { value: 'WEST_US_2', label: 'West US 2 (Washington)' },
        { value: 'CENTRAL_US', label: 'Central US (Iowa)' },
        { value: 'NORTH_EUROPE', label: 'North Europe (Ireland)' },
        { value: 'WEST_EUROPE', label: 'West Europe (Netherlands)' },
        { value: 'EAST_ASIA', label: 'East Asia (Hong Kong)' },
        { value: 'SOUTHEAST_ASIA', label: 'Southeast Asia (Singapore)' },
        { value: 'AUSTRALIA_EAST', label: 'Australia East (Sydney)' },
        { value: 'UK_SOUTH', label: 'UK South (London)' }
    ]
};

function updateRegionOptions(provider) {
    const regionSelect = document.getElementById('regionName');
    regionSelect.innerHTML = '<option value="">Select region...</option>';
    const regions = regionsByProvider[provider] || [];
    regions.forEach(region => {
        const option = document.createElement('option');
        option.value = region.value;
        option.textContent = region.label;
        regionSelect.appendChild(option);
    });
    regionSelect.disabled = !provider;
}

// Create Cluster functionality
async function showCreateClusterModal() {
    // Load all projects for the dropdown
    const projectSelect = document.getElementById('createClusterProjectId');
    projectSelect.innerHTML = '<option value="">Loading projects...</option>';

    try {
        // Fetch all organizations
        const orgsResponse = await fetch('/api/organizations/?itemsPerPage=500');
        if (!orgsResponse.ok) throw new Error('Failed to fetch organizations');
        const orgsData = await orgsResponse.json();

        // Fetch all projects for each organization
        const allProjects = [];
        for (let org of orgsData.results || []) {
            const projectsResponse = await fetch(`/api/organizations/${org.id}/projects?itemsPerPage=500`);
            if (projectsResponse.ok) {
                const projectsData = await projectsResponse.json();
                (projectsData.results || []).forEach(project => {
                    allProjects.push({
                        id: project.id,
                        name: project.name,
                        orgName: org.name
                    });
                });
            }
        }

        // Populate project dropdown
        projectSelect.innerHTML = '<option value="">Select project...</option>';
        allProjects.forEach(project => {
            const option = document.createElement('option');
            option.value = project.id;
            option.textContent = `${project.name} (${project.orgName})`;
            projectSelect.appendChild(option);
        });

    } catch (err) {
        console.error('Error loading projects:', err);
        projectSelect.innerHTML = '<option value="">Error loading projects</option>';
    }

    // Reset form and messages
    document.getElementById('createClusterForm').reset();
    document.getElementById('createClusterError').classList.add('d-none');

    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('createClusterModal'));
    modal.show();
}

async function createCluster() {
    const errorDiv = document.getElementById('createClusterError');

    // Get form values
    const projectId = document.getElementById('createClusterProjectId').value;
    const clusterName = document.getElementById('clusterNameInput').value.trim();
    const providerName = document.getElementById('providerName').value;
    const regionName = document.getElementById('regionName').value;
    const instanceSize = document.getElementById('instanceSize').value;
    const mongoDBVersion = document.getElementById('mongoDBVersion').value;
    const clusterType = document.getElementById('clusterType').value;
    const enableBackup = document.getElementById('enableBackup').checked;

    // Validate
    if (!projectId || !clusterName || !providerName || !regionName || !instanceSize || !clusterType) {
        errorDiv.textContent = 'Please fill in all required fields';
        errorDiv.classList.remove('d-none');
        return;
    }

    // Build cluster configuration based on instance type
    let clusterConfig;

    if (instanceSize === 'FLEX') {
        // Flex cluster configuration (replaces Serverless)
        // Note: Flex clusters don't use clusterType field
        clusterConfig = {
            name: clusterName,
            providerSettings: {
                providerName: "FLEX",  // FLEX provider for new Flex clusters
                backingProviderName: providerName,  // AWS, GCP, or AZURE
                regionName: regionName
            }
        };
    } else if (instanceSize === 'M0') {
        // M0 (free tier) uses replicationSpecs format in Atlas API v2
        clusterConfig = {
            name: clusterName,
            clusterType: "REPLICASET",
            replicationSpecs: [
                {
                    regionConfigs: [
                        {
                            providerName: "TENANT",
                            backingProviderName: providerName,
                            regionName: regionName,
                            priority: 7,
                            electableSpecs: {
                                instanceSize: "M0"
                            }
                        }
                    ]
                }
            ]
        };

        if (mongoDBVersion) {
            clusterConfig.mongoDBMajorVersion = mongoDBVersion;
        }
    } else {
        // M10+ dedicated clusters use replicationSpecs
        clusterConfig = {
            name: clusterName,
            clusterType: clusterType,
            replicationSpecs: [
                {
                    regionConfigs: [
                        {
                            providerName: providerName,
                            regionName: regionName,
                            priority: 7,
                            electableSpecs: {
                                instanceSize: instanceSize,
                                nodeCount: 3  // Standard 3-node replica set
                            }
                        }
                    ]
                }
            ]
        };

        if (enableBackup) {
            clusterConfig.providerBackupEnabled = true;
        }
    }

    if (mongoDBVersion && instanceSize !== 'FLEX') {
        clusterConfig.mongoDBMajorVersion = mongoDBVersion;
    }

    // Close the modal immediately
    bootstrap.Modal.getInstance(document.getElementById('createClusterModal')).hide();

    try {
        console.log('Creating cluster with config:', JSON.stringify(clusterConfig, null, 2));

        // Use different endpoint for Flex clusters (as of January 2025)
        const endpoint = instanceSize === 'FLEX'
            ? `/api/clusters/${projectId}/flex`
            : `/api/clusters/${projectId}`;

        console.log('Using endpoint:', endpoint);

        const response = await fetch(endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(clusterConfig)
        });

        if (!response.ok) {
            let errorMessage = `Failed to create cluster (${response.status})`;
            try {
                const errorData = await response.json();
                console.error('Cluster creation error:', errorData);
                if (errorData.detail) {
                    errorMessage = errorData.detail;
                } else if (errorData.error) {
                    errorMessage = errorData.error;
                } else if (errorData.message) {
                    errorMessage = errorData.message;
                }
            } catch (e) {
                console.error('Error parsing error response:', e);
            }

            // Show error in UI
            errorDiv.textContent = errorMessage;
            errorDiv.classList.remove('d-none');
            // Reopen the modal to show the error
            bootstrap.Modal.getInstance(document.getElementById('createClusterModal')).show();
            return;
        }

        const result = await response.json();
        console.log('Cluster creation queued:', result);

        // Operation is now queued in backend, SSE stream will show progress
        // Optionally show a brief notification
        console.log(`Operation ${result.operation_id} queued: ${result.message}`);

    } catch (err) {
        console.error('Error creating cluster:', err);
        errorDiv.textContent = err.message || 'Failed to create cluster';
        errorDiv.classList.remove('d-none');
        // Reopen the modal to show the error
        bootstrap.Modal.getInstance(document.getElementById('createClusterModal')).show();
    }
}

// Delete Cluster functionality
let deleteClusterData = { name: '', projectId: '', providerName: '', instanceSizeName: '' };

function showDeleteClusterConfirmation(clusterName, projectId, providerName, instanceSizeName) {
    deleteClusterData = {
        name: clusterName,
        projectId: projectId,
        providerName: providerName || '',
        instanceSizeName: instanceSizeName || ''
    };

    console.log('Showing delete confirmation for cluster:', deleteClusterData);

    document.getElementById('deleteClusterName').textContent = clusterName;
    document.getElementById('confirmClusterName').value = '';
    document.getElementById('deleteClusterError').classList.add('d-none');
    document.getElementById('confirmDeleteClusterBtn').disabled = true;

    const modal = new bootstrap.Modal(document.getElementById('deleteClusterModal'));
    modal.show();
}

async function deleteCluster() {
    const errorDiv = document.getElementById('deleteClusterError');
    const confirmInput = document.getElementById('confirmClusterName');

    if (confirmInput.value !== deleteClusterData.name) {
        errorDiv.textContent = 'Cluster name does not match. Please type the exact cluster name.';
        errorDiv.classList.remove('d-none');
        return;
    }

    // Hide error
    errorDiv.classList.add('d-none');

    // Close the modal immediately
    bootstrap.Modal.getInstance(document.getElementById('deleteClusterModal')).hide();

    try {
        console.log('Deleting cluster:', deleteClusterData);

        const response = await fetch(`/api/clusters/${deleteClusterData.projectId}/${deleteClusterData.name}`, {
            method: 'DELETE'
        });

        if (!response.ok) {
            const errorData = await response.json();
            const errorMessage = errorData.detail || `Failed to delete cluster (${response.status})`;

            // Show error in UI
            errorDiv.textContent = errorMessage;
            errorDiv.classList.remove('d-none');
            // Reopen the modal to show the error
            bootstrap.Modal.getInstance(document.getElementById('deleteClusterModal')).show();
            return;
        }

        const result = await response.json();
        console.log('Cluster deletion queued:', result);

        // Operation is now queued in backend, SSE stream will show progress
        console.log(`Operation ${result.operation_id} queued: ${result.message}`);

    } catch (err) {
        console.error('Error deleting cluster:', err);
        errorDiv.textContent = err.message || 'Failed to delete cluster';
        errorDiv.classList.remove('d-none');
        // Reopen the modal to show the error
        bootstrap.Modal.getInstance(document.getElementById('deleteClusterModal')).show();
    }
}

// Add event listeners
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('loginBtn').addEventListener('click', loginToCluster);
    document.getElementById('addUserBtn').addEventListener('click', addDatabaseUser);
    document.getElementById('confirmLogoutBtn').addEventListener('click', performLogout);
    document.getElementById('createClusterBtn').addEventListener('click', showCreateClusterModal);
    document.getElementById('submitCreateClusterBtn').addEventListener('click', createCluster);
    document.getElementById('confirmDeleteClusterBtn').addEventListener('click', deleteCluster);

    // Check session status on page load
    checkSessionStatus();

    // Allow Enter key to submit login
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();
        loginToCluster();
    });

    // Allow Enter key to submit add user
    document.getElementById('addUserForm').addEventListener('submit', function(e) {
        e.preventDefault();
        addDatabaseUser();
    });

    // Allow Enter key to submit create cluster
    document.getElementById('createClusterForm').addEventListener('submit', function(e) {
        e.preventDefault();
        createCluster();
    });

    // Provider change event for region updates
    const providerSelect = document.getElementById('providerName');
    if (providerSelect) {
        providerSelect.addEventListener('change', function() {
            updateRegionOptions(this.value);
        });
    }

    // Cluster name confirmation for deletion
    const confirmInput = document.getElementById('confirmClusterName');
    const deleteBtn = document.getElementById('confirmDeleteClusterBtn');
    if (confirmInput) {
        confirmInput.addEventListener('input', function() {
            if (this.value === deleteClusterData.name) {
                deleteBtn.disabled = false;
            } else {
                deleteBtn.disabled = true;
            }
        });
    }

    // Reset modals when closed
    const createClusterModal = document.getElementById('createClusterModal');
    createClusterModal.addEventListener('hidden.bs.modal', function () {
        document.getElementById('createClusterForm').reset();
        document.getElementById('createClusterForm').style.display = 'block';
        document.getElementById('createClusterError').classList.add('d-none');
        document.getElementById('regionName').disabled = true;
    });

    const deleteClusterModal = document.getElementById('deleteClusterModal');
    deleteClusterModal.addEventListener('hidden.bs.modal', function () {
        document.getElementById('confirmClusterName').value = '';
        document.getElementById('deleteClusterError').classList.add('d-none');
        document.getElementById('confirmDeleteClusterBtn').disabled = true;
        deleteClusterData = { name: '', projectId: '', providerName: '', instanceSizeName: '' };
    });
});
</script>
{% endblock %}
