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

{% block title %}Workset {{ workset.workset_id[:12] }}... - Ursa Customer Portal{% endblock %}

{% block extra_css %}
<style>
/* Compact info grid */
.info-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1.5rem;
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.info-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.info-value {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Metrics row - horizontal cards */
.metrics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.metrics-card {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 350px;
    padding: 1rem !important;
}
.card-title-sm {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-title-sm i {
    color: var(--accent-color);
}
.metric-main {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}
.metric-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.metric-breakdown-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
}
.metric-breakdown-vertical a {
    font-size: 0.85rem;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="page-header">
        <a href="/portal/worksets" class="text-muted mb-md d-block">
            <i class="fas fa-arrow-left"></i> Back to Worksets
        </a>
        <div class="d-flex justify-between align-center flex-wrap gap-lg">
            <div>
                <h1 class="page-title">
                    {{ workset.workset_name or workset.workset_id }}
                    <span class="badge badge-{{ workset.state | lower | replace('_', '-') }} ml-md">
                        {{ workset.state }}
                        {% if workset.state == 'in_progress' and workset.progress_step %}
                        <span style="font-weight: normal; opacity: 0.8;">
                            ({{ workset.progress_step | replace('_', ' ') }})
                        </span>
                        {% endif %}
                    </span>
                </h1>
                <p class="page-subtitle">
                    <code>{{ workset.workset_id }}</code>
                    <button class="btn btn-outline btn-sm ml-sm" onclick="copyToClipboard('{{ workset.workset_id }}')">
                        <i class="fas fa-copy"></i>
                    </button>
                </p>
            </div>
            <div class="page-actions" style="margin-top: 0;">
                {% if workset.state == 'in_progress' %}
                <button class="btn btn-outline" onclick="cancelWorkset('{{ workset.workset_id }}')">
                    <i class="fas fa-stop"></i> Cancel
                </button>
                {% elif workset.state == 'error' %}
                <button class="btn btn-primary" onclick="retryWorkset('{{ workset.workset_id }}')">
                    <i class="fas fa-redo"></i> Retry
                </button>
                {% elif workset.state == 'canceled' %}
                <button class="btn btn-primary" onclick="retryWorkset('{{ workset.workset_id }}')">
                    <i class="fas fa-redo"></i> Restart
                </button>
                {% elif workset.state == 'completed' %}
                <a href="/portal/worksets/{{ workset.workset_id }}/download" class="btn btn-primary">
                    <i class="fas fa-download"></i> Download Results
                </a>
                {% elif workset.state == 'archived' %}
                <button class="btn btn-primary" onclick="restoreWorkset('{{ workset.workset_id }}')">
                    <i class="fas fa-undo"></i> Restore
                </button>
                {% endif %}
                <button class="btn btn-outline" onclick="refreshWorksetDetail('{{ workset.state }}')">
                    <i class="fas fa-sync-alt"></i> Refresh
                </button>

                <!-- Archive/Delete buttons (not for archived or deleted worksets) -->
                {% if workset.state not in ['archived', 'deleted'] %}
                <button class="btn btn-outline" onclick="archiveWorkset('{{ workset.workset_id }}')" type="button">
                    <i class="fas fa-archive"></i> Archive
                </button>
                <button class="btn btn-outline" onclick="deleteWorkset('{{ workset.workset_id }}')" type="button" style="color: #ef4444; border-color: #ef4444;">
                    <i class="fas fa-trash"></i> Delete
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Progress Bar (for in-progress worksets) -->
    {% if workset.state == 'in_progress' %}
    <div class="card mb-lg">
        <div class="d-flex justify-between align-center mb-md">
            <span class="text-muted">Processing Progress</span>
            <span class="text-accent font-bold">{{ workset.progress | default(0) }}%</span>
        </div>
        <div class="progress" style="height: 12px;">
            <div class="progress-bar primary" style="width: {{ workset.progress | default(0) }}%"></div>
        </div>
        <div class="d-flex justify-between align-center mt-md" style="font-size: 0.875rem;">
            <p class="text-muted mb-0">
                <i class="fas fa-tasks"></i>
                Current Step: <strong>{{ (workset.progress_step or workset.current_step or 'initializing') | replace('_', ' ') | title }}</strong>
                {% if workset.progress_message %}
                <span class="text-muted" style="font-size: 0.8rem;"> - {{ workset.progress_message }}</span>
                {% endif %}
            </p>
            {% if workset.cluster_name %}
            <p class="text-muted mb-0">
                <i class="fas fa-server"></i>
                Cluster: <code>{{ workset.cluster_name }}</code>
            </p>
            {% endif %}
        </div>
        {% if workset.started_at %}
        <p class="text-muted mt-sm mb-0" style="font-size: 0.8rem;">
            <i class="fas fa-clock"></i>
            Started: {{ workset.started_at }}
        </p>
        {% endif %}
    </div>
    {% endif %}
    
    <!-- Error Alert -->
    {% if workset.state == 'error' and workset.error_message %}
    <div class="alert alert-error mb-lg">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
            <strong>Processing Error</strong>
            <p class="mb-0">{{ workset.error_message }}</p>
        </div>
    </div>
    {% endif %}
    
    <!-- Workset Info (Compact) -->
    <div class="card mb-lg">
        <h3 class="card-title">Workset Information</h3>
        <div class="info-grid-compact">
            {% if workset.workset_name %}
            <div class="info-item" style="grid-column: span 2;">
                <span class="info-label">Workset Name</span>
                <span class="info-value" style="font-weight: 600;">{{ workset.workset_name }}</span>
            </div>
            {% endif %}
            <div class="info-item">
                <span class="info-label">Customer</span>
                <span class="info-value">{{ workset.customer_id | default('Unknown') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Type</span>
                <span class="info-value">
                    {% set wtype = workset.workset_type | default('ruo') | lower %}
                    {% if wtype == 'clinical' %}<span class="badge badge-clinical">Clinical</span>
                    {% elif wtype == 'lsmc' %}<span class="badge badge-lsmc">LSMC</span>
                    {% else %}<span class="badge badge-ruo">RUO</span>{% endif %}
                </span>
            </div>
            <div class="info-item">
                <span class="info-label">Pipeline</span>
                <span class="info-value">{{ workset.pipeline_type | default('germline') | title }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Reference</span>
                <span class="info-value">{{ workset.reference_genome | default('GRCh38') }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Priority</span>
                <span class="info-value">{{ workset.priority | default('normal') | title }}</span>
            </div>
            <div class="info-item">
                <span class="info-label">Created</span>
                <span class="info-value">{{ workset.created_at[:16] | replace('T', ' ') if workset.created_at else 'N/A' }}</span>
            </div>
            {% if workset.started_at %}
            <div class="info-item">
                <span class="info-label">Started</span>
                <span class="info-value">{{ workset.started_at[:16] | replace('T', ' ') if workset.started_at else 'N/A' }}</span>
            </div>
            {% endif %}
            {% if workset.finished_at %}
            <div class="info-item">
                <span class="info-label">Finished</span>
                <span class="info-value">{{ workset.finished_at[:16] | replace('T', ' ') if workset.finished_at else 'N/A' }}</span>
            </div>
            {% endif %}
            {% if workset.cluster_name %}
            <div class="info-item">
                <span class="info-label">Cluster</span>
                <span class="info-value"><code>{{ workset.cluster_name }}</code></span>
            </div>
            {% endif %}
            <div class="info-item" style="grid-column: span 2;">
                <span class="info-label">S3 Location</span>
                <span class="info-value"><code style="font-size: 0.8rem;">{% if workset.results_s3_uri %}{{ workset.results_s3_uri }}{% elif workset.s3_bucket %}s3://{{ workset.s3_bucket }}/{{ workset.s3_prefix }}{% else %}Not available{% endif %}</code></span>
            </div>
            {% if workset.lock_owner %}
            <div class="info-item" style="grid-column: span 2;">
                <span class="info-label">Lock</span>
                <span class="info-value"><code style="font-size: 0.7rem;">{{ workset.lock_owner }}</code></span>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Cost, Resource, and Execution Cards Row -->
    <div class="metrics-row mb-lg">
        <!-- Compute Cost -->
        <div class="card metrics-card" id="cost-card">
            <h4 class="card-title-sm"><i class="fas fa-microchip"></i> Compute Cost</h4>
            <div class="metric-main" id="cost-main-display">${{ "%.2f"|format(workset.compute_cost | default(workset.cost_usd | default(0))) }}</div>
            <div class="metric-breakdown" id="cost-breakdown-display">
                <span id="compute-cost-display" class="text-muted">Pipeline execution cost</span>
            </div>
            <div id="actual-cost-badge" class="mt-xs" style="display: none;">
                <span class="badge badge-success" style="font-size: 0.7rem;">
                    <i class="fas fa-check-circle"></i> Actual Cost
                </span>
            </div>
        </div>

        <!-- Resource Usage -->
        <div class="card metrics-card">
            <h4 class="card-title-sm"><i class="fas fa-server"></i> Resources</h4>
            <div class="metric-breakdown-vertical">
                <div><span class="text-muted">vCPU-hrs:</span> {{ workset.vcpu_hours | default(0) }}</div>
                <div><span class="text-muted">Mem GB-hrs:</span> {{ workset.memory_gb_hours | default(0) }}</div>
                <div>
                    <span class="text-muted">Storage:</span>
                    {% if workset.storage_available %}
                    <span title="{{ workset.storage_bytes | default(0) }} bytes">{{ workset.storage_human | default('N/A') }}</span>
                    {% elif workset.state == 'complete' %}
                    <span class="text-muted">N/A</span>
                    {% elif workset.state == 'in_progress' %}
                    <span class="text-muted"><i class="fas fa-spinner fa-spin"></i> Calculating...</span>
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </div>
                <div>
                    <span class="text-muted">Duration:</span>
                    {% if workset.duration_formatted %}
                    {{ workset.duration_formatted }}
                    {% elif workset.duration %}
                    {{ workset.duration }}
                    {% else %}
                    <span class="text-muted">—</span>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Storage Costs -->
        {% if workset.storage_available and workset.state in ['complete', 'error', 'archived'] %}
        <div class="card metrics-card">
            <h4 class="card-title-sm"><i class="fas fa-database"></i> Storage Cost</h4>
            <div class="metric-breakdown-vertical">
                <div>
                    <span class="text-muted">Daily:</span>
                    ${{ "%.4f"|format(workset.storage_cost_daily | default(0)) }}/day
                    <span class="text-xs text-muted">({{ workset.storage_class | default('S3 Standard') }})</span>
                </div>
                <div>
                    <span class="text-muted">Total:</span>
                    ${{ "%.2f"|format(workset.storage_cost_total | default(0)) }}
                    <span class="text-xs text-muted">({{ workset.storage_days | default(0) }} days)</span>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Transfer Costs -->
        {% if workset.storage_available and workset.state in ['complete', 'error', 'archived'] %}
        <div class="card metrics-card">
            <h4 class="card-title-sm"><i class="fas fa-exchange-alt"></i> Transfer Cost</h4>
            <div class="metric-breakdown-vertical">
                <div>
                    <span class="text-muted">Internet:</span>
                    {% if workset.transfer_cost_internet >= 1 %}
                    ${{ "%.2f"|format(workset.transfer_cost_internet | default(0)) }}
                    {% else %}
                    ${{ "%.4f"|format(workset.transfer_cost_internet | default(0)) }}
                    {% endif %}
                    <span class="text-xs text-muted">($0.09/GB)</span>
                </div>
                <div>
                    <span class="text-muted">Cross-Region:</span>
                    {% if workset.transfer_cost_cross_region >= 1 %}
                    ${{ "%.2f"|format(workset.transfer_cost_cross_region | default(0)) }}
                    {% else %}
                    ${{ "%.4f"|format(workset.transfer_cost_cross_region | default(0)) }}
                    {% endif %}
                    <span class="text-xs text-muted">($0.02/GB)</span>
                </div>
                <div>
                    <span class="text-muted">Same-Region:</span>
                    {% if workset.transfer_cost_same_region >= 1 %}
                    ${{ "%.2f"|format(workset.transfer_cost_same_region | default(0)) }}
                    {% else %}
                    ${{ "%.4f"|format(workset.transfer_cost_same_region | default(0)) }}
                    {% endif %}
                    <span class="text-xs text-muted">($0.01/GB)</span>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Execution Environment -->
        {% if workset.execution_cluster_name or workset.execution_s3_bucket or workset.results_s3_uri %}
        <div class="card metrics-card">
            <h4 class="card-title-sm"><i class="fas fa-cloud"></i> Execution</h4>
            <div class="metric-breakdown-vertical">
                {% if workset.execution_cluster_name %}
                <div><span class="text-muted">Cluster:</span> <code>{{ workset.execution_cluster_name }}</code></div>
                {% endif %}
                {% if workset.execution_cluster_region %}
                <div><span class="text-muted">Region:</span> {{ workset.execution_cluster_region }}</div>
                {% endif %}
                {% if is_admin and workset.execution_headnode_ip %}
                <div><span class="text-muted">IP:</span> <code>{{ workset.execution_headnode_ip }}</code></div>
                {% endif %}
                {% if workset.results_s3_uri %}
                <div style="word-break: break-all;">
                    <span class="text-muted">Results:</span>
                    <a href="/portal/worksets/{{ workset.workset_id }}/results/browse" class="text-accent" title="{{ workset.results_s3_uri }}">
                        <i class="fas fa-folder-open"></i> Browse
                    </a>
                </div>
                {% endif %}
            </div>
            {% if is_admin and workset.execution_headnode_ip and workset.execution_cluster_region %}
            <details class="mt-sm">
                <summary class="text-muted text-xs cursor-pointer">SSH Command</summary>
                <code style="font-size: 0.7rem; word-break: break-all; display: block; margin-top: 0.25rem;">
                    ssh -i ~/.ssh/lsmc-omics-{{ workset.execution_cluster_region }}.pem ubuntu@{{ workset.execution_headnode_ip }}
                </code>
                {% if workset.headnode_analysis_path %}
                <code style="font-size: 0.7rem; color: var(--text-muted); display: block;">cd {{ workset.headnode_analysis_path }}</code>
                {% endif %}
            </details>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Main Content -->
    <div>

            <!-- Performance Metrics Card (fetched from headnode) - ABOVE SAMPLES -->
            <div class="card mb-lg" id="performance-metrics-card" style="display: none;">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-tachometer-alt"></i> Performance Metrics</h3>
                    <button class="btn btn-outline btn-sm" onclick="loadPerformanceMetrics(true)" title="Refresh metrics">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
                <div id="performance-metrics-loading" class="text-muted text-center py-md">
                    <i class="fas fa-spinner fa-spin"></i> Loading performance metrics...
                </div>
                <div id="performance-metrics-content" style="display: none; padding: var(--spacing-md);">
                    <!-- Compute Cost -->
                    <div id="cost-summary-section" style="display: none;">
                        <h4 class="text-sm mb-sm"><i class="fas fa-microchip text-success"></i> Compute Cost</h4>
                        <div class="grid grid-3 gap-md mb-md">
                            <div class="text-center">
                                <div class="text-lg" id="total-cost">-</div>
                                <div class="text-muted text-xs">Compute Cost</div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg" id="rule-count">-</div>
                                <div class="text-muted text-xs">Rules Executed</div>
                            </div>
                            <div class="text-center">
                                <div class="text-lg" id="sample-count">-</div>
                                <div class="text-muted text-xs">Samples</div>
                            </div>
                        </div>
                        <details class="mb-md">
                            <summary class="text-muted text-sm cursor-pointer">Per-Sample Costs</summary>
                            <div id="per-sample-costs" class="mt-sm" style="font-size: 0.85rem;"></div>
                        </details>
                    </div>

                    <!-- Alignment Stats - Full Table with Sample IDs -->
                    <div id="alignment-stats-section" style="display: none;">
                        <h4 class="text-sm mb-sm"><i class="fas fa-dna text-accent"></i> Alignment Statistics</h4>
                        <div id="alignment-stats-table" class="table-container" style="overflow-x: auto; max-height: 300px;"></div>
                    </div>

                    <div id="no-metrics-message" class="text-muted text-center py-md" style="display: none;">
                        <i class="fas fa-info-circle"></i> Performance metrics not yet available
                    </div>
                </div>
            </div>

            <!-- Samples Card -->
            <div class="card mb-lg">
                <div class="card-header">
                    <h3 class="card-title">Samples ({{ workset.samples | length if workset.samples else 0 }})</h3>
                </div>
                <div class="table-container" style="box-shadow: none; max-height: 400px; overflow-y: auto;">
                    <table class="table" id="workset-samples-table" data-sortable>
                        <thead>
                            <tr>
                                <th>Sample ID</th>
                                <th>Status</th>
                                <th>R1 File</th>
                                <th>R2 File</th>
                                <th id="sample-cost-header" style="display: none; text-align: right;">Compute Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% if workset.samples %}
                            {% for sample in workset.samples %}
                            <tr data-sample-id="{{ sample.sample_id }}">
                                <td>{{ sample.sample_id }}</td>
                                <td><span class="badge badge-{{ sample.status | lower }}">{{ sample.status }}</span></td>
                                <td><code style="font-size: 0.75rem;">{{ sample.r1_file | default('N/A') }}</code></td>
                                <td><code style="font-size: 0.75rem;">{{ sample.r2_file | default('N/A') }}</code></td>
                                <td class="sample-cost-cell" style="display: none; text-align: right;">
                                    <span class="text-muted">-</span>
                                </td>
                            </tr>
                            {% endfor %}
                            {% else %}
                            <tr>
                                <td colspan="5" class="text-center text-muted">No samples found</td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Pipeline Status (Live from Headnode) -->
            <div class="card mb-lg" id="pipeline-status-card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-cogs"></i> Pipeline Status</h3>
                    <button class="btn btn-outline btn-sm" onclick="refreshPipelineStatus('{{ workset.workset_id }}')" title="Refresh status">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
                <div id="pipeline-status-content">
                    <div class="text-center text-muted py-md">
                        <i class="fas fa-spinner fa-spin"></i> Loading pipeline status...
                    </div>
                </div>
            </div>

            <!-- Processing Logs -->
            <div class="card mb-lg">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-scroll"></i> Processing Logs</h3>
                    <div class="d-flex gap-sm">
                        <button class="btn btn-outline btn-sm" onclick="downloadLogs('{{ workset.workset_id }}')" title="Download state history">
                            <i class="fas fa-download"></i> History
                        </button>
                        <button class="btn btn-outline btn-sm" id="download-snakemake-btn" onclick="downloadSnakemakeLogs('{{ workset.workset_id }}')" title="Download Snakemake logs" style="display: none;">
                            <i class="fas fa-file-alt"></i> Snakemake
                        </button>
                    </div>
                </div>
                <div class="code-block" style="max-height: 300px; overflow-y: auto;">
                    <pre id="workset-logs">{{ workset.logs | default('No logs available yet...') }}</pre>
                </div>
            </div>

            <!-- Additional Metrics Row -->
            <div class="metrics-row mb-lg">
                <!-- TapDB Metrics (if available) -->
                {% if workset.metrics %}
                <div class="card metrics-card">
                    <h4 class="card-title-sm"><i class="fas fa-chart-line"></i> Processing Metrics</h4>
                    <div class="metric-breakdown-vertical">
                        {% if workset.metrics.samples_processed is defined %}
                        <div><span class="text-muted">Samples:</span> {{ workset.metrics.samples_processed }}</div>
                        {% endif %}
                        {% if workset.metrics.bytes_transferred is defined %}
                        <div><span class="text-muted">Transferred:</span> {{ "%.2f"|format(workset.metrics.bytes_transferred / 1073741824) }} GB</div>
                        {% endif %}
                        {% if workset.metrics.step_durations is defined %}
                        <details class="mt-xs">
                            <summary class="text-muted text-xs cursor-pointer">Step Durations</summary>
                            {% for step, duration in workset.metrics.step_durations.items() %}
                            <div style="font-size: 0.8rem; padding-left: 0.5rem;">{{ step | replace('_', ' ') | title }}: {{ duration }}s</div>
                            {% endfor %}
                        </details>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <!-- Results (if completed) -->
                {% if workset.state == 'completed' %}
                <div class="card metrics-card">
                    <h4 class="card-title-sm"><i class="fas fa-file-archive"></i> Results</h4>
                    <div class="metric-breakdown-vertical">
                        <a href="/portal/worksets/{{ workset.workset_id }}/results/vcf" class="d-flex align-center gap-xs">
                            <i class="fas fa-dna text-accent"></i> VCF Files
                        </a>
                        <a href="/portal/worksets/{{ workset.workset_id }}/results/bam" class="d-flex align-center gap-xs">
                            <i class="fas fa-align-left text-accent"></i> BAM Files
                        </a>
                        <a href="/portal/worksets/{{ workset.workset_id }}/results/qc" class="d-flex align-center gap-xs">
                            <i class="fas fa-chart-bar text-accent"></i> QC Reports
                        </a>
                        <a href="/portal/worksets/{{ workset.workset_id }}/results/all" class="d-flex align-center gap-xs">
                            <i class="fas fa-download text-accent"></i> Download All
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/worksets.js?v={{ cache_bust | default('1') }}"></script>
<script>
// Pipeline status display
const worksetId = '{{ workset.workset_id }}';
const customerId = window.UrsaConfig?.customerId || '{{ customer_id | default("") }}';

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

function formatDuration(seconds) {
    if (seconds < 60) return `${seconds}s`;
    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
    const hours = Math.floor(seconds / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    return `${hours}h ${mins}m`;
}

function renderPipelineStatus(status) {
    const container = document.getElementById('pipeline-status-content');
    if (!status) {
        container.innerHTML = `
            <div class="text-muted py-sm" style="padding: 1rem;">
                <i class="fas fa-info-circle"></i> Pipeline status unavailable
                <div style="font-size: 0.85rem; margin-top: 0.5rem;">
                    Status is only available when a cluster is running and SSH access is configured.
                </div>
            </div>`;
        return;
    }

    if (status.error_message) {
        container.innerHTML = `
            <div class="text-warning py-sm" style="padding: 1rem;">
                <i class="fas fa-exclamation-triangle"></i> ${status.error_message}
            </div>`;
        return;
    }

    const runningBadge = status.is_running
        ? '<span class="badge badge-success"><i class="fas fa-play"></i> Running</span>'
        : '<span class="badge badge-secondary"><i class="fas fa-stop"></i> Not Running</span>';

    const progressBar = status.steps_total > 0 ? `
        <div style="margin: 1rem 0;">
            <div class="d-flex justify-between mb-sm">
                <span>Progress: ${status.steps_completed} / ${status.steps_total} steps</span>
                <span>${status.percent_complete.toFixed(1)}%</span>
            </div>
            <div style="background: var(--bg-tertiary); border-radius: 4px; height: 8px; overflow: hidden;">
                <div style="background: var(--accent); height: 100%; width: ${status.percent_complete}%; transition: width 0.3s;"></div>
            </div>
        </div>` : '';

    const currentRule = status.current_rule
        ? `<div class="mb-sm"><strong>Current Rule:</strong> <code>${status.current_rule}</code></div>`
        : '';

    const errorsSection = status.errors && status.errors.length > 0 ? `
        <div class="mt-md" style="border-top: 1px solid var(--border-color); padding-top: 1rem;">
            <strong class="text-danger"><i class="fas fa-exclamation-circle"></i> Errors (${status.errors.length}):</strong>
            <div class="code-block mt-sm" style="max-height: 150px; overflow-y: auto; font-size: 0.8rem;">
                <pre style="margin: 0; white-space: pre-wrap;">${status.errors.join('\n')}</pre>
            </div>
        </div>` : '';

    // Show download button if log files exist
    if (status.log_files && status.log_files.length > 0) {
        document.getElementById('download-snakemake-btn').style.display = 'inline-flex';
    }

    container.innerHTML = `
        <div style="padding: 1rem;">
            <div class="d-flex justify-between align-center mb-md">
                ${runningBadge}
                <span class="text-muted" style="font-size: 0.85rem;">
                    <i class="fas fa-clock"></i> ${formatDuration(status.duration_seconds)}
                    &nbsp;|&nbsp;
                    <i class="fas fa-hdd"></i> ${formatBytes(status.storage_bytes)}
                </span>
            </div>
            ${progressBar}
            ${currentRule}
            ${status.log_files && status.log_files.length > 0 ? `
                <div class="text-muted" style="font-size: 0.85rem;">
                    <i class="fas fa-file-alt"></i> ${status.log_files.length} log file(s) available
                </div>` : ''}
            ${errorsSection}
        </div>`;
}

async function loadPipelineStatus() {
    if (!customerId) {
        renderPipelineStatus(null);
        return;
    }
    try {
        const response = await UrsaAPI.worksets.getLogs(customerId, worksetId);
        renderPipelineStatus(response.pipeline_status);

        // Also update state history if available
        if (response.state_history && response.state_history.length > 0) {
            const logsEl = document.getElementById('workset-logs');
            if (logsEl) {
                const historyText = response.state_history.map(h =>
                    `[${h.timestamp || 'N/A'}] ${h.state || h.new_state || 'unknown'}: ${h.reason || ''}`
                ).join('\n');
                logsEl.textContent = historyText || 'No state history available';
            }
        }
    } catch (error) {
        console.error('Failed to load pipeline status:', error);
        renderPipelineStatus({ error_message: 'Failed to fetch status: ' + error.message });
    }
}

async function refreshPipelineStatus(wsId) {
    const container = document.getElementById('pipeline-status-content');
    container.innerHTML = `
        <div class="text-center text-muted py-md">
            <i class="fas fa-spinner fa-spin"></i> Refreshing...
        </div>`;
    await loadPipelineStatus();
}

async function downloadSnakemakeLogs(wsId) {
    if (!customerId) return;
    try {
        const response = await UrsaAPI.worksets.getLogs(customerId, wsId);
        if (response.pipeline_status && response.pipeline_status.recent_log_lines) {
            const content = response.pipeline_status.recent_log_lines.join('\n');
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `workset-${wsId}-snakemake.log`;
            a.click();
            URL.revokeObjectURL(url);
        } else {
            showToast('warning', 'No Logs', 'No Snakemake log content available');
        }
    } catch (error) {
        showToast('error', 'Download Failed', error.message);
    }
}

// Update cost card with actual compute costs from performance metrics
function updateCostCard(costSummary) {
    const totalActualCost = costSummary.total_cost || 0;

    // Update main cost display (compute cost only)
    document.getElementById('cost-main-display').textContent = `$${totalActualCost.toFixed(2)}`;
    document.getElementById('compute-cost-display').textContent = 'Pipeline execution cost';

    // Show actual cost badge
    document.getElementById('actual-cost-badge').style.display = 'block';
}

// Update samples table with per-sample costs
function updateSampleCosts(perSampleCosts) {
    if (!perSampleCosts || Object.keys(perSampleCosts).length === 0) return;

    // Show the cost header
    const header = document.getElementById('sample-cost-header');
    if (header) header.style.display = 'table-cell';

    // Show all cost cells
    document.querySelectorAll('.sample-cost-cell').forEach(cell => {
        cell.style.display = 'table-cell';
    });

    // Match sample costs to table rows
    document.querySelectorAll('#workset-samples-table tbody tr[data-sample-id]').forEach(row => {
        const sampleId = row.getAttribute('data-sample-id');
        const costCell = row.querySelector('.sample-cost-cell');
        if (!costCell) return;

        // Find matching cost (sample ID may be partial match in benchmark data)
        let matchedCost = null;
        for (const [benchmarkSample, cost] of Object.entries(perSampleCosts)) {
            if (benchmarkSample.includes(sampleId) || sampleId.includes(benchmarkSample)) {
                matchedCost = cost;
                break;
            }
        }

        if (matchedCost !== null) {
            costCell.innerHTML = `<strong style="color: var(--success-color);">$${matchedCost.toFixed(4)}</strong>`;
        }
    });
}

// Performance Metrics
async function loadPerformanceMetrics(forceRefresh = false) {
    if (!customerId) return;

    const card = document.getElementById('performance-metrics-card');
    const loading = document.getElementById('performance-metrics-loading');
    const content = document.getElementById('performance-metrics-content');
    const costSection = document.getElementById('cost-summary-section');
    const alignSection = document.getElementById('alignment-stats-section');
    const noMetrics = document.getElementById('no-metrics-message');

    card.style.display = 'block';
    loading.style.display = 'block';
    content.style.display = 'none';

    try {
        const url = `/api/customers/${customerId}/worksets/${worksetId}/performance-metrics${forceRefresh ? '?force_refresh=true' : ''}`;
        const response = await fetch(url);
        if (!response.ok) throw new Error('Failed to fetch metrics');
        const data = await response.json();

        loading.style.display = 'none';
        content.style.display = 'block';

        let hasMetrics = false;

        // Render cost summary
        if (data.cost_summary) {
            hasMetrics = true;
            costSection.style.display = 'block';
            document.getElementById('total-cost').textContent = `$${data.cost_summary.total_cost.toFixed(4)}`;
            document.getElementById('rule-count').textContent = data.cost_summary.rule_count;
            document.getElementById('sample-count').textContent = data.cost_summary.sample_count;

            // Update main cost card with actual compute cost
            updateCostCard(data.cost_summary);

            // Per-sample costs
            const perSampleDiv = document.getElementById('per-sample-costs');
            const perSampleCosts = data.cost_summary.per_sample_costs || {};
            const sortedSamples = Object.entries(perSampleCosts).sort((a, b) => b[1] - a[1]);
            perSampleDiv.innerHTML = sortedSamples.map(([sample, cost]) =>
                `<div class="d-flex justify-between mb-xs">
                    <span class="text-muted">${sample}</span>
                    <span>$${cost.toFixed(4)}</span>
                </div>`
            ).join('');

            // Update samples table with per-sample costs
            updateSampleCosts(perSampleCosts);
        } else {
            costSection.style.display = 'none';
        }

        // Render alignment stats with Sample ID as first column
        if (data.alignment_stats && data.alignment_stats.length > 0) {
            hasMetrics = true;
            alignSection.style.display = 'block';
            const tableDiv = document.getElementById('alignment-stats-table');

            // Priority columns to display (sample first, then key metrics)
            const stats = data.alignment_stats;
            const allCols = Object.keys(stats[0] || {});

            // Ensure sample is first, then add key metric columns (lowercase 'sample' from API)
            const priorityOrder = ['sample', 'YieldReads', 'WgsCoverageMean', 'MappedReadsPct', 'PerfectReadsPct', 'Q20BasesPct', 'DuplicateReadsPct', 'AlignedBasesPct'];
            let displayCols = priorityOrder.filter(c => allCols.includes(c));
            // Add any remaining columns not in priority list
            const remaining = allCols.filter(c => !displayCols.includes(c));
            displayCols = displayCols.concat(remaining.slice(0, 3));

            // Column display names
            const colNames = {
                'sample': 'Sample ID',
                'YieldReads': 'Yield (Reads)',
                'WgsCoverageMean': 'Coverage',
                'MappedReadsPct': 'Mapped %',
                'PerfectReadsPct': 'Perfect %',
                'Q20BasesPct': 'Q20 %',
                'DuplicateReadsPct': 'Dup Rate',
                'AlignedBasesPct': 'Aligned %',
            };

            let html = '<table class="table" style="width: 100%; font-size: 0.85rem;">';
            html += '<thead><tr>';
            html += displayCols.map(c =>
                `<th style="padding: 6px 10px; border-bottom: 2px solid var(--border-color); text-align: ${c === 'sample' ? 'left' : 'right'}; white-space: nowrap;">${colNames[c] || c}</th>`
            ).join('');
            html += '</tr></thead><tbody>';

            for (const row of stats) {
                html += '<tr>';
                html += displayCols.map(c => {
                    let val = row[c];
                    if (val === undefined || val === null) val = '-';

                    // Format numbers
                    if (c === 'sample') {
                        // Sample ID - extract just the sample name from the full path, bold and left-aligned
                        // e.g. "R0-HG001-EX1-0-S1-noampwgs-ILMN-NOVASEQX.bwa2a" -> extract readable sample ID
                        let sampleId = val;
                        if (sampleId.includes('.')) sampleId = sampleId.split('.')[0]; // Remove aligner suffix
                        return `<td style="padding: 6px 10px; border-bottom: 1px solid var(--border-color); font-weight: 600;"><code>${sampleId}</code></td>`;
                    } else if (typeof val === 'number' || !isNaN(parseFloat(val))) {
                        const num = parseFloat(val);
                        // Format based on column type
                        if (c.includes('Pct') || c.includes('Rate')) {
                            val = num.toFixed(1) + '%';
                        } else if (c === 'WgsCoverageMean') {
                            val = num.toFixed(2) + 'x';
                        } else if (c === 'YieldReads' && num > 1000000) {
                            val = (num / 1000000).toFixed(1) + 'M';
                        } else {
                            val = num.toFixed(2);
                        }
                    }
                    return `<td style="padding: 6px 10px; border-bottom: 1px solid var(--border-color); text-align: right;">${val}</td>`;
                }).join('');
                html += '</tr>';
            }
            html += '</tbody></table>';
            tableDiv.innerHTML = html;
        } else {
            alignSection.style.display = 'none';
        }

        noMetrics.style.display = hasMetrics ? 'none' : 'block';

    } catch (error) {
        console.error('Failed to load performance metrics:', error);
        loading.style.display = 'none';
        content.style.display = 'block';
        noMetrics.style.display = 'block';
        noMetrics.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Failed to load metrics';
    }
}

// Load pipeline status on page load
document.addEventListener('DOMContentLoaded', () => {
    loadPipelineStatus();
    loadPerformanceMetrics();
});

// Auto-refresh for in-progress worksets
{% if workset.state == 'in_progress' or workset.state == 'running' or workset.state == 'pending' %}
setInterval(refreshWorksetDetail, 30000);
setInterval(() => loadPerformanceMetrics(false), 60000); // Refresh metrics every 60s
{% endif %}
</script>
{% endblock %}