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

{% block title %}Submit New Workset - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container container-sm">
    <!-- 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>
        <h1 class="page-title">Submit New Workset</h1>
        <p class="page-subtitle">Configure and submit a new genomics processing job</p>
    </div>

    <!-- Quick Start Guide -->
    <div class="card" style="background: linear-gradient(135deg, #1a3a4a, #0d2633); border-left: 4px solid var(--color-accent);">
        <h4 style="margin-top: 0; color: #fff;"><i class="fas fa-lightbulb text-warning"></i> Quick Start Guide</h4>
        <p style="margin-bottom: var(--spacing-sm); color: #c8d4db;">A <strong>workset</strong> is a batch of analysis inputs (sequencing libraries) to be processed together through a genomics pipeline. To submit a workset:</p>
        <ol style="margin: 0; padding-left: var(--spacing-lg); line-height: 1.8; color: #c8d4db;">
            <li><strong>Name your workset</strong> &mdash; Use a descriptive name like "ProjectX-Cohort1-Jan2024"</li>
            <li><strong>Select pipeline &amp; reference</strong> &mdash; Choose the analysis type and reference genome</li>
            <li><strong>Provide a manifest</strong> &mdash; Upload a <code>stage_samples.tsv</code> file or select a saved manifest</li>
            <li><strong>Configure options</strong> &mdash; Set priority, notifications, and QC preferences</li>
        </ol>
    </div>

    <!-- Submission Form -->
    <form id="workset-form" onsubmit="submitWorkset(event)">
        <!-- Step 1: Basic Info -->
        <div class="card">
            <h3 class="card-title"><span class="badge badge-in-progress">1</span> Basic Information</h3>
            <p class="text-muted mb-lg">Identify your workset and select the analysis pipeline. This information helps organize your results and ensures the correct processing workflow is applied.</p>

            <div class="form-group">
                <label for="workset_name" class="form-label required">Workset Name</label>
                <input type="text" id="workset_name" name="workset_name" class="form-control"
                       placeholder="e.g., Patient-Cohort-2024-01" required>
                <p class="form-text">A descriptive name for this processing job. Use alphanumeric characters, dashes, and underscores. This name will appear in your workset list and output files.</p>
            </div>

            <div class="grid grid-2">
                <div class="form-group">
                    <label for="pipeline_type" class="form-label required">Pipeline Type</label>
                    <select id="pipeline_type" name="pipeline_type" class="form-control form-select" required>
                        <option value="">Select pipeline...</option>
                        <option value="test_help">Test Help</option>
                        <option value="germline_wgs_snv">Germline WGS SNV Only</option>
                        <option value="germline_wgs_snv_sv">Germline WGS SNV + SV</option>
                        <option value="germline_wgs_kitchensink">Germline WGS Kitchensink</option>
                    </select>
                    <p class="form-text">
                        <strong>Test Help:</strong> Pipeline test run &bull;
                        <strong>SNV Only:</strong> SNV calling with bwa2a/dppl/deep19 &bull;
                        <strong>SNV + SV:</strong> Adds TIDDIT + Manta &bull;
                        <strong>Kitchensink:</strong> Full WGS analysis + MultiQC
                    </p>
                </div>

                <div class="form-group">
                    <label for="reference_genome" class="form-label required">Reference Genome</label>
                    <select id="reference_genome" name="reference_genome" class="form-control form-select" required>
                        <option value="">Select reference...</option>
                        <option value="GRCh38">GRCh38 (hg38) - Human</option>
                        <option value="GRCh37">GRCh37 (hg19) - Human</option>
                        <option value="T2T-CHM13">T2T-CHM13 - Human (Telomere-to-Telomere)</option>
                        <option value="GRCm39">GRCm39 (mm39) - Mouse</option>
                    </select>
                    <p class="form-text">
                        <strong>GRCh38:</strong> Current standard &bull;
                        <strong>GRCh37:</strong> Legacy compatibility &bull;
                        <strong>T2T:</strong> Complete assembly
                    </p>
                </div>
            </div>

            <div class="form-group">
                <label for="workset_type" class="form-label required">Workset Type</label>
                <div class="d-flex gap-lg flex-wrap">
                    <label class="radio-card" style="flex: 1; min-width: 200px;">
                        <input type="radio" name="workset_type" value="ruo" checked>
                        <div class="radio-card-content">
                            <span class="badge badge-ruo mb-sm">RUO</span>
                            <strong>Research Use Only</strong>
                            <p class="text-muted mb-0" style="font-size: 0.8rem;">Non-clinical research applications. Results are not intended for diagnostic use.</p>
                        </div>
                    </label>
                    <label class="radio-card" style="flex: 1; min-width: 200px;">
                        <input type="radio" name="workset_type" value="clinical">
                        <div class="radio-card-content">
                            <span class="badge badge-clinical mb-sm">Clinical</span>
                            <strong>Clinical / Patient Data</strong>
                            <p class="text-muted mb-0" style="font-size: 0.8rem;">Patient samples with regulatory requirements. Enhanced audit logging and data handling.</p>
                        </div>
                    </label>
                    <label class="radio-card" style="flex: 1; min-width: 200px;">
                        <input type="radio" name="workset_type" value="lsmc">
                        <div class="radio-card-content">
                            <span class="badge badge-lsmc mb-sm">LSMC</span>
                            <strong>Lab Services</strong>
                            <p class="text-muted mb-0" style="font-size: 0.8rem;">Laboratory Services Management Company context. Specialized billing and reporting.</p>
                        </div>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- Step 2: Input Files (Manifest) -->
        <div class="card">
            <h3 class="card-title"><span class="badge badge-in-progress">2</span> Input Files</h3>
            <p class="text-muted mb-lg">Provide a manifest file that defines your analysis inputs. You can upload a new <code>stage_samples.tsv</code> file or select a previously saved manifest.</p>

            <!-- Manifest Content (no tabs needed - manifest is the only input method) -->
            <div id="tab-manifest">
                <div class="alert alert-info mb-lg" style="background: #0d3344; border: 1px solid var(--color-info); border-radius: var(--radius-md); padding: var(--spacing-md); color: #b8d4e8;">
                    <i class="fas fa-info-circle text-info"></i>
                    <strong style="color: #fff;">Best for:</strong> Advanced users with pre-configured sample sheets. Choose a saved manifest or upload a <code style="background: #1a4a5e; padding: 2px 6px; border-radius: 3px;">stage_samples.tsv</code> that defines your analysis inputs and metadata.
                </div>

                <!-- Saved Manifests Section -->
                <div class="form-group">
                    <label class="form-label">Use Saved Manifest</label>
                    <div class="d-flex gap-md align-center">
                        <select id="saved-manifest-select" class="form-control form-select" style="flex: 1;" onchange="onSavedManifestSelected()">
                            <option value="">Choose a saved manifest...</option>
                        </select>
                        <button type="button" class="btn btn-outline" onclick="refreshSavedManifestsList()" title="Refresh list">
                            <i class="fas fa-sync"></i>
                        </button>
                    </div>
                    <p class="form-text">Select a previously saved manifest from your account.</p>
                </div>

                <div id="saved-manifest-preview" class="d-none mb-lg">
                    <div class="card" style="background: #1a2a33; margin-top: var(--spacing-md);">
                        <div class="d-flex justify-between align-center mb-md">
                            <h4 style="margin: 0; color: #fff;"><i class="fas fa-file-alt text-accent"></i> <span id="saved-manifest-name">Manifest</span></h4>
                            <span class="badge badge-info" id="saved-manifest-sample-count">0 samples</span>
                        </div>
                        <p id="saved-manifest-created" class="text-muted mb-md"></p>
                    </div>
                </div>

                <hr style="border: none; border-top: 1px solid var(--color-gray-700); margin: var(--spacing-lg) 0;">

                <div class="form-group">
                    <label for="manifest_file" class="form-label">Or Upload New Manifest (TSV)</label>
                    <div class="file-upload" onclick="document.getElementById('manifest-input').click()">
                        <div class="file-upload-icon"><i class="fas fa-file-alt"></i></div>
                        <p class="file-upload-text">
                            Click to upload your <code>stage_samples.tsv</code> manifest
                        </p>
                        <input type="file" id="manifest-input" class="file-upload-input" accept=".tsv,.csv,.txt" onchange="previewManifest(this)">
                    </div>
                    <div id="manifest-preview" class="mt-lg d-none">
                        <h4>Manifest Preview</h4>
                        <div class="table-container">
                            <table class="table" id="manifest-table" data-sortable>
                                <thead id="manifest-thead"></thead>
                                <tbody id="manifest-tbody"></tbody>
                            </table>
                        </div>
                        <p class="text-muted mt-md"><span id="manifest-row-count">0</span> samples detected</p>
                    </div>
                </div>
                <div class="mt-lg" style="background: #1a2a33; border-radius: var(--radius-md); padding: var(--spacing-md); border: 1px solid #2a3a44;">
                    <p class="mb-sm" style="color: #fff;"><strong>Need to create a manifest?</strong></p>
                    <p class="mb-md" style="color: #a8b8c8;">Use our Manifest Generator to create a <code>stage_samples.tsv</code> file from your registered files.</p>
                    <a href="/portal/manifest-generator" class="btn btn-outline btn-sm">
                        <i class="fas fa-magic"></i> Open Manifest Generator
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Step 3: Processing Options -->
        <div class="card">
            <h3 class="card-title"><span class="badge badge-in-progress">3</span> Processing Options</h3>
            <p class="text-muted mb-lg">Configure execution priority, notifications, and output options for your workset.</p>

            <div class="grid grid-2">
                <div class="form-group">
                    <label for="priority" class="form-label">Priority</label>
                    <select id="priority" name="priority" class="form-control form-select">
                        <option value="normal">Normal (Standard pricing)</option>
                        <option value="high">High (2x cost, faster start)</option>
                        <option value="low">Low (50% cost, spot instances)</option>
                    </select>
                    <p class="form-text">
                        <strong>Normal:</strong> Queue-based processing, typically starts within 1 hour<br>
                        <strong>High:</strong> Dedicated resources, starts immediately<br>
                        <strong>Low:</strong> Uses interruptible spot instances, may be delayed
                    </p>
                </div>

                <div class="form-group">
                    <label for="notification_email" class="form-label">Notification Email</label>
                    <input type="email" id="notification_email" name="notification_email" class="form-control"
                           placeholder="notify@company.com" value="{{ customer.email | default('') }}">
                    <p class="form-text">Receive email notifications when your workset completes, fails, or requires attention.</p>
                </div>
            </div>

            <hr style="border: none; border-top: 1px solid var(--color-gray-700); margin: var(--spacing-lg) 0;">

            <h4 style="margin-bottom: var(--spacing-md);">Cluster Selection <span class="text-error">*</span></h4>
            <p class="text-muted mb-md">Select a compute cluster for workset execution. The S3 bucket for your workset data is determined by the cluster you select.</p>

            <div class="form-group">
                <label for="preferred_cluster" class="form-label">Cluster <span class="text-error">*</span></label>
                <div class="input-group">
                    <select id="preferred_cluster" name="preferred_cluster" class="form-control form-select" required>
                        <option value="">-- Select a cluster --</option>
                    </select>
                    <button type="button" class="btn btn-outline" onclick="refreshClusterList()">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                </div>
                <p class="form-text" id="cluster-suggestion-text">
                    <i class="fas fa-info-circle text-info"></i>
                    Choose a cluster in the same region as your data for optimal performance.
                </p>
            </div>

            <!-- Region selection modal for "Create Cluster" option -->
            <div id="create-cluster-modal" class="modal" style="display: none;">
                <div class="modal-backdrop" onclick="closeCreateClusterModal()"></div>
                <div class="modal-content" style="max-width: 450px;">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="fas fa-plus-circle"></i> Create New Cluster</h5>
                        <button type="button" class="close" onclick="closeCreateClusterModal()">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p class="text-muted mb-md">Select the region where you want to create a new cluster. This should match where your data is stored.</p>
                        <div class="form-group">
                            <label for="new-cluster-region" class="form-label">Region</label>
                            <select id="new-cluster-region" class="form-control form-select">
                                {% for region in allowed_regions | default(['us-west-2', 'eu-central-1', 'ap-south-1']) %}
                                <option value="{{ region }}">{{ region }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" onclick="closeCreateClusterModal()">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="openClusterCreation()">
                            <i class="fas fa-external-link-alt"></i> Open Cluster Manager
                        </button>
                    </div>
                </div>
            </div>

            <div id="cluster-list-container" class="mt-md" style="display: none;">
                <div class="table-container" style="max-height: 200px; overflow-y: auto;">
                    <table class="table table-sm" id="cluster-list-table">
                        <thead>
                            <tr>
                                <th style="width: 30px;"></th>
                                <th>Cluster Name</th>
                                <th>Region</th>
                                <th>Status</th>
                                <th>Match</th>
                            </tr>
                        </thead>
                        <tbody id="cluster-list-body">
                            <tr><td colspan="5" class="text-center text-muted">Loading clusters...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <hr style="border: none; border-top: 1px solid var(--color-gray-700); margin: var(--spacing-lg) 0;">

            <h4 style="margin-bottom: var(--spacing-md);">Output Options</h4>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="enable_qc" name="enable_qc" checked>
                    <span><strong>Enable Quality Control reports</strong></span>
                </label>
                <p class="form-text" style="margin-left: 24px;">Generate FastQC reports for individual samples and MultiQC summary reports. Recommended for all production runs.</p>
            </div>

            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="archive_results" name="archive_results" checked>
                    <span><strong>Archive results to S3 Glacier after 30 days</strong></span>
                </label>
                <p class="form-text" style="margin-left: 24px;">Automatically move results to low-cost Glacier storage after 30 days. Reduces storage costs by ~80% while keeping data accessible.</p>
            </div>
        </div>

        <!-- Cost Estimate -->
        <div class="card" id="cost-estimate">
            <h3 class="card-title"><i class="fas fa-calculator"></i> Cost Estimate</h3>
            <p class="text-muted mb-lg">Estimated costs based on your selected options. Actual costs may vary depending on data complexity and coverage depth.</p>

            <div id="cost-loading" class="d-none text-center p-lg">
                <i class="fas fa-spinner fa-spin fa-2x text-accent"></i>
                <p class="text-muted mt-md">Calculating estimate...</p>
            </div>

            <div id="cost-details">
                <div class="grid grid-4">
                    <div>
                        <div class="stat-value text-accent" id="est-cost">$0.00</div>
                        <div class="stat-label">Estimated Cost</div>
                    </div>
                    <div>
                        <div class="stat-value" id="est-time">0h</div>
                        <div class="stat-label">Estimated Time</div>
                    </div>
                    <div>
                        <div class="stat-value" id="est-vcpu">0</div>
                        <div class="stat-label">vCPU Hours</div>
                    </div>
                    <div>
                        <div class="stat-value" id="est-samples">0</div>
                        <div class="stat-label">Samples</div>
                    </div>
                </div>

                <div class="mt-lg" id="cost-breakdown" style="background: #1a2a33; border-radius: var(--radius-md); padding: var(--spacing-md); border: 1px solid #2a3a44;">
                    <h5 style="margin: 0 0 var(--spacing-sm) 0; color: #fff;">Cost Breakdown</h5>
                    <div class="grid grid-2" style="gap: var(--spacing-sm);">
                        <div class="d-flex justify-between">
                            <span class="text-muted">Compute:</span>
                            <span id="cost-compute">$0.00</span>
                        </div>
                        <div class="d-flex justify-between">
                            <span class="text-muted">Storage:</span>
                            <span id="cost-storage">$0.00</span>
                        </div>
                        <div class="d-flex justify-between">
                            <span class="text-muted">Data Transfer:</span>
                            <span id="cost-transfer">$0.00</span>
                        </div>
                        <div class="d-flex justify-between">
                            <span class="text-muted">Priority Modifier:</span>
                            <span id="cost-priority">1.0x</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-lg" style="background: #0d3344; border-radius: var(--radius-md); padding: var(--spacing-md); border: 1px solid var(--color-info);">
                <p style="font-size: 0.875rem; margin: 0; color: #b8d4e8;">
                    <i class="fas fa-info-circle text-info"></i>
                    <strong style="color: #fff;">How costs are calculated:</strong> Base compute cost + storage + data transfer.
                    High priority adds a 2x multiplier. Low priority uses spot pricing (~50% savings but may be interrupted).
                    QC reports add ~5% to compute time. View <a href="/portal/usage" class="text-accent">detailed pricing</a>.
                </p>
            </div>
        </div>
        
        <!-- Submit -->
        <div class="d-flex justify-between mt-xl">
            <a href="/portal/worksets" class="btn btn-outline">Cancel</a>
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="fas fa-rocket"></i> Submit Workset
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/worksets.js?v={{ cache_bust | default('1') }}"></script>
{% endblock %}