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

{% block title %}Register Files - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <a href="/portal/files" class="text-muted mb-md d-block">
        <i class="fas fa-arrow-left"></i> Back to File Registry
    </a>
    
    <!-- Page Header -->
    <div class="page-header">
        <h1 class="page-title">Register Files for Analysis</h1>
        <p class="page-subtitle">Register files from your linked S3 buckets with sequencing metadata</p>
    </div>
    
    <!-- Registration Mode Tabs -->
    <div class="card mb-xl">
        <div class="tab-nav">
            <button class="tab-btn active" onclick="switchTab('single')">
                <i class="fas fa-file"></i> Single File
            </button>
            <button class="tab-btn" onclick="switchTab('bulk')">
                <i class="fas fa-files"></i> Bulk Import
            </button>
            <button class="tab-btn" onclick="switchTab('discover')">
                <i class="fas fa-search"></i> Auto-Discover
            </button>
        </div>
    </div>
    
    <!-- Single File Registration -->
    <div id="tab-single" class="tab-content">
        <form id="register-single-form" onsubmit="registerSingleFile(event)">
            <!-- File Selection -->
            <div class="card mb-lg">
                <h3 class="card-title"><i class="fas fa-file"></i> File Selection</h3>
                
                <div class="grid grid-2 gap-lg">
                    <div class="form-group">
                        <label class="form-label required">S3 URI</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="single-s3-uri" 
                                   placeholder="s3://bucket-name/path/to/file.fastq.gz" required>
                            <button type="button" class="btn btn-outline" onclick="browseS3()">
                                <i class="fas fa-folder-open"></i> Browse
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">File Format</label>
                        <select class="form-control form-select" id="single-format">
                            <option value="">Auto-detect</option>
                            <option value="fastq">FASTQ</option>
                            <option value="bam">BAM</option>
                            <option value="cram">CRAM</option>
                            <option value="vcf">VCF</option>
                        </select>
                    </div>
                </div>
                
                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label">Read Number</label>
                        <select class="form-control form-select" id="single-read-number">
                            <option value="">Auto-detect</option>
                            <option value="1">Read 1 (R1)</option>
                            <option value="2">Read 2 (R2)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Paired File (R2)</label>
                        <input type="text" class="form-control" id="single-paired-file"
                               placeholder="s3://bucket/path/to/file_R2.fastq.gz">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Tags</label>
                        <input type="text" class="form-control" id="single-tags"
                               placeholder="Comma-separated tags">
                    </div>
                </div>
            </div>
            
            <!-- Subject Metadata -->
            <div class="card mb-lg">
                <h3 class="card-title"><i class="fas fa-user"></i> Subject (Person) Information</h3>
                <p class="text-muted mb-lg">The individual from whom the sample was collected</p>
                
                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label required">Subject ID</label>
                        <input type="text" class="form-control" id="single-subject-id" 
                               placeholder="e.g., HG002, PATIENT-001" required>
                        <small class="form-text">Unique identifier for the individual</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Biological Sex</label>
                        <select class="form-control form-select" id="single-bio-sex">
                            <option value="">Unknown</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Date of Birth</label>
                        <input type="date" class="form-control" id="single-dob">
                    </div>
                </div>
            </div>
            
            <!-- Biosample Metadata -->
            <div class="card mb-lg">
                <h3 class="card-title"><i class="fas fa-vial"></i> Biosample Information</h3>
                <p class="text-muted mb-lg">The physical specimen collected from the subject</p>
                
                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label required">Biosample ID</label>
                        <input type="text" class="form-control" id="single-biosample-id" 
                               placeholder="e.g., SAMPLE-001" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Sample Type</label>
                        <select class="form-control form-select" id="single-sample-type">
                            <option value="blood">Blood</option>
                            <option value="saliva">Saliva</option>
                            <option value="buccal">Buccal Swab</option>
                            <option value="tissue">Tissue</option>
                            <option value="tumor">Tumor</option>
                            <option value="ffpe">FFPE</option>
                            <option value="organoid">Organoid</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Tissue Type</label>
                        <input type="text" class="form-control" id="single-tissue-type"
                               placeholder="e.g., lung, liver, brain">
                    </div>
                </div>
                
                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label">Collection Date</label>
                        <input type="date" class="form-control" id="single-collection-date">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Preservation Method</label>
                        <select class="form-control form-select" id="single-preservation">
                            <option value="">None/Fresh</option>
                            <option value="frozen">Frozen</option>
                            <option value="ffpe">FFPE</option>
                            <option value="rnalater">RNAlater</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Tumor Fraction</label>
                        <input type="number" class="form-control" id="single-tumor-fraction"
                               min="0" max="100" step="0.1" placeholder="e.g., 30">
                        <small class="form-text">Percentage (0-100), if applicable</small>
                    </div>
                </div>
            </div>

            <!-- Sequencing Metadata -->
            <div class="card mb-lg">
                <h3 class="card-title"><i class="fas fa-dna"></i> Sequencing Information</h3>
                <p class="text-muted mb-lg">Details about how the sample was sequenced</p>

                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label">Sequencing Platform</label>
                        <select class="form-control form-select" id="single-platform">
                            <option value="illumina">Illumina</option>
                            <option value="ont">Oxford Nanopore</option>
                            <option value="pacbio">PacBio</option>
                            <option value="element">Element Biosciences</option>
                            <option value="ultima">Ultima Genomics</option>
                            <option value="mgi">MGI/BGI</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Instrument Model</label>
                        <input type="text" class="form-control" id="single-instrument"
                               placeholder="e.g., NovaSeq 6000, PromethION">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Library Prep</label>
                        <select class="form-control form-select" id="single-library-prep">
                            <option value="">Not specified</option>
                            <option value="pcr_free">PCR-Free</option>
                            <option value="pcr_amp">PCR Amplified</option>
                            <option value="wes">Whole Exome</option>
                            <option value="targeted">Targeted Panel</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label">Read Length</label>
                        <input type="number" class="form-control" id="single-read-length"
                               placeholder="e.g., 150">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Flowcell ID</label>
                        <input type="text" class="form-control" id="single-flowcell"
                               placeholder="e.g., HXXXX">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Run Date</label>
                        <input type="date" class="form-control" id="single-run-date">
                    </div>
                </div>
            </div>

            <!-- Control VCFs -->
            <div class="card mb-lg">
                <h3 class="card-title"><i class="fas fa-check-double"></i> Control/Reference VCFs</h3>
                <p class="text-muted mb-lg">Optional: Specify control VCFs for concordance analysis</p>

                <div class="grid grid-2 gap-lg">
                    <div class="form-group">
                        <label class="form-label">SNV Control VCF</label>
                        <input type="text" class="form-control" id="single-snv-vcf"
                               placeholder="s3://bucket/path/to/snv_control.vcf.gz">
                        <small class="form-text">Truth VCF for SNV/Indel concordance</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">SV Control VCF</label>
                        <input type="text" class="form-control" id="single-sv-vcf"
                               placeholder="s3://bucket/path/to/sv_control.vcf.gz">
                        <small class="form-text">Truth VCF for structural variant concordance</small>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="d-flex justify-end gap-md">
                <button type="button" class="btn btn-outline" onclick="resetForm()">Reset</button>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Register File
                </button>
            </div>
        </form>
    </div>

    <!-- Bulk Import Tab -->
    <div id="tab-bulk" class="tab-content d-none">
        <div class="card mb-lg">
            <h3 class="card-title"><i class="fas fa-file-csv"></i> Bulk Import from CSV/TSV</h3>
            <p class="text-muted mb-lg">Upload a CSV or TSV file with file information and metadata</p>

            <div class="form-group">
                <label class="form-label">Upload File</label>
                <div class="file-upload-zone" id="bulk-upload-zone" onclick="document.getElementById('bulk-file-input').click()">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <p>Click to upload or drag & drop</p>
                    <small>Accepts CSV or TSV files</small>
                    <input type="file" id="bulk-file-input" accept=".csv,.tsv" class="d-none" onchange="handleBulkFile(event)">
                </div>
            </div>

            <div class="d-flex gap-md mb-lg">
                <a href="/api/files/manifest/template" class="btn btn-outline">
                    <i class="fas fa-download"></i> Download Template
                </a>
                <button class="btn btn-outline" onclick="showColumnMapping()">
                    <i class="fas fa-columns"></i> Column Mapping Help
                </button>
            </div>

            <!-- Preview Table -->
            <div id="bulk-preview" class="d-none">
                <h4>Preview (first 10 rows)</h4>
                <div class="table-container">
                    <table class="table" id="bulk-preview-table" data-sortable>
                        <thead id="bulk-preview-header"></thead>
                        <tbody id="bulk-preview-body"></tbody>
                    </table>
                </div>
                <div class="d-flex justify-end gap-md mt-lg">
                    <button class="btn btn-outline" onclick="cancelBulkImport()">Cancel</button>
                    <button class="btn btn-primary" onclick="executeBulkImport()">
                        <i class="fas fa-upload"></i> Import Files
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Auto-Discover Tab -->
    <div id="tab-discover" class="tab-content d-none">
        <div class="card mb-lg">
            <h3 class="card-title"><i class="fas fa-search"></i> Auto-Discover Files</h3>
            <p class="text-muted mb-lg">Scan a linked bucket to discover and register files automatically</p>

            <!-- Bucket Selection -->
            <div class="grid grid-2 gap-lg">
                <div class="form-group">
                    <label class="form-label required">Select Bucket</label>
                    <select class="form-control form-select" id="discover-bucket" required>
                        <option value="">-- Select a linked bucket --</option>
                        {% for bucket in buckets %}
                        <option value="{{ bucket.bucket_id }}">s3://{{ bucket.bucket_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Prefix Filter</label>
                    <input type="text" class="form-control" id="discover-prefix"
                           placeholder="data/fastq/">
                </div>
            </div>

            <!-- File Type Selection -->
            <div class="form-group">
                <label class="form-label">File Types to Discover</label>
                <div class="d-flex gap-lg flex-wrap">
                    <label class="checkbox-label">
                        <input type="checkbox" class="discover-type" value="fastq" checked> FASTQ
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="discover-type" value="bam"> BAM
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="discover-type" value="cram"> CRAM
                    </label>
                    <label class="checkbox-label">
                        <input type="checkbox" class="discover-type" value="vcf"> VCF
                    </label>
                </div>
            </div>

            <!-- Registration Metadata -->
            <div class="card mb-lg" style="background: var(--color-gray-50); border: 1px solid var(--color-gray-200);">
                <h4 class="card-title" style="font-size: 0.95rem; margin-bottom: var(--spacing-lg);">
                    <i class="fas fa-info-circle"></i> Registration Metadata
                </h4>
                <p class="text-muted mb-lg" style="font-size: 0.9rem;">These values will be applied to all discovered files</p>

                <div class="grid grid-3 gap-lg">
                    <div class="form-group">
                        <label class="form-label required">Subject ID</label>
                        <input type="text" class="form-control" id="discover-subject-id"
                               placeholder="e.g., HG002, PATIENT-001" required>
                        <small class="form-text">Unique identifier for the individual</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label required">Biosample ID</label>
                        <input type="text" class="form-control" id="discover-biosample-id"
                               placeholder="e.g., BS001, SAMPLE-001" required>
                        <small class="form-text">Unique identifier for the sample</small>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Sequencing Platform</label>
                        <select class="form-control form-select" id="discover-platform">
                            <option value="NOVASEQX">NovaSeq X</option>
                            <option value="NOVASEQ6000">NovaSeq 6000</option>
                            <option value="HISEQ">HiSeq</option>
                            <option value="MISEQ">MiSeq</option>
                            <option value="ISEQ">iSeq</option>
                            <option value="OTHER">Other</option>
                        </select>
                    </div>
                </div>
            </div>

            <button class="btn btn-primary" onclick="startDiscovery()">
                <i class="fas fa-search"></i> Start Discovery
            </button>

            <!-- Discovery Results -->
            <div id="discover-results" class="mt-xl d-none">
                <hr class="mb-lg">
                <div id="discover-results-content"></div>
            </div>
        </div>
    </div>
</div>

<style>
.tab-nav { display: flex; gap: var(--spacing-sm); border-bottom: 2px solid var(--color-gray-200); padding-bottom: var(--spacing-md); }
.tab-btn { background: none; border: none; padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; font-size: 1rem; color: var(--color-gray-600); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.tab-btn:hover { color: var(--color-accent); }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600; }
.tab-btn i { margin-right: var(--spacing-sm); }
.required::after { content: ' *'; color: var(--color-error); }
.input-group { display: flex; gap: var(--spacing-sm); align-items: center; }
.input-group .form-control { flex: 1; }
.input-group .input-icon { color: var(--color-gray-500); padding: 0 var(--spacing-sm); }
.file-upload-zone { border: 2px dashed var(--color-gray-400); border-radius: var(--radius-lg); padding: var(--spacing-2xl); text-align: center; cursor: pointer; transition: all 0.2s; }
.file-upload-zone:hover { border-color: var(--color-accent); background: var(--color-gray-100); }
.file-upload-zone i { font-size: 2.5rem; color: var(--color-gray-500); margin-bottom: var(--spacing-md); }
.checkbox-label { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; }
.checkbox-label input { width: 18px; height: 18px; accent-color: var(--color-accent); }

/* Discovery controls */
.discover-controls { background: var(--color-gray-50); padding: var(--spacing-lg); border-radius: var(--radius-md); border: 1px solid var(--color-gray-200); }
.discovered-files-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); }
.discovered-file { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-gray-100); font-size: 0.9rem; }
.discovered-file:last-child { border-bottom: none; }
.discovered-file:hover { background: var(--color-gray-50); }
.discovered-file .discover-select { width: 16px; height: 16px; accent-color: var(--color-accent); flex-shrink: 0; }
.discovered-file .file-key { flex: 1; font-family: monospace; font-size: 0.85rem; word-break: break-all; }
.discovered-file .file-format { min-width: 60px; text-align: center; }
.discovered-file .file-size { min-width: 80px; text-align: right; }
.gap-md { gap: var(--spacing-md); }
</style>
{% endblock %}

{% block extra_js %}
<script>
// Set customer ID for API calls
window.CUSTOMER_ID = '{{ customer.customer_id if customer else "default-customer" }}';

function switchTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(t => t.classList.add('d-none'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + tabName).classList.remove('d-none');
    // Find the correct tab button and activate it
    const tabBtns = document.querySelectorAll('.tab-btn');
    tabBtns.forEach(btn => {
        if (btn.textContent.toLowerCase().includes(tabName.toLowerCase()) ||
            btn.getAttribute('onclick')?.includes(`'${tabName}'`)) {
            btn.classList.add('active');
        }
    });
}

// Handle URL parameters on page load
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('tab');
    const bucketId = urlParams.get('bucket_id');

    // Switch to specified tab
    if (tab && ['single', 'bulk', 'discover'].includes(tab)) {
        switchTab(tab);
    }

    // Pre-select bucket if specified
    if (bucketId) {
        const bucketSelect = document.getElementById('discover-bucket');
        if (bucketSelect) {
            bucketSelect.value = bucketId;
        }
    }
});

function browseS3() {
    // Try to get bucket from Auto-Discover tab first
    const discoverBucketSelect = document.getElementById('discover-bucket');
    let bucketId = discoverBucketSelect?.value;

    if (bucketId) {
        // Open browser for the selected bucket
        window.open(`/portal/files/browse/${bucketId}?select=true`, 'S3 Browser', 'width=1000,height=700');
    } else {
        // No bucket selected - redirect to bucket management
        showToast('Please select a bucket first. Redirecting to Bucket Management...', 'info');
        setTimeout(() => {
            window.location.href = '/portal/files/buckets';
        }, 1500);
    }
}
</script>
<script src="/static/js/file-registry.js?v={{ cache_bust | default('1') }}"></script>
{% endblock %}