{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="page-header">
        <div>
            <h1 class="page-title">Workset Manifest Generator</h1>
            <p class="page-subtitle">Create and save <code>analysis_samples.tsv</code> manifests with the PR19 editor, now backed by current Ursa manifest records.</p>
        </div>
    </div>

    <div style="max-width: 95%; margin: 0 auto;">
        <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="workset_euid" class="form-label">Workset</label>
                    <select id="workset_euid" class="form-control form-select">
                        <option value="">Select workset...</option>
                        {% for workset in worksets %}
                        <option value="{{ workset.workset_euid }}">{{ workset.name }} ({{ workset.workset_euid }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="manifest-save-name" class="form-label">Manifest Name</label>
                    <input type="text" id="manifest-save-name" class="form-control" placeholder="WK1234">
                </div>
                <div class="form-group">
                    <label for="run_id" class="form-label">Run ID</label>
                    <input type="text" id="run_id" class="form-control" placeholder="RU1">
                </div>
                <div class="form-group">
                    <label for="stage_target" class="form-label">Stage Target</label>
                    <input type="text" id="stage_target" class="form-control" value="/staging/staged_external_sequencing_data">
                </div>
            </div>
        </div>

        <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" id="add-input-btn">
                    <i class="fas fa-plus"></i> Add Input
                </button>
            </div>

            <p class="text-muted mb-md">Each analysis input becomes a row in <code>analysis_samples.tsv</code>. Edit rows individually, import a TSV, or browse linked buckets to select FASTQ files.</p>

            <div id="inputs-container"></div>

            <div class="mt-lg">
                <input type="file" id="tsv-upload" accept=".tsv,.csv,.txt" class="d-none">
                <div class="d-flex gap-sm flex-wrap">
                    <button type="button" class="btn btn-outline btn-sm" id="import-tsv-btn">
                        <i class="fas fa-file-upload"></i> Import TSV/CSV
                    </button>
                    <button type="button" class="btn btn-outline btn-sm" id="download-template-btn">
                        <i class="fas fa-file-download"></i> Download Template
                    </button>
                    <button type="button" class="btn btn-outline btn-sm" id="discover-s3-btn">
                        <i class="fas fa-search"></i> Discover from S3
                    </button>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <div class="d-flex gap-sm">
                    <button class="btn btn-outline btn-sm" type="button" id="copy-manifest-btn">
                        <i class="fas fa-copy"></i> Copy
                    </button>
                    <button class="btn btn-outline btn-sm" type="button" id="save-manifest-btn">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <button class="btn btn-primary btn-sm" type="button" id="download-manifest-btn">
                        <i class="fas fa-download"></i> Download
                    </button>
                </div>
                <h3 class="card-title">Manifest Preview (TSV)</h3>
            </div>
            <div class="json-block" style="max-height: 280px;">
                <pre id="manifest-preview" style="white-space: pre;"># Add analysis inputs to generate the manifest</pre>
            </div>

            <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="saved-manifest-select" class="form-label">Load saved manifest</label>
                        <select id="saved-manifest-select" class="form-control">
                            <option value="">(none)</option>
                            {% for manifest in manifests %}
                            <option value="{{ manifest.manifest_euid }}">{{ manifest.name }} ({{ manifest.manifest_euid }})</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button class="btn btn-outline btn-sm" type="button" id="refresh-saved-manifests-btn">
                        <i class="fas fa-sync"></i> Refresh
                    </button>
                    <button class="btn btn-primary btn-sm" type="button" id="load-saved-manifest-btn">
                        <i class="fas fa-upload"></i> Load
                    </button>
                    <button class="btn btn-outline btn-sm" type="button" id="download-saved-manifest-btn">
                        <i class="fas fa-download"></i> Download
                    </button>
                </div>
            </div>

            <div class="mt-md p-md" style="background: var(--color-gray-100); border-radius: var(--radius-md); font-size: 0.8rem;">
                <strong>Template columns:</strong>
                <code id="manifest-template-columns">{{ manifest_columns | join(', ') }}</code>
            </div>
        </div>
    </div>
</div>

<div class="modal-overlay" id="input-edit-modal">
    <div class="modal-content" style="max-width: 900px;">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Analysis Input</h3>
            <button class="modal-close" type="button" onclick="closeModal('input-edit-modal')">&times;</button>
        </div>
        <div class="modal-body" id="input-modal-body"></div>
        <div class="modal-footer">
            <button class="btn btn-outline" type="button" onclick="closeModal('input-edit-modal')">Cancel</button>
            <button class="btn btn-primary" type="button" id="save-input-modal-btn">Save</button>
        </div>
    </div>
</div>

<div class="modal-overlay" id="file-browser-modal">
    <div class="modal-content" style="max-width: 900px;">
        <div class="modal-header">
            <h3><i class="fas fa-folder-open"></i> Select Source Path from S3</h3>
            <button class="modal-close" type="button" onclick="closeModal('file-browser-modal')">&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"></select>
                </div>
                <a href="/buckets" target="_blank" class="btn btn-outline btn-sm">
                    <i class="fas fa-external-link-alt"></i> Manage Buckets
                </a>
            </div>
            <div class="mb-md">
                <nav class="breadcrumb" id="browser-breadcrumb"></nav>
            </div>
            <div id="browser-file-list" style="max-height: 400px; overflow-y: auto;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" id="browser-use-prefix-btn">
                Use Current Prefix
            </button>
            <button class="btn btn-outline" type="button" onclick="closeModal('file-browser-modal')">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);
}
.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;
}
.manifest-fieldset {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md);
}
.manifest-fieldset legend {
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0 var(--spacing-xs);
}
.file-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-gray-200);
}
.file-list-item.folder { cursor: pointer; }
.file-list-item:hover { background: rgba(15, 52, 96, 0.04); }
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.breadcrumb-item {
    color: var(--color-accent);
}
</style>
{% endblock %}

{% block extra_js %}
<script>
(() => {
    const pageData = UrsaPortal.parsePageData();
    const editorData = pageData.manifest_editor || {};
    const coerceList = (value) => Array.isArray(value) ? value.filter((item) => String(item || '').trim()) : [];
    let MANIFEST_COLUMNS = coerceList(editorData.columns).length
        ? coerceList(editorData.columns)
        : coerceList(pageData.manifest_columns);
    let SOURCE_COLUMNS = coerceList(editorData.source_columns);
    let BROWSE_COLUMNS = new Set(coerceList(editorData.browse_columns));
    const DIRECTORY_COLUMNS = new Set(['PATH_TO_CONCORDANCE_DATA_DIR']);
    let COLUMN_GROUPS = coerceList(editorData.column_groups);
    let COLUMN_DEFAULTS = {
        ...(editorData.defaults || {}),
    };
    let sampleTypeOptions = coerceList(editorData.sample_types);
    let libraryPrepOptions = coerceList(editorData.library_preps);
    let seqPlatformOptions = coerceList(editorData.seq_platforms);
    let seqVendorOptions = coerceList(editorData.seq_vendors);
    let analysisInputs = [];
    let inputIndex = 0;
    let currentEditIndex = null;
    let currentFileBrowserTarget = null;
    let currentBucketId = null;
    let currentBrowserPrefix = '';

    function normalizeOption(value) {
        return String(value || '').trim().replace(/\s+/g, ' ').toLocaleLowerCase();
    }

    function mergeOptionValue(field, value) {
        const cleaned = String(value || '').trim().replace(/\s+/g, ' ');
        if (!cleaned) return;
        const target = field === 'SAMPLE_TYPE' ? sampleTypeOptions : libraryPrepOptions;
        const seen = new Set(target.map((item) => normalizeOption(item)));
        if (!seen.has(normalizeOption(cleaned))) {
            target.push(cleaned);
        }
    }

    function updateEditorOptions(payload) {
        const columns = coerceList(payload.columns);
        const sourceColumns = coerceList(payload.source_columns);
        const browseColumns = coerceList(payload.browse_columns);
        const columnGroups = coerceList(payload.column_groups);
        if (columns.length) {
            MANIFEST_COLUMNS = columns;
        }
        if (sourceColumns.length) {
            SOURCE_COLUMNS = sourceColumns;
        }
        if (browseColumns.length) {
            BROWSE_COLUMNS = new Set(browseColumns);
        }
        if (columnGroups.length) {
            COLUMN_GROUPS = columnGroups;
        }
        COLUMN_DEFAULTS = {
            ...COLUMN_DEFAULTS,
            ...(payload.defaults || {}),
        };
        sampleTypeOptions = coerceList(payload.sample_types);
        libraryPrepOptions = coerceList(payload.library_preps);
        seqPlatformOptions = coerceList(payload.seq_platforms);
        seqVendorOptions = coerceList(payload.seq_vendors);
        renderTemplateColumns();
    }

    async function refreshManifestEditorOptions() {
        const payload = await UrsaPortal.apiRequest('/api/v1/manifest-editor/options');
        updateEditorOptions(payload);
    }

    function renderTemplateColumns() {
        const node = document.getElementById('manifest-template-columns');
        if (node) {
            node.textContent = MANIFEST_COLUMNS.join(', ');
        }
    }

    function initialInput(data = {}) {
        const idx = inputIndex++;
        const input = { idx };
        MANIFEST_COLUMNS.forEach((column) => {
            input[column] = COLUMN_DEFAULTS[column] || '';
        });
        input.RUN_ID = document.getElementById('run_id')?.value || input.RUN_ID || 'R0';
        input.STAGE_TARGET = (
            document.getElementById('stage_target')?.value
            || input.STAGE_TARGET
            || '/staging/staged_external_sequencing_data'
        );
        Object.entries(data || {}).forEach(([key, value]) => {
            if (MANIFEST_COLUMNS.includes(key)) {
                input[key] = String(value ?? '');
            }
        });
        input.idx = idx;
        return input;
    }

    function renderInputs() {
        const container = document.getElementById('inputs-container');
        container.innerHTML = '';
        analysisInputs.forEach((input) => {
            const row = document.createElement('div');
            const sourceField = SOURCE_COLUMNS.find((field) => String(input[field] || '').trim());
            const sourceValue = sourceField ? String(input[sourceField] || '') : '';
            row.className = 'analysis-input-row';
            row.innerHTML = `
                <div class="input-header">
                    <span class="input-title">${escapeHtml(input.SAMPLE_ID || `(Input ${input.idx + 1})`)}</span>
                    <div class="d-flex gap-sm">
                        <button type="button" class="btn btn-outline btn-sm" data-edit="${input.idx}">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                        <button type="button" class="btn btn-outline btn-sm" data-remove="${input.idx}" ${analysisInputs.length === 1 ? 'disabled' : ''}>
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="input-summary">
                    <span><strong>Source:</strong> ${escapeHtml(sourceField ? `${sourceField}: ${(sourceValue || '').split('/').pop()}` : 'Not set')}</span>
                    <span class="ml-md"><strong>Platform:</strong> ${escapeHtml(input.SEQ_PLATFORM)}</span>
                    <span class="ml-md"><strong>Type:</strong> ${escapeHtml(input.SAMPLE_TYPE)}</span>
                </div>
            `;
            row.querySelector('[data-edit]')?.addEventListener('click', () => editInput(input.idx));
            row.querySelector('[data-remove]')?.addEventListener('click', () => removeInput(input.idx));
            container.appendChild(row);
        });
    }

    function updateManifestPreview() {
        const preview = document.getElementById('manifest-preview');
        if (!analysisInputs.length) {
            preview.textContent = '# Add analysis inputs to generate the manifest';
            return;
        }
        const tsv = generateManifestTSV();
        preview.textContent = tsv;
    }

    function currentManifestRows() {
        return analysisInputs.map((input) => {
            const row = {};
            MANIFEST_COLUMNS.forEach((column) => {
                if (column === 'RUN_ID') {
                    row[column] = input.RUN_ID || document.getElementById('run_id')?.value || '';
                } else if (column === 'STAGE_TARGET') {
                    row[column] = (
                        input.STAGE_TARGET
                        || document.getElementById('stage_target')?.value
                        || COLUMN_DEFAULTS.STAGE_TARGET
                        || ''
                    );
                } else {
                    row[column] = String(input[column] ?? '');
                }
            });
            return row;
        });
    }

    function generateManifestTSV() {
        const lines = [MANIFEST_COLUMNS.join('\t')];
        currentManifestRows().forEach((row) => {
            lines.push(MANIFEST_COLUMNS.map((column) => row[column] || '').join('\t'));
        });
        return lines.join('\n');
    }

    function addAnalysisInput(data = null) {
        analysisInputs.push(initialInput(data || {}));
        renderInputs();
        updateManifestPreview();
    }

    function removeInput(idx) {
        if (analysisInputs.length <= 1) return;
        analysisInputs = analysisInputs.filter((input) => input.idx !== idx);
        renderInputs();
        updateManifestPreview();
    }

    function fieldLabel(field) {
        return String(field || '')
            .replace(/_/g, ' ')
            .replace(/\b\w/g, (letter) => letter.toUpperCase());
    }

    function datalist(id, values) {
        return `
            <datalist id="${id}">
                ${values.map((value) => `<option value="${escapeHtml(value)}"></option>`).join('')}
            </datalist>
        `;
    }

    function selectField(field, value, values) {
        const selected = String(value ?? '');
        const options = values.includes('') ? values : [''].concat(values);
        return `
            <select class="form-control form-select" data-field="${escapeHtml(field)}">
                ${options.map((option) => `
                    <option value="${escapeHtml(option)}"${option === selected ? ' selected' : ''}>${escapeHtml(option)}</option>
                `).join('')}
            </select>
        `;
    }

    function textInput(field, value, extraAttrs = '') {
        return `
            <input class="form-control" data-field="${escapeHtml(field)}" value="${escapeHtml(value ?? '')}" ${extraAttrs}>
        `;
    }

    function renderField(field, input) {
        const value = input[field] ?? '';
        let control;
        if (field === 'SAMPLE_TYPE') {
            control = textInput(field, value, 'list="manifest-sample-type-options"');
        } else if (field === 'LIB_PREP') {
            control = textInput(field, value, 'list="manifest-library-prep-options"');
        } else if (field === 'SEQ_PLATFORM') {
            control = selectField(field, value, seqPlatformOptions);
        } else if (field === 'SEQ_VENDOR') {
            control = selectField(field, value, seqVendorOptions);
        } else if (field === 'IS_POS_CTRL' || field === 'IS_NEG_CTRL') {
            control = selectField(field, value, ['', 'false', 'true']);
        } else if (BROWSE_COLUMNS.has(field)) {
            control = `
                <div class="input-group">
                    <input class="form-control mono" data-field="${escapeHtml(field)}" value="${escapeHtml(value)}">
                    <button class="btn btn-outline" type="button" data-browse="${escapeHtml(field)}" title="Browse linked buckets">
                        <i class="fas fa-folder-open"></i>
                    </button>
                </div>
            `;
        } else {
            control = textInput(field, value);
        }
        return `
            <div class="form-group">
                <label class="form-label">${escapeHtml(fieldLabel(field))}</label>
                ${control}
            </div>
        `;
    }

    function buildEditForm(input) {
        const renderedGroups = COLUMN_GROUPS.map((group) => {
            const fields = (group.fields || []).filter((field) => MANIFEST_COLUMNS.includes(field));
            if (!fields.length) return '';
            return `
                <fieldset class="manifest-fieldset">
                    <legend>${escapeHtml(group.title || 'Fields')}</legend>
                    <div class="grid grid-2">
                        ${fields.map((field) => renderField(field, input)).join('')}
                    </div>
                </fieldset>
            `;
        }).join('');
        return `
            ${datalist('manifest-sample-type-options', sampleTypeOptions)}
            ${datalist('manifest-library-prep-options', libraryPrepOptions)}
            ${renderedGroups}
        `;
    }

    function editInput(idx) {
        const input = analysisInputs.find((item) => item.idx === idx);
        if (!input) return;
        currentEditIndex = idx;
        document.getElementById('input-modal-body').innerHTML = buildEditForm(input);
        document.querySelectorAll('[data-browse]').forEach((button) => {
            button.addEventListener('click', () => openFileBrowser(button.dataset.browse));
        });
        showModal('input-edit-modal');
    }

    async function persistEditorOption(field, value) {
        const optionType = field === 'SAMPLE_TYPE' ? 'sample_type' : field === 'LIB_PREP' ? 'library_prep' : '';
        if (!optionType || !String(value || '').trim()) return;
        const response = await UrsaPortal.apiRequest('/api/v1/manifest-editor/options', {
            method: 'POST',
            body: { option_type: optionType, value },
        });
        mergeOptionValue(field, response.value || value);
    }

    async function saveInputFromModal() {
        const input = analysisInputs.find((item) => item.idx === currentEditIndex);
        if (!input) return;
        const optionWrites = [];
        document.querySelectorAll('#input-modal-body [data-field]').forEach((field) => {
            input[field.dataset.field] = field.value;
            if (field.dataset.field === 'SAMPLE_TYPE' || field.dataset.field === 'LIB_PREP') {
                optionWrites.push(persistEditorOption(field.dataset.field, field.value));
            }
        });
        await Promise.all(optionWrites);
        renderInputs();
        updateManifestPreview();
        closeModal('input-edit-modal');
    }

    function parseManifestText(text) {
        const lines = String(text || '').split(/\r?\n/).filter((line) => line.trim());
        if (!lines.length) return [];
        const delimiter = lines[0].includes('\t') ? '\t' : ',';
        const headers = lines[0].split(delimiter).map((value) => value.trim());
        const unknownHeaders = headers.filter((header) => !MANIFEST_COLUMNS.includes(header));
        if (unknownHeaders.length) {
            throw new Error(`Imported manifest has columns outside the active template: ${unknownHeaders.join(', ')}`);
        }
        return lines.slice(1).map((line) => {
            const values = line.split(delimiter);
            const row = {};
            headers.forEach((header, index) => {
                row[header] = (values[index] || '').trim();
            });
            return row;
        });
    }

    function loadInputsFromTSVContent(tsv) {
        const rows = parseManifestText(tsv);
        analysisInputs = rows.map((row) => initialInput(row));
        if (!analysisInputs.length) addAnalysisInput();
        renderInputs();
        updateManifestPreview();
    }

    function downloadTemplate() {
        const template = [MANIFEST_COLUMNS.join('\t')].join('\n');
        const blob = new Blob([template], { type: 'text/tab-separated-values' });
        const url = URL.createObjectURL(blob);
        const anchor = document.createElement('a');
        anchor.href = url;
        anchor.download = 'analysis_samples_template.tsv';
        anchor.click();
        URL.revokeObjectURL(url);
    }

    function copyManifest() {
        UrsaPortal.copyText(generateManifestTSV(), 'Manifest copied to clipboard');
    }

    function downloadManifest() {
        const blob = new Blob([generateManifestTSV()], { type: 'text/tab-separated-values' });
        const url = URL.createObjectURL(blob);
        const anchor = document.createElement('a');
        anchor.href = url;
        anchor.download = `${document.getElementById('manifest-save-name')?.value || 'analysis_samples'}.tsv`;
        anchor.click();
        URL.revokeObjectURL(url);
    }

    function manifestInputReferences() {
        const seen = new Set();
        const refs = [];
        currentManifestRows().forEach((input) => {
            SOURCE_COLUMNS.forEach((field) => {
                const value = String(input[field] || '').trim();
                if (!value || !value.startsWith('s3://') || seen.has(value)) return;
                seen.add(value);
                refs.push({ reference_type: 's3_uri', value });
            });
        });
        return refs;
    }

    async function refreshSavedManifests() {
        const manifests = await UrsaPortal.apiRequest('/api/v1/manifests');
        const select = document.getElementById('saved-manifest-select');
        const current = select.value;
        select.innerHTML = '<option value="">(none)</option>' + manifests.map((manifest) => (
            `<option value="${escapeHtml(manifest.manifest_euid)}">${escapeHtml(manifest.name)} (${escapeHtml(manifest.manifest_euid)})</option>`
        )).join('');
        if (current) select.value = current;
    }

    async function saveManifest() {
        const worksetEuid = document.getElementById('workset_euid')?.value || '';
        const name = document.getElementById('manifest-save-name')?.value.trim() || '';
        if (!worksetEuid) throw new Error('Select a workset first.');
        if (!name) throw new Error('Enter a manifest name.');
        if (!currentManifestRows().some((row) => SOURCE_COLUMNS.some((field) => String(row[field] || '').trim()))) {
            throw new Error('Add at least one source FASTQ, CRAM, or BAM reference before saving.');
        }
        const inputReferences = manifestInputReferences();
        const created = await UrsaPortal.apiRequest('/api/v1/manifests', {
            method: 'POST',
            body: {
                workset_euid: worksetEuid,
                name,
                input_references: inputReferences,
                metadata: {
                    editor_analysis_inputs: currentManifestRows(),
                    editor_run_config: {
                        run_id: document.getElementById('run_id')?.value || '',
                        stage_target: document.getElementById('stage_target')?.value || COLUMN_DEFAULTS.STAGE_TARGET,
                    },
                },
            },
        });
        await refreshSavedManifests();
        document.getElementById('saved-manifest-select').value = created.manifest_euid;
        showToast('success', 'Manifest saved');
    }

    async function loadSelectedManifest() {
        const manifestId = document.getElementById('saved-manifest-select')?.value || '';
        if (!manifestId) {
            throw new Error('Select a saved manifest first.');
        }
        const detail = await UrsaPortal.apiRequest(`/api/v1/manifests/${encodeURIComponent(manifestId)}`);
        const metadata = detail.metadata || {};
        if (metadata.editor_run_config) {
            document.getElementById('run_id').value = metadata.editor_run_config.run_id || '';
            document.getElementById('stage_target').value = metadata.editor_run_config.stage_target || COLUMN_DEFAULTS.STAGE_TARGET;
        }
        if (Array.isArray(metadata.editor_analysis_inputs) && metadata.editor_analysis_inputs.length) {
            analysisInputs = metadata.editor_analysis_inputs.map((input) => initialInput(input));
        } else {
            const tsv = await UrsaPortal.apiRequest(`/api/v1/manifests/${encodeURIComponent(manifestId)}/download`);
            loadInputsFromTSVContent(tsv);
            return;
        }
        if (detail.workset_euid) {
            document.getElementById('workset_euid').value = detail.workset_euid;
        }
        document.getElementById('manifest-save-name').value = detail.name || '';
        renderInputs();
        updateManifestPreview();
        showToast('success', 'Manifest loaded into editor');
    }

    function downloadSelectedManifest() {
        const manifestId = document.getElementById('saved-manifest-select')?.value || '';
        if (!manifestId) {
            showToast('warning', 'Select a saved manifest first');
            return;
        }
        window.location.assign(`/api/v1/manifests/${encodeURIComponent(manifestId)}/download`);
    }

    async function openFileBrowser(targetField) {
        currentFileBrowserTarget = targetField;
        const bucketSelect = document.getElementById('browser-bucket-select');
        const buckets = pageData.buckets || [];
        bucketSelect.innerHTML = buckets.length
            ? buckets.map((bucket, index) => `<option value="${escapeHtml(bucket.bucket_id)}"${index === 0 ? ' selected' : ''}>${escapeHtml(bucket.display_name || bucket.bucket_name)}</option>`).join('')
            : '<option value="">No linked buckets</option>';
        currentBucketId = bucketSelect.value;
        currentBrowserPrefix = '';
        showModal('file-browser-modal');
        updatePrefixButton();
        if (currentBucketId) {
            await browseFolder('');
        }
    }

    function currentBucketRecord(payload = null) {
        if (payload?.bucket?.bucket_name) return payload.bucket;
        return (pageData.buckets || []).find((bucket) => bucket.bucket_id === currentBucketId) || null;
    }

    function updatePrefixButton(payload = null) {
        const button = document.getElementById('browser-use-prefix-btn');
        if (!button) return;
        const canUsePrefix = DIRECTORY_COLUMNS.has(currentFileBrowserTarget || '') && Boolean(currentBucketId);
        button.classList.toggle('d-none', !canUsePrefix);
        button.disabled = !canUsePrefix || !currentBucketRecord(payload);
    }

    function useCurrentPrefix() {
        const bucket = currentBucketRecord();
        if (!bucket?.bucket_name || !currentFileBrowserTarget) return;
        const prefix = String(currentBrowserPrefix || '');
        const field = document.querySelector(`#input-modal-body [data-field="${currentFileBrowserTarget}"]`);
        if (field) field.value = `s3://${bucket.bucket_name}/${prefix}`;
        closeModal('file-browser-modal');
    }

    async function browseFolder(prefix) {
        if (!currentBucketId) return;
        currentBrowserPrefix = prefix;
        const payload = await UrsaPortal.apiRequest(`/api/v1/buckets/${encodeURIComponent(currentBucketId)}/objects?prefix=${encodeURIComponent(prefix || '')}`);
        updatePrefixButton(payload);
        const breadcrumb = document.getElementById('browser-breadcrumb');
        const fileList = document.getElementById('browser-file-list');
        breadcrumb.innerHTML = (payload.breadcrumbs || []).map((crumb) => (
            `<a href="#" class="breadcrumb-item" data-prefix="${escapeHtml(crumb.prefix || '')}">${escapeHtml(crumb.name)}</a>`
        )).join(' / ');
        breadcrumb.querySelectorAll('[data-prefix]').forEach((item) => {
            item.addEventListener('click', (event) => {
                event.preventDefault();
                browseFolder(item.dataset.prefix || '');
            });
        });
        const items = payload.items || [];
        fileList.innerHTML = '';
        if (payload.parent_prefix !== null && payload.parent_prefix !== undefined) {
            const parent = document.createElement('div');
            parent.className = 'file-list-item folder';
            parent.innerHTML = `<span><i class="fas fa-level-up-alt"></i> ..</span><span class="text-muted">Parent Directory</span>`;
            parent.addEventListener('click', () => browseFolder(payload.parent_prefix || ''));
            fileList.appendChild(parent);
        }
        items.forEach((item) => {
            const row = document.createElement('div');
            row.className = `file-list-item ${item.is_folder ? 'folder' : ''}`;
            row.innerHTML = `
                <div>
                    <i class="fas ${item.is_folder ? 'fa-folder' : 'fa-file'}"></i>
                    ${escapeHtml(item.name)}
                </div>
                <div class="d-flex gap-sm align-center">
                    <span class="text-muted text-sm">${escapeHtml(item.size_human || '--')}</span>
                    ${item.is_folder ? '' : '<button class="btn btn-outline btn-sm" type="button">Select</button>'}
                </div>
            `;
            if (item.is_folder) {
                row.addEventListener('click', () => browseFolder(item.key));
            } else {
                row.querySelector('button')?.addEventListener('click', () => {
                    const field = document.querySelector(`#input-modal-body [data-field="${currentFileBrowserTarget}"]`);
                    if (field) field.value = `s3://${payload.bucket.bucket_name}/${item.key}`;
                    closeModal('file-browser-modal');
                });
            }
            fileList.appendChild(row);
        });
    }

    function discoverFromS3() {
        if (!analysisInputs.length) {
            addAnalysisInput();
        }
        editInput(analysisInputs[analysisInputs.length - 1].idx);
    }

    function hydrateFromQuery() {
        const params = new URLSearchParams(window.location.search);
        const workset = params.get('workset');
        if (workset) {
            const worksetSelect = document.getElementById('workset_euid');
            if (worksetSelect) {
                worksetSelect.value = workset;
            }
        }
    }

    document.getElementById('save-input-modal-btn')?.addEventListener('click', async () => {
        try {
            await saveInputFromModal();
        } catch (error) {
            showToast('error', error.message);
        }
    });
    document.getElementById('add-input-btn')?.addEventListener('click', () => addAnalysisInput());
    document.getElementById('download-template-btn')?.addEventListener('click', downloadTemplate);
    document.getElementById('copy-manifest-btn')?.addEventListener('click', copyManifest);
    document.getElementById('download-manifest-btn')?.addEventListener('click', downloadManifest);
    document.getElementById('save-manifest-btn')?.addEventListener('click', async () => {
        try {
            await saveManifest();
        } catch (error) {
            showToast('error', error.message);
        }
    });
    document.getElementById('refresh-saved-manifests-btn')?.addEventListener('click', refreshSavedManifests);
    document.getElementById('load-saved-manifest-btn')?.addEventListener('click', async () => {
        try {
            await loadSelectedManifest();
        } catch (error) {
            showToast('error', error.message);
        }
    });
    document.getElementById('download-saved-manifest-btn')?.addEventListener('click', downloadSelectedManifest);
    document.getElementById('discover-s3-btn')?.addEventListener('click', discoverFromS3);
    document.getElementById('run_id')?.addEventListener('input', updateManifestPreview);
    document.getElementById('stage_target')?.addEventListener('input', updateManifestPreview);
    document.getElementById('browser-bucket-select')?.addEventListener('change', async (event) => {
        currentBucketId = event.target.value;
        currentBrowserPrefix = '';
        updatePrefixButton();
        if (currentBucketId) await browseFolder('');
    });
    document.getElementById('browser-use-prefix-btn')?.addEventListener('click', useCurrentPrefix);
    document.getElementById('tsv-upload')?.addEventListener('change', async (event) => {
        const file = event.target.files?.[0];
        if (!file) return;
        try {
            const text = await file.text();
            loadInputsFromTSVContent(text);
        } catch (error) {
            showToast('error', error.message);
        }
    });
    document.getElementById('import-tsv-btn')?.addEventListener('click', () => {
        document.getElementById('tsv-upload')?.click();
    });

    async function initializeManifestEditor() {
        try {
            await refreshManifestEditorOptions();
        } catch (error) {
            showToast('warning', error.message);
            renderTemplateColumns();
        }
        addAnalysisInput();
        hydrateFromQuery();
        updateManifestPreview();
    }

    initializeManifestEditor();
})();
</script>
{% endblock %}