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

{% block title %}Workset Manifest Generator - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Workset Manifest Generator</h1>
        <p class="page-subtitle">Create a <code>stage_samples.tsv</code> file defining analysis inputs for your pipeline run</p>
    </div>
    
    <!-- Single column layout -->
    <div style="max-width: 95%; margin: 0 auto;">
        <form id="manifest-form" onsubmit="generateManifest(event)">
            <!-- Run Configuration -->
            <div class="card">
                <h3 class="card-title"><i class="fas fa-cogs"></i> Run Configuration</h3>

                <div class="grid grid-2">
                    <div class="form-group">
                        <label for="run_id" class="form-label required">Run ID</label>
                        <input type="text" id="run_id" name="run_id" class="form-control"
                               placeholder="RU1" required oninput="updateManifestPreview()">
                        <small class="text-muted">Unique identifier for this analysis run</small>
                    </div>
                    <div class="form-group">
                        <label for="stage_target" class="form-label">Stage Target</label>
                        <input type="text" id="stage_target" name="stage_target" class="form-control"
                               value="/fsx/staged_sample_data/" oninput="updateManifestPreview()">
                    </div>
                </div>
            </div>

            <!-- Analysis Inputs (Samples) -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fas fa-dna"></i> Analysis Inputs</h3>
                    <button type="button" class="btn btn-outline btn-sm" onclick="addAnalysisInput()">
                        <i class="fas fa-plus"></i> Add Input
                    </button>
                </div>

                <p class="text-muted mb-md" style="font-size: 0.875rem;">
                    Each analysis input represents a sequencing library to be processed.
                    This corresponds to a row in <code>stage_samples.tsv</code>.
                </p>

                <div id="inputs-container">
                    <!-- Analysis input rows will be added here -->
                </div>

                <div class="mt-lg">
                    <input type="file" id="tsv-upload" accept=".tsv,.csv,.txt" class="d-none" onchange="loadInputsFromTSV(this)">
                    <div class="d-flex gap-sm flex-wrap">
                        <button type="button" class="btn btn-outline btn-sm" onclick="document.getElementById('tsv-upload').click()">
                            <i class="fas fa-file-upload"></i> Import TSV/CSV
                        </button>
                        <button type="button" class="btn btn-outline btn-sm" onclick="downloadTemplate()">
                            <i class="fas fa-file-download"></i> Download Template
                        </button>
                        <button type="button" class="btn btn-outline btn-sm" onclick="discoverFromS3()">
                            <i class="fas fa-search"></i> Discover from S3
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Manifest Preview Card -->
        <div class="card">
            <div class="card-header">
                <div class="d-flex gap-sm">
                    <button class="btn btn-outline btn-sm" onclick="copyManifest()">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                    <button class="btn btn-outline btn-sm" onclick="saveManifest()">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <button class="btn btn-primary btn-sm" onclick="downloadManifest()">
                        <i class="fas fa-download"></i> Download
                    </button>
                </div>
                <h3 class="card-title">Manifest Preview (TSV)</h3>
            </div>
            <div class="code-block" style="max-height: 250px; overflow: auto;">
                <pre id="manifest-preview" style="white-space: pre; overflow-x: auto;"># Add analysis inputs to generate the manifest</pre>
            </div>

            <!-- Saved Manifests -->
            <div class="p-md" style="border-top: 1px solid var(--color-gray-200);">
                <div class="d-flex gap-sm" style="align-items: end;">
                    <div class="form-group" style="flex: 1; margin-bottom: 0;">
                        <label for="manifest-save-name" class="form-label required">Manifest name</label>
                        <input id="manifest-save-name" class="form-control" placeholder="WK1234" required />
                    </div>
                    <button class="btn btn-outline btn-sm" onclick="refreshSavedManifests()">
                        <i class="fas fa-sync"></i> Refresh
                    </button>
                </div>
                <div class="d-flex gap-sm mt-sm" style="align-items: end;">
                    <div class="form-group" style="flex: 1; margin-bottom: 0;">
                        <label for="saved-manifest-select" class="form-label">Load saved manifest</label>
                        <select id="saved-manifest-select" class="form-control">
                            <option value="">(none)</option>
                        </select>
                    </div>
                    <button class="btn btn-primary btn-sm" onclick="loadSelectedManifest()">
                        <i class="fas fa-upload"></i> Load
                    </button>
                    <button class="btn btn-outline btn-sm" onclick="downloadSelectedManifest()">
                        <i class="fas fa-download"></i> Download
                    </button>
                </div>
            </div>

            <!-- Column Reference -->
            <div class="mt-md p-md" style="background: var(--color-gray-100); border-radius: var(--radius-md); font-size: 0.8rem;">
                <strong>Required Columns:</strong>
                <code>RUN_ID, SAMPLE_ID, EXPERIMENTID, SAMPLE_TYPE, LIB_PREP, SEQ_VENDOR, SEQ_PLATFORM, LANE, SEQBC_ID, PATH_TO_CONCORDANCE_DATA_DIR, R1_FQ, R2_FQ, STAGE_DIRECTIVE, STAGE_TARGET, SUBSAMPLE_PCT, IS_POS_CTRL, IS_NEG_CTRL, N_X, N_Y, EXTERNAL_SAMPLE_ID</code>
            </div>
        </div>

        <!-- Terminology Guide -->
        <div class="card">
            <details>
                <summary class="card-title" style="cursor: pointer;">
                    <i class="fas fa-book"></i> Terminology Guide (GA4GH Standards)
                </summary>
                <div class="mt-lg terminology-guide">
                    <dl>
                        <dt><strong>Analysis Input (SAMPLE_ID)</strong></dt>
                        <dd>Pipeline input identifier - uniquely identifies a sequencing library for analysis</dd>

                        <dt><strong>Subject/Individual (EXTERNAL_SAMPLE_ID)</strong></dt>
                        <dd>Source organism identifier (e.g., patient ID, HG002). Multiple libraries may come from one subject.</dd>

                        <dt><strong>Biosample</strong></dt>
                        <dd>Physical specimen (tissue type, collection info). Captured in SAMPLE_TYPE field.</dd>

                        <dt><strong>Sequencing Library</strong></dt>
                        <dd>Prepared DNA/RNA with specific protocol. Captured in LIB_PREP, SEQ_VENDOR, SEQ_PLATFORM.</dd>

                        <dt><strong>FASTQ Files</strong></dt>
                        <dd>Raw sequencing output files (R1_FQ, R2_FQ). Include full S3 paths.</dd>
                    </dl>
                </div>
            </details>
        </div>

        <!-- Column Mapping Help -->
        <div class="card">
            <details>
                <summary class="card-title" style="cursor: pointer;">
                    <i class="fas fa-columns"></i> Column Mapping Reference
                </summary>
                <div class="mt-lg">
                    <table class="table table-sm" style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="border-bottom: 2px solid var(--color-gray-300);">
                                <th style="padding: var(--spacing-sm); text-align: left;">Column Name</th>
                                <th style="padding: var(--spacing-sm); text-align: left;">Description</th>
                                <th style="padding: var(--spacing-sm); text-align: left;">Example</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>SAMPLE_ID</code></td>
                                <td style="padding: var(--spacing-sm);">Unique identifier for this analysis input</td>
                                <td style="padding: var(--spacing-sm);">LIB001</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>EXTERNAL_SAMPLE_ID</code></td>
                                <td style="padding: var(--spacing-sm);">Subject/individual ID (e.g., patient ID)</td>
                                <td style="padding: var(--spacing-sm);">SUBJ001</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>SAMPLE_TYPE</code></td>
                                <td style="padding: var(--spacing-sm);">Type of biological sample</td>
                                <td style="padding: var(--spacing-sm);">Blood, Saliva, Tissue</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>LIB_PREP</code></td>
                                <td style="padding: var(--spacing-sm);">Library preparation method</td>
                                <td style="padding: var(--spacing-sm);">PCR-free, Nextera</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>SEQ_VENDOR</code></td>
                                <td style="padding: var(--spacing-sm);">Sequencing vendor/platform</td>
                                <td style="padding: var(--spacing-sm);">Illumina, PacBio</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>SEQ_PLATFORM</code></td>
                                <td style="padding: var(--spacing-sm);">Specific sequencing platform</td>
                                <td style="padding: var(--spacing-sm);">NovaSeq, HiSeq</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>R1_FQ</code></td>
                                <td style="padding: var(--spacing-sm);">S3 path to forward read FASTQ file</td>
                                <td style="padding: var(--spacing-sm);">s3://bucket/sample_R1.fastq.gz</td>
                            </tr>
                            <tr style="border-bottom: 1px solid var(--color-gray-200);">
                                <td style="padding: var(--spacing-sm);"><code>R2_FQ</code></td>
                                <td style="padding: var(--spacing-sm);">S3 path to reverse read FASTQ file (optional for single-end)</td>
                                <td style="padding: var(--spacing-sm);">s3://bucket/sample_R2.fastq.gz</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </details>
        </div>
    </div>
</div>

<!-- Analysis Input Modal (for editing individual inputs) -->
<div class="modal-overlay" id="input-edit-modal">
    <div class="modal" style="max-width: 900px;">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Analysis Input</h3>
            <button class="modal-close" onclick="closeInputModal()">&times;</button>
        </div>
        <div class="modal-body" id="input-modal-body">
            <!-- Dynamic form fields will be inserted here -->
        </div>
        <div class="modal-footer">
            <button class="btn btn-outline" onclick="closeInputModal()">Cancel</button>
            <button class="btn btn-primary" onclick="saveInputFromModal()">Save</button>
        </div>
    </div>
</div>

    <!-- File Browser Modal -->
    <div class="modal-overlay" id="file-browser-modal">
        <div class="modal" style="max-width: 900px;">
            <div class="modal-header">
                <h3><i class="fas fa-folder-open"></i> Select FASTQ from S3</h3>
                <button class="modal-close" onclick="closeFileBrowser()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="mb-md d-flex gap-sm" style="align-items: flex-end;">
                    <div class="form-group" style="flex: 1; margin-bottom: 0;">
                        <label class="form-label">Linked bucket</label>
                        <select id="browser-bucket-select" class="form-control" onchange="onBrowserBucketChange(this)">
                            <option value="">Loading linked buckets...</option>
                        </select>
                    </div>
                    <a href="/portal/files/buckets" target="_blank" class="btn btn-outline btn-sm" title="Manage linked buckets">
                        <i class="fas fa-external-link-alt"></i> Manage Buckets
                    </a>
                </div>
                <div class="mb-md">
                    <nav class="breadcrumb" id="browser-breadcrumb">
                        <a href="#" onclick="browseFolder('')" class="breadcrumb-item">
                            <i class="fas fa-home"></i> Root
                        </a>
                    </nav>
                </div>
                <div class="file-list" id="browser-file-list" style="max-height: 400px; overflow-y: auto;">
                    <div class="text-center text-muted p-xl">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p class="mt-md">Loading files...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeFileBrowser()">Cancel</button>
            </div>
        </div>
    </div>

<style>
.analysis-input-row {
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    border-left: 3px solid var(--color-accent);
}
.analysis-input-row:last-child { margin-bottom: 0; }
.analysis-input-row .input-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}
.analysis-input-row .input-title {
    font-weight: 600;
    color: var(--color-accent);
}
.analysis-input-row .input-summary {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}
.terminology-guide dt {
    color: var(--color-accent);
    margin-top: var(--spacing-sm);
}
.terminology-guide dd {
    margin-left: 0;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
.input-group {
    display: flex;
    gap: 0;
}
.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.file-list-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-200);
    cursor: pointer;
}
.file-list-item:hover { background-color: var(--color-gray-100); }
.file-list-item i { margin-right: var(--spacing-sm); width: 20px; text-align: center; }
.file-list-item.folder i { color: var(--color-warning); }
.file-list-item.file i { color: var(--color-gray-500); }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs); }
.breadcrumb-item { color: var(--color-accent); cursor: pointer; }
</style>
{% endblock %}

{% block extra_js %}
<script>
// Customer ID for file browsing
window.UrsaConfig = window.UrsaConfig || {};
window.UrsaConfig.customerId = '{{ customer.customer_id | default("") }}';
</script>
<script src="/static/js/manifest-generator.js?v={{ cache_bust | default('1') }}"></script>
{% endblock %}