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

{% block title %}{{ assay.name }} - Test - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">{{ assay.name }}</h1>
        <p class="page-subtitle">Test Code: <code>{{ assay.code }}</code></p>
    </div>
    <div class="flex gap-sm">
        <a href="/admin/test-definitions/{{ assay.euid }}/edit" class="btn btn-secondary">Edit</a>
        <a href="/admin/test-definitions" class="btn btn-ghost">← Back to Tests</a>
    </div>
</div>

<div class="grid grid-2 gap-lg">
    <!-- Test Details -->
    <div class="card">
        <h3 class="mb-md">Details</h3>
        <dl class="detail-list">
            <div class="detail-row">
                <dt>Code</dt>
                <dd><code>{{ assay.code }}</code></dd>
            </div>
            <div class="detail-row">
                <dt>Name</dt>
                <dd>{{ assay.name }}</dd>
            </div>
            <div class="detail-row">
                <dt>Category</dt>
                <dd>{{ assay.category or '—' }}</dd>
            </div>
            <div class="detail-row">
                <dt>Technology</dt>
                <dd>{% if assay.technology == 'hybrid_ilmn_ont' %}Hybrid (ILMN+ONT){% elif assay.technology == 'hybrid_ilmn_pacbio' %}Hybrid (ILMN+PacBio){% elif assay.technology == 'hybrid_ug_ont' %}Hybrid (UG+ONT){% elif assay.technology == 'hybrid_ug_pacbio' %}Hybrid (UG+PacBio){% elif assay.technology == 'informatics' %}Informatics Only{% elif assay.technology == 'long_read_ont' %}Long Read (ONT){% elif assay.technology == 'long_read_pacbio' %}Long Read (PacBio){% elif assay.technology == 'short_read_ilmn' or assay.technology == 'short_read' %}Short Read (Illumina){% elif assay.technology == 'short_read_roche' %}Short Read (Roche){% elif assay.technology == 'short_read_ultima' %}Short Read (Ultima){% elif assay.technology == 'long_read' %}Long Read (Legacy){% elif assay.technology == 'hybrid' %}Hybrid (Legacy){% else %}{{ assay.technology or '—' }}{% endif %}</dd>
            </div>
            <div class="detail-row">
                <dt>Status</dt>
                <dd>
                    <span class="badge badge-{{ 'success' if assay.is_active else 'secondary' }}">
                        {{ 'Active' if assay.is_active else 'Inactive' }}
                    </span>
                </dd>
            </div>
            <div class="detail-row">
                <dt>Bloom Lab Assay EUID</dt>
                <dd>
                    {% if bloom_lab_method_euid %}
                    <code>{{ bloom_lab_method_euid }}</code>
                    {% else %}
                    —
                    {% endif %}
                </dd>
            </div>
            <div class="detail-row">
                <dt>Allowed Specimen Types</dt>
                <dd>
                    {% if assay.specimen_types %}
                    {{ assay.specimen_types | join(', ') }}
                    {% else %}
                    —
                    {% endif %}
                </dd>
            </div>
            {% if assay.description %}
            <div class="detail-row">
                <dt>Description</dt>
                <dd>{{ assay.description }}</dd>
            </div>
            {% endif %}
        </dl>

        {% if assay.is_active %}
        <div class="mt-lg">
            <form method="POST" action="/admin/test-definitions/{{ assay.euid }}/deactivate" style="display: inline;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Deactivate this test?')">Deactivate Test</button>
            </form>
        </div>
        {% endif %}
    </div>

    <!-- Linked Documents -->
    <div class="card">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h3>Linked Documents</h3>
            <button type="button" class="btn btn-sm btn-secondary" onclick="toggleSection('link-doc')">+ Link Document</button>
        </div>

        <!-- Link Document Section -->
        <div id="link-doc-section" class="card-body" style="display: none; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);">
            <h4 class="mb-sm">Search & Link Document</h4>
            <form method="POST" action="/admin/test-definitions/{{ assay.euid }}/link-document">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <div class="flex gap-sm mb-sm">
                    <input type="text" name="document_id" placeholder="Enter Document ID..." class="form-control" style="flex: 1;">
                    <button type="submit" class="btn btn-primary btn-sm">Link</button>
                </div>
            </form>
            <p class="text-sm text-muted">Enter the UUID of an existing document to link it to this test.</p>
        </div>

        {% if documents %}
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Filename</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for doc in documents %}
                    <tr>
                        <td><a href="/documents/{{ doc.id }}">{{ doc.filename }}</a></td>
                        <td>{{ doc.document_type or '—' }}</td>
                        <td>{{ (doc.size_bytes / 1024)|round(1) if doc.size_bytes else '—' }} KB</td>
                        <td>
                            <form method="POST" action="/admin/test-definitions/{{ assay.euid }}/unlink-document" style="display: inline; margin: 0;">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                <input type="hidden" name="document_id" value="{{ doc.id }}">
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Unlink this document?')">Unlink</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">
            <p class="text-muted">No documents linked to this test</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function toggleSection(section) {
    const el = document.getElementById(section + '-section');
    if (el) {
        el.style.display = el.style.display === 'none' ? 'block' : 'none';
    }
}
</script>
{% endblock %}