{% extends "base.html" %}

{% block title %}Databases - {{ cluster_name }} - AtlasUI{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="mb-2">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/organizations">Organizations</a></li>
                <li class="breadcrumb-item"><span id="orgNameBreadcrumb">...</span></li>
                <li class="breadcrumb-item"><span id="projectNameBreadcrumb">...</span></li>
                <li class="breadcrumb-item active" aria-current="page"><span id="clusterNameBreadcrumb">...</span></li>
            </ol>
        </nav>

        <div class="d-flex justify-content-between align-items-center mb-2">
            <h1><i class="bi bi-database"></i> Databases - <span id="clusterNameDisplay">{{ cluster_name }}</span></h1>
            <div>
                <button class="btn btn-outline-success btn-sm me-2" id="showRegisterUserBtn">
                    <i class="bi bi-person-plus"></i> Register User
                </button>
                <button class="btn btn-outline-primary btn-sm me-2" id="showLoginBtn">
                    <i class="bi bi-key"></i> Login
                </button>
                <button class="btn btn-outline-info btn-sm me-2" id="openInCompassBtn" title="Open this cluster in MongoDB Compass">
                    <i class="bi bi-compass"></i> Open in Compass
                </button>
                <button class="btn btn-outline-secondary btn-sm" onclick="window.history.back()">
                    <i class="bi bi-arrow-left"></i> Back
                </button>
            </div>
        </div>

        <script>
            const CLUSTER_NAME = "{{ cluster_name }}";
        </script>

        <!-- Databases List (shown after successful login) -->
        <div id="databasesSection" class="d-none">
            <div class="alert alert-success mb-3">
                <i class="bi bi-check-circle"></i> Successfully connected! Found <span id="dbCount">0</span> database(s)
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Database Name</th>
                            <th>Collections</th>
                            <th>Indexes</th>
                            <th>Size on Disk</th>
                        </tr>
                    </thead>
                    <tbody id="databasesTableBody">
                    </tbody>
                </table>
            </div>
        </div>

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

        <!-- Placeholder when not logged in -->
        <div id="notLoggedIn" class="text-center my-5">
            <i class="bi bi-key" style="font-size: 4rem; color: #6c757d;"></i>
            <h3 class="mt-3 text-muted">Login Required</h3>
            <p class="text-muted">Please login to view the databases in this cluster</p>
            <button class="btn btn-primary" onclick="showLoginModal()">
                <i class="bi bi-box-arrow-in-right"></i> Login to Cluster
            </button>
        </div>
    </div>
</div>

<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <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">
                <p class="text-muted">Enter your database credentials to view the databases in <strong>{{ cluster_name }}</strong>.</p>

                <div id="loginError" class="alert alert-danger d-none"></div>

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

                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" required autocomplete="username" autofocus>
                    </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>
            </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="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> Register 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> Register User
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Compass Download Modal -->
<div class="modal fade" id="compassDownloadModal" tabindex="-1" aria-labelledby="compassDownloadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="compassDownloadModalLabel">
                    <i class="bi bi-compass"></i> MongoDB Compass
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <i class="bi bi-compass" style="font-size: 4rem; color: #00684A;"></i>
                </div>

                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>Compass not detected?</strong> If MongoDB Compass didn't open, you may need to install it first.
                </div>

                <p>MongoDB Compass is a free GUI for MongoDB that allows you to explore and manipulate your data visually.</p>

                <h6 class="mt-3 mb-2">Download MongoDB Compass:</h6>
                <div class="list-group">
                    <a href="https://www.mongodb.com/try/download/compass" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center">
                        <i class="bi bi-download me-2"></i>
                        <div>
                            <strong>Download from MongoDB</strong>
                            <small class="d-block text-muted">Official download page for all platforms</small>
                        </div>
                        <i class="bi bi-box-arrow-up-right ms-auto"></i>
                    </a>
                </div>

                <h6 class="mt-4 mb-2">Connection String:</h6>
                <div class="input-group">
                    <input type="text" class="form-control form-control-sm" id="compassConnectionString" readonly>
                    <button class="btn btn-outline-secondary btn-sm" type="button" id="copyConnectionStringBtn" title="Copy to clipboard">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
                <small class="text-muted">Copy this connection string to paste into Compass manually.</small>

                <div class="alert alert-warning mt-3 mb-0">
                    <i class="bi bi-shield-lock"></i>
                    <strong>Note:</strong> You'll need to enter your database username and password when connecting in Compass.
                </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="retryCompassBtn">
                    <i class="bi bi-arrow-repeat"></i> Try Opening Compass Again
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

<script>
let clusterData = null;
let loginModal = null;

document.addEventListener('DOMContentLoaded', function() {
    // Initialize modal
    loginModal = new bootstrap.Modal(document.getElementById('loginModal'));

    // Load cluster info first
    loadClusterInfo().then(() => {
        // Check if we have an active session
        checkActiveSession();
    });

    // Event listeners
    document.getElementById('loginBtn').addEventListener('click', loginToCluster);
    document.getElementById('showLoginBtn').addEventListener('click', showLoginModal);

    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();
        loginToCluster();
    });
});

async function checkActiveSession() {
    try {
        // Check if there's an active session
        const response = await fetch('/api/clusters/session/status');
        const sessionData = await response.json();

        if (sessionData.active && sessionData.cluster_name === CLUSTER_NAME) {
            // We have an active session for this cluster
            console.log('Active session found, loading databases...');
            await loadDatabasesFromSession();
        } else {
            // No active session, show login prompt
            showLoginModal();
        }
    } catch (err) {
        console.error('Error checking session:', err);
        // On error, show login modal
        showLoginModal();
    }
}

async function loadDatabasesFromSession() {
    const notLoggedIn = document.getElementById('notLoggedIn');
    const databasesSection = document.getElementById('databasesSection');
    const loadingIndicator = document.getElementById('loadingIndicator');

    // Show loading
    notLoggedIn.classList.add('d-none');
    loadingIndicator.classList.remove('d-none');

    try {
        // Fetch databases using the active session
        const response = await fetch('/api/clusters/session/databases');

        if (!response.ok) {
            // Session invalid or expired, show login
            loadingIndicator.classList.add('d-none');
            notLoggedIn.classList.remove('d-none');
            showLoginModal();
            return;
        }

        const data = await response.json();

        // Hide loading
        loadingIndicator.classList.add('d-none');

        // Update database count
        document.getElementById('dbCount').textContent = data.total;

        // 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><strong>${db.name}</strong></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 section
        databasesSection.classList.remove('d-none');

    } catch (err) {
        console.error('Error loading databases from session:', err);
        loadingIndicator.classList.add('d-none');
        notLoggedIn.classList.remove('d-none');
        showLoginModal();
    }
}

function showLoginModal() {
    // Reset form
    document.getElementById('loginForm').reset();
    document.getElementById('loginError').classList.add('d-none');

    // Show modal
    loginModal.show();

    // Focus on username field after modal is shown
    document.getElementById('loginModal').addEventListener('shown.bs.modal', function () {
        document.getElementById('username').focus();
    }, { once: true });
}

async function loadClusterInfo() {
    try {
        // Fetch all clusters to find the one matching CLUSTER_NAME
        const orgsResponse = await fetch('/api/organizations/?itemsPerPage=500');
        const orgsData = await orgsResponse.json();

        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();

                for (let project of projectsData.results || []) {
                    const clustersResponse = await fetch(`/api/clusters/${project.id}?itemsPerPage=500`);
                    if (clustersResponse.ok) {
                        const clustersData = await clustersResponse.json();
                        const cluster = (clustersData.results || []).find(c => c.name === CLUSTER_NAME);

                        if (cluster) {
                            clusterData = cluster;
                            clusterData.orgName = org.name;
                            clusterData.orgId = org.id;
                            clusterData.projectName = project.name;
                            clusterData.projectId = project.id;

                            document.getElementById('clusterConnectionString').value = cluster.connectionStrings?.standardSrv || '';
                            document.getElementById('addUserProjectId').value = project.id;

                            // Update breadcrumbs
                            document.getElementById('orgNameBreadcrumb').innerHTML =
                                `<a href="/organizations/${encodeURIComponent(org.name)}/projects">${org.name}</a>`;
                            document.getElementById('projectNameBreadcrumb').innerHTML =
                                `<a href="/projects/${encodeURIComponent(project.name)}">${project.name}</a>`;
                            document.getElementById('clusterNameBreadcrumb').textContent = CLUSTER_NAME;

                            return;
                        }
                    }
                }
            }
        }

        // If we couldn't find the cluster, show an error
        if (!clusterData) {
            document.getElementById('loginError').textContent = `Cluster "${CLUSTER_NAME}" not found`;
            document.getElementById('loginError').classList.remove('d-none');
        }
    } catch (err) {
        console.error('Error loading cluster info:', err);
        document.getElementById('loginError').textContent = 'Failed to load cluster information';
        document.getElementById('loginError').classList.remove('d-none');
    }
}

async function loginToCluster() {
    const loginBtn = document.getElementById('loginBtn');
    const loginError = document.getElementById('loginError');
    const notLoggedIn = document.getElementById('notLoggedIn');
    const databasesSection = document.getElementById('databasesSection');
    const loadingIndicator = document.getElementById('loadingIndicator');

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

    if (!connectionString) {
        loginError.textContent = 'Cluster connection string not found';
        loginError.classList.remove('d-none');
        return;
    }

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

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

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

    // Hide modal and show loading
    loginModal.hide();
    notLoggedIn.classList.add('d-none');
    loadingIndicator.classList.remove('d-none');

    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) {
            // Hide loading
            loadingIndicator.classList.add('d-none');

            // Update database count
            document.getElementById('dbCount').textContent = data.total;

            // 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><strong>${db.name}</strong></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 section
            databasesSection.classList.remove('d-none');

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

    } catch (err) {
        console.error('Login error:', err);
        loadingIndicator.classList.add('d-none');
        notLoggedIn.classList.remove('d-none');
        loginError.textContent = 'Failed to connect to cluster: ' + err.message;
        loginError.classList.remove('d-none');
        loginModal.show();
    } 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 showRegisterUserModal() {
    // Reset the form and hide messages
    document.getElementById('addUserForm').reset();
    document.getElementById('addUserError').classList.add('d-none');
    document.getElementById('addUserSuccess').classList.add('d-none');

    // Update modal title
    document.getElementById('addUserModalLabel').innerHTML =
        `<i class="bi bi-person-plus"></i> Register Database User for ${clusterData?.projectName || 'Project'}`;

    // 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! You can now use these credentials to login.`;
            addUserSuccess.classList.remove('d-none');

            // Hide modal after a short delay
            setTimeout(() => {
                bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
            }, 2000);

        } 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> Register User';
    }
}

// Add event listeners for Register User functionality
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('showRegisterUserBtn').addEventListener('click', showRegisterUserModal);
    document.getElementById('addUserBtn').addEventListener('click', addDatabaseUser);

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

    // Compass button event listeners
    document.getElementById('openInCompassBtn').addEventListener('click', openInCompass);
    document.getElementById('retryCompassBtn').addEventListener('click', function() {
        openInCompass(true);
    });
    document.getElementById('copyConnectionStringBtn').addEventListener('click', copyConnectionString);
});

let compassDownloadModal = null;

/**
 * Open the cluster in MongoDB Compass using the mongodb:// URL protocol.
 * MongoDB Compass registers as a handler for mongodb:// and mongodb+srv:// URLs.
 * If Compass is not installed, show the download modal.
 *
 * @param {boolean} isRetry - Whether this is a retry attempt (skip the fallback modal)
 */
function openInCompass(isRetry = false) {
    const connectionString = document.getElementById('clusterConnectionString').value;

    if (!connectionString) {
        alert('Connection string not available. Please wait for cluster info to load.');
        return;
    }

    // Update the connection string in the modal
    document.getElementById('compassConnectionString').value = connectionString;

    // Try to open MongoDB Compass using the connection string URL
    // Compass registers as a protocol handler for mongodb:// and mongodb+srv:// URLs
    const compassUrl = connectionString;

    // Create a hidden iframe to attempt to open the URL
    // This is more reliable than window.location for protocol handlers
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    // Track if the protocol handler worked
    let protocolHandled = false;

    // Set up a blur event listener - if the window loses focus, Compass likely opened
    const blurHandler = function() {
        protocolHandled = true;
        window.removeEventListener('blur', blurHandler);
    };
    window.addEventListener('blur', blurHandler);

    // Try to open the connection string URL
    try {
        iframe.contentWindow.location.href = compassUrl;
    } catch (e) {
        console.log('Could not open Compass via iframe:', e);
    }

    // Also try with window.location as a fallback
    // Use a timeout to give the iframe method a chance to work first
    setTimeout(() => {
        if (!protocolHandled) {
            // Try window.open as well (some browsers block iframe navigation)
            const newWindow = window.open(compassUrl, '_blank');

            // If window.open returns null, it was blocked or failed
            if (newWindow) {
                // Window opened - Compass might be handling it
                // Close the window after a short delay if it's still open
                setTimeout(() => {
                    try {
                        if (newWindow && !newWindow.closed) {
                            newWindow.close();
                        }
                    } catch (e) {
                        // Cross-origin issues - that's okay
                    }
                }, 500);
            }
        }
    }, 100);

    // Show the download modal after a delay if this is not a retry
    // This gives the user info even if Compass opened successfully
    if (!isRetry) {
        setTimeout(() => {
            // Clean up
            window.removeEventListener('blur', blurHandler);
            if (iframe.parentNode) {
                document.body.removeChild(iframe);
            }

            // Show the help modal - it has useful info regardless
            if (!compassDownloadModal) {
                compassDownloadModal = new bootstrap.Modal(document.getElementById('compassDownloadModal'));
            }
            compassDownloadModal.show();
        }, 1500);
    } else {
        // Clean up for retry
        setTimeout(() => {
            window.removeEventListener('blur', blurHandler);
            if (iframe.parentNode) {
                document.body.removeChild(iframe);
            }
        }, 2000);
    }
}

/**
 * Copy the connection string to clipboard
 */
async function copyConnectionString() {
    const connectionString = document.getElementById('compassConnectionString').value;
    const copyBtn = document.getElementById('copyConnectionStringBtn');

    try {
        await navigator.clipboard.writeText(connectionString);

        // Show success feedback
        const originalHtml = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="bi bi-check"></i>';
        copyBtn.classList.remove('btn-outline-secondary');
        copyBtn.classList.add('btn-success');

        setTimeout(() => {
            copyBtn.innerHTML = originalHtml;
            copyBtn.classList.remove('btn-success');
            copyBtn.classList.add('btn-outline-secondary');
        }, 2000);
    } catch (err) {
        console.error('Failed to copy:', err);

        // Fallback: select the text
        const input = document.getElementById('compassConnectionString');
        input.select();
        input.setSelectionRange(0, 99999);

        alert('Press Ctrl+C (or Cmd+C on Mac) to copy the connection string.');
    }
}
</script>
{% endblock %}