{% extends "base.html" %}
{% set active_page = 'clusters' %}

{% block title %}Clusters - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="page-header d-flex justify-between align-center flex-wrap gap-lg">
        <div>
            <h1 class="page-title">ParallelCluster Instances</h1>
            <p class="page-subtitle">Running AWS HPC clusters across configured regions</p>
        </div>
        <div class="page-actions" style="margin-top: 0;">
            <button class="btn btn-outline" onclick="refreshClusters()" id="refresh-btn">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>
    </div>

    {% if error %}
    <div class="alert alert-error mb-lg">
        <i class="fas fa-exclamation-triangle"></i>
        <span>{{ error }}</span>
    </div>
    {% endif %}

    <!-- Summary Stats -->
    <div class="grid grid-4 mb-xl">
        <div class="stat-card">
            <div class="card-icon primary">
                <i class="fas fa-server"></i>
            </div>
            <div>
                <div class="stat-value" id="total-clusters">{{ clusters | length }}</div>
                <div class="stat-label">Total Clusters</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="card-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <div>
                <div class="stat-value" id="running-clusters">{{ clusters | selectattr('compute_fleet_status', 'equalto', 'RUNNING') | list | length }}</div>
                <div class="stat-label">Fleet Running</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="card-icon info">
                <i class="fas fa-globe"></i>
            </div>
            <div>
                <div class="stat-value" id="total-regions">{{ regions | length }}</div>
                <div class="stat-label">Regions Scanned</div>
            </div>
        </div>

        <div class="stat-card">
            <div class="card-icon warning">
                <i class="fas fa-microchip"></i>
            </div>
            <div>
                <div class="stat-value" id="headnodes-running">{{ clusters | selectattr('head_node') | selectattr('head_node.state', 'equalto', 'running') | list | length }}</div>
                <div class="stat-label">Headnodes Active</div>
            </div>
        </div>
    </div>

    <!-- Regions Info -->
    <div class="mb-lg text-muted" style="font-size: 0.875rem;">
        <i class="fas fa-info-circle"></i>
        Scanning regions: <strong>{{ regions | join(', ') }}</strong>
    </div>

    <!-- Clusters Grid -->
    {% if clusters %}
    <div class="grid grid-2 mb-xl" id="clusters-grid">
        {% for cluster in clusters %}
        <div class="card cluster-card" data-status="{{ cluster.cluster_status }}" data-region="{{ cluster.region }}">
            <div class="card-header d-flex justify-between align-center">
                <div>
                    <h3 class="card-title" style="margin-bottom: 0.25rem;">
                        <i class="fas fa-server"></i> {{ cluster.cluster_name }}
                    </h3>
                    <span class="badge badge-sm" style="background: var(--color-bg-secondary);">{{ cluster.region }}</span>
                </div>
                <div class="d-flex gap-sm">
                    {% if is_admin %}
                    <button
                        class="btn btn-sm btn-danger"
                        data-testid="delete-cluster-btn"
                        data-cluster-name="{{ cluster.cluster_name }}"
                        data-region="{{ cluster.region }}"
                        onclick="deleteCluster(this)"
                        title="Delete cluster (admin-only)"
                    >
                        <i class="fas fa-trash"></i>
                    </button>
                    {% endif %}
                    {% set status_class = 'success' if cluster.cluster_status == 'CREATE_COMPLETE' else 'warning' if 'IN_PROGRESS' in cluster.cluster_status else 'error' if 'FAILED' in cluster.cluster_status else 'secondary' %}
                    <span class="badge badge-{{ status_class }}">{{ cluster.cluster_status }}</span>
                </div>
            </div>

            <div class="card-body">
                <!-- Head Node Info -->
                {% if cluster.head_node %}
                <div class="mb-md">
                    <h4 class="text-sm text-muted mb-sm">Head Node</h4>
                    <div class="d-flex flex-wrap gap-md">
                        <div>
                            <span class="text-muted text-xs">Instance Type</span>
                            <div class="text-sm"><code>{{ cluster.head_node.instance_type }}</code></div>
                        </div>
                        <div>
                            <span class="text-muted text-xs">State</span>
                            <div class="text-sm">
                                {% set node_status = 'success' if cluster.head_node.state == 'running' else 'warning' if cluster.head_node.state == 'pending' else 'error' %}
                                <span class="badge badge-sm badge-{{ node_status }}">{{ cluster.head_node.state }}</span>
                            </div>
                        </div>
                        {% if is_admin and cluster.head_node.public_ip %}
                        <div>
                            <span class="text-muted text-xs">Public IP</span>
                            <div class="text-sm"><code>{{ cluster.head_node.public_ip }}</code></div>
                        </div>
                        {% endif %}
                        {% if is_admin and cluster.head_node.private_ip %}
                        <div>
                            <span class="text-muted text-xs">Private IP</span>
                            <div class="text-sm"><code>{{ cluster.head_node.private_ip }}</code></div>
                        </div>
                        {% endif %}
                    </div>
                    {% if is_admin and cluster.head_node.public_ip and cluster.head_node.state == 'running' %}
                    <div class="mt-sm">
                        <span class="text-muted text-xs">SSH Command</span>
                        <div class="ssh-cmd-wrapper d-flex align-center gap-sm">
                            <code class="ssh-cmd" id="ssh-cmd-{{ loop.index }}">ssh -i ~/.ssh/lsmc-omics-{{ cluster.region }}.pem ubuntu@{{ cluster.head_node.public_ip }}</code>
                            <button class="btn btn-sm btn-ghost" onclick="copySSHCommand('ssh-cmd-{{ loop.index }}')" title="Copy to clipboard">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endif %}

                <!-- Cluster Info (Admin only) -->
                {% if is_admin and cluster.budget_info %}
                <div class="mb-md budget-section">
                    <h4 class="text-sm text-muted mb-sm"><i class="fas fa-server"></i> Cluster Info</h4>
                    {% if cluster.budget_info.error %}
                    <div class="budget-error text-xs text-muted">
                        <i class="fas fa-exclamation-triangle"></i> {{ cluster.budget_info.error }}
                    </div>
                    {% else %}
                    <div class="budget-grid">
                        <div class="budget-item">
                            <span class="text-muted text-xs">Project</span>
                            <div class="text-sm"><code>{{ cluster.budget_info.project_name or 'N/A' }}</code></div>
                        </div>
                        <div class="budget-item">
                            <span class="text-muted text-xs">Region</span>
                            <div class="text-sm"><code>{{ cluster.budget_info.region or 'N/A' }}</code></div>
                        </div>
                        {% if cluster.budget_info.reference_bucket %}
                        <div class="budget-item" style="grid-column: span 2;">
                            <span class="text-muted text-xs">Reference Bucket</span>
                            <div class="text-sm"><code>s3://{{ cluster.budget_info.reference_bucket }}</code></div>
                        </div>
                        {% endif %}
                    </div>
                    <h5 class="text-xs text-muted mb-xs mt-sm"><i class="fas fa-dollar-sign"></i> AWS Budget</h5>
                    <div class="text-xs text-muted mb-xs">
                        Admin-only. AWS Budgets are separate from customer Cost Centers (chargeback tags).
                    </div>
                    <div class="budget-grid">
                        <div class="budget-item">
                            <span class="text-muted text-xs">Total Budget</span>
                            <div class="text-sm budget-value">${{ "%.2f"|format(cluster.budget_info.total_budget or 0) }}</div>
                        </div>
                        <div class="budget-item">
                            <span class="text-muted text-xs">Used</span>
                            <div class="text-sm budget-value">${{ "%.2f"|format(cluster.budget_info.used_budget or 0) }}</div>
                        </div>
                        <div class="budget-item">
                            <span class="text-muted text-xs">% Used</span>
                            {% set pct = cluster.budget_info.percent_used or 0 %}
                            {% set pct_class = 'success' if pct < 80 else 'warning' if pct < 100 else 'error' %}
                            <div class="text-sm">
                                <span class="badge badge-sm badge-{{ pct_class }}">{{ "%.1f"|format(pct) }}%</span>
                            </div>
                        </div>
                    </div>
                    {% if cluster.budget_info.fetched_at %}
                    <div class="text-xs text-muted mt-xs">Updated: {{ cluster.budget_info.fetched_at[:19] }}</div>
                    {% endif %}
                    {% if cluster.budget_info.ssh_command %}
                    <details class="mt-xs">
                        <summary class="text-xs text-muted cursor-pointer">SSH Command</summary>
                        <code class="text-xs d-block mt-xs" style="word-break: break-all; background: var(--bg-tertiary); padding: 0.5rem; border-radius: 4px;">{{ cluster.budget_info.ssh_command }}</code>
                    </details>
                    {% endif %}
                    {% endif %}
                </div>
                {% endif %}

                <!-- Job Queue Info (Admin only) -->
                {% if is_admin and cluster.job_queue %}
                <div class="mb-md job-queue-section">
                    <h4 class="text-sm text-muted mb-sm"><i class="fas fa-tasks"></i> Slurm Job Queue</h4>
                    {% if cluster.job_queue.error %}
                    <div class="queue-error text-xs text-muted">
                        <i class="fas fa-exclamation-triangle"></i> {{ cluster.job_queue.error }}
                    </div>
                    {% else %}
                    <div class="job-queue-summary d-flex flex-wrap gap-md">
                        <div class="queue-stat">
                            <span class="queue-count">{{ cluster.job_queue.total_jobs }}</span>
                            <span class="queue-label">Total</span>
                        </div>
                        <div class="queue-stat queue-running">
                            <span class="queue-count">{{ cluster.job_queue.running_jobs }}</span>
                            <span class="queue-label">Running</span>
                        </div>
                        <div class="queue-stat queue-pending">
                            <span class="queue-count">{{ cluster.job_queue.pending_jobs }}</span>
                            <span class="queue-label">Pending</span>
                        </div>
                        <div class="queue-stat queue-configuring">
                            <span class="queue-count">{{ cluster.job_queue.configuring_jobs }}</span>
                            <span class="queue-label">Config</span>
                        </div>
                        <div class="queue-stat">
                            <span class="queue-count">{{ cluster.job_queue.total_cpus }}</span>
                            <span class="queue-label">CPUs</span>
                        </div>
                    </div>
                    {% if cluster.job_queue.jobs %}
                    <div class="job-list mt-sm">
                        <table class="job-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>State</th>
                                    <th>CPUs</th>
                                    <th>Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for job in cluster.job_queue.jobs[:5] %}
                                <tr>
                                    <td><code>{{ job.job_id }}</code></td>
                                    <td class="job-name" title="{{ job.name }}">{{ job.name[:20] }}{% if job.name|length > 20 %}...{% endif %}</td>
                                    <td>
                                        {% set job_state_class = 'success' if job.state == 'RUNNING' else 'warning' if job.state == 'PENDING' else 'info' if job.state == 'CONFIGURING' else 'secondary' %}
                                        <span class="badge badge-xs badge-{{ job_state_class }}">{{ job.state_short }}</span>
                                    </td>
                                    <td>{{ job.cpus }}</td>
                                    <td>{{ job.time_used }}</td>
                                </tr>
                                {% endfor %}
                                {% if cluster.job_queue.jobs|length > 5 %}
                                {% for job in cluster.job_queue.jobs[5:] %}
                                <tr class="job-row-hidden" data-cluster="{{ cluster.name }}" style="display: none;">
                                    <td><code>{{ job.job_id }}</code></td>
                                    <td class="job-name" title="{{ job.name }}">{{ job.name[:20] }}{% if job.name|length > 20 %}...{% endif %}</td>
                                    <td>
                                        {% set job_state_class = 'success' if job.state == 'RUNNING' else 'warning' if job.state == 'PENDING' else 'info' if job.state == 'CONFIGURING' else 'secondary' %}
                                        <span class="badge badge-xs badge-{{ job_state_class }}">{{ job.state_short }}</span>
                                    </td>
                                    <td>{{ job.cpus }}</td>
                                    <td>{{ job.time_used }}</td>
                                </tr>
                                {% endfor %}
                                {% endif %}
                            </tbody>
                        </table>
                        {% if cluster.job_queue.jobs|length > 5 %}
                        <div class="text-xs text-muted mt-xs expand-jobs-link" data-cluster="{{ cluster.name }}" style="cursor: pointer;">
                            <span class="expand-text">+ {{ cluster.job_queue.jobs|length - 5 }} more jobs</span>
                            <span class="collapse-text" style="display: none;">− Show fewer</span>
                        </div>
                        {% endif %}
                    </div>
                    {% elif cluster.job_queue.total_jobs == 0 %}
                    <div class="text-xs text-muted">No jobs in queue</div>
                    {% endif %}
                    {% if cluster.job_queue.fetched_at %}
                    <div class="text-xs text-muted mt-xs">Updated: {{ cluster.job_queue.fetched_at[:19] }}</div>
                    {% endif %}
                    {% if cluster.job_queue.ssh_command %}
                    <details class="mt-xs">
                        <summary class="text-xs text-muted cursor-pointer">SSH Command</summary>
                        <code class="text-xs d-block mt-xs" style="word-break: break-all; background: var(--bg-tertiary); padding: 0.5rem; border-radius: 4px;">{{ cluster.job_queue.ssh_command }}</code>
                    </details>
                    {% endif %}
                    {% endif %}
                </div>
                {% endif %}

                <!-- Fleet & Scheduler -->
                <div class="mb-md">
                    <div class="d-flex flex-wrap gap-lg">
                        <div>
                            <span class="text-muted text-xs">Compute Fleet</span>
                            <div class="text-sm">
                                {% set fleet_status = 'success' if cluster.compute_fleet_status == 'RUNNING' else 'warning' if cluster.compute_fleet_status == 'STOPPED' else 'secondary' %}
                                <span class="badge badge-sm badge-{{ fleet_status }}">{{ cluster.compute_fleet_status }}</span>
                            </div>
                        </div>
                        <div>
                            <span class="text-muted text-xs">Scheduler</span>
                            <div class="text-sm"><code>{{ cluster.scheduler_type }}</code></div>
                        </div>
                        {% if cluster.version %}
                        <div>
                            <span class="text-muted text-xs">PCluster Version</span>
                            <div class="text-sm">{{ cluster.version }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card">
        <div class="card-body text-center py-xl">
            <i class="fas fa-server fa-3x text-muted mb-md"></i>
            <h3>No Clusters Found</h3>
            <p class="text-muted">No ParallelCluster instances found in the configured regions.</p>
            <p class="text-muted text-sm">Regions scanned: {{ regions | join(', ') if regions else 'None configured' }}</p>
        </div>
    </div>
    {% endif %}
</div>

<style>
.cluster-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cluster-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.badge-sm {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
}
.text-xs {
    font-size: 0.75rem;
}
.text-sm {
    font-size: 0.875rem;
}
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.tag-item {
    background: var(--color-bg-secondary);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
}
.ssh-cmd-wrapper {
    margin-top: 0.25rem;
}
.ssh-cmd {
    background: var(--color-bg-secondary);
    padding: 0.35rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    word-break: break-all;
    flex: 1;
}
.btn-ghost {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
}
.btn-ghost:hover {
    color: var(--color-accent);
}
/* Budget Section */
.budget-section {
    background: rgba(0, 217, 166, 0.05);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border-left: 3px solid var(--color-success);
}
.budget-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.budget-item {
    text-align: center;
}
.budget-value {
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}
.budget-error {
    color: var(--color-warning);
}
/* Job Queue Section */
.job-queue-section {
    background: rgba(23, 162, 184, 0.05);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border-left: 3px solid var(--color-info);
}
.job-queue-summary {
    display: flex;
    gap: 1rem;
}
.queue-stat {
    text-align: center;
    padding: 0.35rem 0.75rem;
    background: var(--color-bg-secondary);
    border-radius: 0.35rem;
    min-width: 50px;
}
.queue-stat.queue-running {
    background: rgba(0, 217, 166, 0.2);
}
.queue-stat.queue-pending {
    background: rgba(255, 193, 7, 0.2);
}
.queue-stat.queue-configuring {
    background: rgba(23, 162, 184, 0.2);
}
.queue-count {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}
.queue-label {
    display: block;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-top: 0.15rem;
}
.job-list {
    max-height: 200px;
    overflow-y: auto;
}
.job-table {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}
.job-table th,
.job-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}
.job-table th {
    background: var(--color-bg-secondary);
    font-weight: 600;
    color: var(--color-gray-600);
}
.job-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.badge-xs {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
}
.mt-xs {
    margin-top: 0.25rem;
}
.queue-error {
    color: var(--color-warning);
}
@media (max-width: 768px) {
    .budget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<script>
async function refreshClusters() {
    const btn = document.getElementById('refresh-btn');
    const icon = btn.querySelector('i');

    btn.disabled = true;
    icon.classList.add('fa-spin');

    try {
        const response = await fetch('/api/clusters?refresh=true');
        const data = await response.json();

        if (data.error) {
            showToast('Error refreshing clusters: ' + data.error, 'error');
        } else {
            showToast('Clusters refreshed successfully', 'success');
            // Reload page to show updated data
            setTimeout(() => window.location.reload(), 500);
        }
    } catch (error) {
        showToast('Failed to refresh clusters: ' + error.message, 'error');
    } finally {
        btn.disabled = false;
        icon.classList.remove('fa-spin');
    }
}

async function deleteCluster(buttonEl) {
    if (!buttonEl) return;

    const clusterName = buttonEl.dataset.clusterName;
    const region = buttonEl.dataset.region;

    if (!clusterName || !region) {
        showToast('Missing cluster name/region for deletion', 'error');
        return;
    }

    const cmd = `pcluster delete-cluster --region ${region} -n ${clusterName}`;

    const ok1 = confirm(
        `Delete cluster "${clusterName}" in ${region}?\n\nCommand:\n${cmd}\n\nThis cannot be undone.`
    );
    if (!ok1) return;

    const typed = prompt(`Type the cluster name to confirm deletion:\n\n${clusterName}`);
    if (typed !== clusterName) {
        showToast('Deletion cancelled (name did not match)', 'error');
        return;
    }

    const originalHtml = buttonEl.innerHTML;
    buttonEl.disabled = true;
    buttonEl.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

    try {
        const response = await fetch(
            `/api/clusters/${encodeURIComponent(clusterName)}?region=${encodeURIComponent(region)}`,
            { method: 'DELETE' },
        );
        const data = await response.json().catch(() => ({}));

        if (response.ok && data.success) {
            showToast(`Cluster "${clusterName}" deletion initiated`, 'success');
            setTimeout(() => window.location.reload(), 1500);
        } else {
            const detail = data.detail || data.message || 'Unknown error';
            showToast(`Failed to delete cluster: ${detail}`, 'error');
        }
    } catch (error) {
        showToast(`Failed to delete cluster: ${error.message}`, 'error');
    } finally {
        buttonEl.disabled = false;
        buttonEl.innerHTML = originalHtml;
    }
}

function showToast(message, type) {
    const container = document.getElementById('toast-container');
    if (!container) return;

    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.innerHTML = `
        <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
        <span>${message}</span>
    `;
    container.appendChild(toast);

    setTimeout(() => {
        toast.classList.add('toast-fade-out');
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function copySSHCommand(elementId) {
    const codeEl = document.getElementById(elementId);
    if (!codeEl) return;

    const text = codeEl.textContent;
    navigator.clipboard.writeText(text).then(() => {
        showToast('SSH command copied to clipboard', 'success');
    }).catch(err => {
        // Fallback for older browsers
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showToast('SSH command copied to clipboard', 'success');
    });
}

// Expand/collapse job lists
document.querySelectorAll('.expand-jobs-link').forEach(link => {
    link.addEventListener('click', function() {
        const clusterName = this.dataset.cluster;
        const hiddenRows = document.querySelectorAll(`.job-row-hidden[data-cluster="${clusterName}"]`);
        const expandText = this.querySelector('.expand-text');
        const collapseText = this.querySelector('.collapse-text');

        const isExpanded = hiddenRows[0]?.style.display !== 'none';

        hiddenRows.forEach(row => {
            row.style.display = isExpanded ? 'none' : '';
        });

        expandText.style.display = isExpanded ? '' : 'none';
        collapseText.style.display = isExpanded ? 'none' : '';
    });
});
</script>
{% endblock %}