{% extends "base.html" %}
{% set active_nav = "results" %}

{% block title %}Create Release Package - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Create Release Package</h1>
        <p class="page-subtitle">Bundle artifacts for client delivery</p>
    </div>
    <div>
        <a href="/results" class="btn btn-ghost">← Back</a>
    </div>
</div>

<form method="POST" action="/results/create" class="flex gap-lg">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <div style="flex: 2;">
        <!-- TRF Selection -->
        <div class="card mb-lg">
            <h3 class="mb-md">TRF Selection</h3>
            <div class="mb-md">
                <label class="form-label">TRF</label>
                <select name="order_id" class="form-input" required onchange="loadOrderArtifacts(this.value)">
                    <option value="">Select a TRF...</option>
                    {% for order in orders %}
                    <option value="{{ order.id }}">{{ order.order_number }} - {{ order.patient_name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>

        <!-- Artifact Selection -->
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">Select Artifacts</h3>
                <span class="text-muted text-sm" id="artifact-count">0 selected</span>
            </div>
            
            <div id="artifacts-container">
                {% if artifacts %}
                <div class="artifact-list">
                    {% for artifact in artifacts %}
                    <label class="artifact-item">
                        <input type="checkbox" name="artifact_ids" value="{{ artifact.id }}" onchange="updateArtifactCount()">
                        <div class="artifact-info">
                            <div class="artifact-name">
                                <span class="artifact-icon">📄</span>
                                <strong>{{ artifact.filename }}</strong>
                            </div>
                            <div class="artifact-meta">
                                <span class="badge badge-sm badge-default">{{ artifact.artifact_type or 'Unknown' }}</span>
                                <span class="text-muted text-sm">{{ artifact.size_bytes|filesizeformat if artifact.size_bytes else 'Unknown size' }}</span>
                                <span class="text-muted text-sm">{{ artifact.source_system }}</span>
                            </div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <p class="text-muted">Select a TRF to view available artifacts</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div style="flex: 1;">
        <!-- Release Details -->
        <div class="card mb-lg">
            <h3 class="mb-md">Release Details</h3>
            
            <div class="mb-md">
                <label class="form-label">Release Notes</label>
                <textarea name="release_notes" class="form-input" rows="4" placeholder="Optional notes about this release..."></textarea>
            </div>
        </div>

        <!-- Actions -->
        <div class="card">
            <h3 class="mb-md">Actions</h3>
            <button type="submit" name="action" value="draft" class="btn btn-secondary mb-sm" style="width: 100%;">
                Save as Draft
            </button>
            <button type="submit" name="action" value="approve" class="btn btn-primary" style="width: 100%;">
                Create & Approve
            </button>
        </div>
    </div>
</form>

<style>
.artifact-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.artifact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.artifact-item:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

.artifact-item input[type="checkbox"] {
    margin-top: 0.25rem;
}

.artifact-info {
    flex: 1;
}

.artifact-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.artifact-icon {
    font-size: 1.25rem;
}

.artifact-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
</style>

<script>
function updateArtifactCount() {
    const checked = document.querySelectorAll('input[name="artifact_ids"]:checked').length;
    document.getElementById('artifact-count').textContent = `${checked} selected`;
}

function loadOrderArtifacts(orderId) {
    if (!orderId) {
        document.getElementById('artifacts-container').innerHTML = `
            <div class="empty-state">
                <p class="text-muted">Select a TRF to view available artifacts</p>
            </div>
        `;
        return;
    }

    // Show loading state
    document.getElementById('artifacts-container').innerHTML = `
        <div class="empty-state">
            <p class="text-muted">Loading artifacts...</p>
        </div>
    `;

    // Fetch artifacts for the selected order
    fetch(`/api/artifacts?order_id=${orderId}`, {
        credentials: 'same-origin'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.items && data.items.length > 0) {
                const html = '<div class="artifact-list">' + data.items.map(artifact => `
                    <label class="artifact-item">
                        <input type="checkbox" name="artifact_ids" value="${artifact.id}" onchange="updateArtifactCount()">
                        <div class="artifact-info">
                            <div class="artifact-name">
                                <span class="artifact-icon">📄</span>
                                <strong>${artifact.filename}</strong>
                            </div>
                            <div class="artifact-meta">
                                <span class="badge badge-sm badge-default">${artifact.artifact_type || 'Unknown'}</span>
                                <span class="text-muted text-sm">${artifact.size_bytes ? formatBytes(artifact.size_bytes) : 'Unknown size'}</span>
                                <span class="text-muted text-sm">${artifact.source_system}</span>
                            </div>
                        </div>
                    </label>
                `).join('') + '</div>';
                document.getElementById('artifacts-container').innerHTML = html;
            } else {
                document.getElementById('artifacts-container').innerHTML = `
                    <div class="empty-state">
                        <p class="text-muted">No artifacts available for this order</p>
                    </div>
                `;
            }
            updateArtifactCount();
        })
        .catch(error => {
            console.error('Error loading artifacts:', error);
            document.getElementById('artifacts-container').innerHTML = `
                <div class="empty-state">
                    <p class="text-muted">Error loading artifacts</p>
                </div>
            `;
        });
}

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

{% endblock %}