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

{% block title %}TRF {{ order.order_number }} - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">
            <span class="text-mono">{{ order.order_number }}</span>
            <span class="status-pill status-{{ order.status_class|lower|replace('_', '-') }} ml-md">
                {{ order.status_chip }}
            </span>
        </h1>
        <p class="page-subtitle">Created {{ order.created_at | format_dt(user_preferences) }}</p>
    </div>
    <div class="flex gap-md items-center">
        {% if order.status == 'DRAFT' and user.can_write %}
        <a href="/trfs/{{ order.id }}/edit" class="btn btn-secondary">Edit</a>
        {% endif %}
        <a href="/trfs" class="btn btn-ghost">← Back</a>
    </div>
</div>

{% if user is defined and user.can_write %}
<div class="card mb-lg">
    <div class="card-header">
        <h2 class="card-title">Change TRF Status</h2>
    </div>
    <div class="card-body">
        <form method="POST" action="/trfs/{{ order.id }}/status">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="flex gap-md items-end flex-wrap">
                <div style="min-width: 240px;">
                    <label class="form-label" for="order-status">Status</label>
                    <select name="status" id="order-status" class="form-control" required>
                        {% for status_value, status_label in order_status_options %}
                        <option value="{{ status_value }}" {% if order.status_ui == status_value %}selected{% endif %}>
                            {{ status_label }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">Update Status</button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}

<div class="flex gap-lg">
    <div style="flex: 2;">
        <!-- Patients -->
        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Patients</h2>
            </div>
            {% if patients %}
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Roles</th>
                            <th>DOB</th>
                            <th>MRN</th>
                            <th>Sex</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for p in patients %}
                        <tr>
                            <td>{{ p.name }}</td>
                            <td class="text-muted text-sm">{{ p.roles|join(', ') }}</td>
                            <td class="text-muted text-sm">{{ p.date_of_birth or "—" }}</td>
                            <td class="text-mono">{{ p.mrn or "—" }}</td>
                            <td class="text-muted text-sm">
                                {% if p.sex == 'F' %}Female{% elif p.sex == 'M' %}Male{% elif p.sex == 'O' or p.sex == 'Other' %}Other{% elif p.sex == 'U' or p.sex == 'Unknown' %}Unknown{% else %}{{ p.sex or "—" }}{% endif %}
                            </td>
                            <td><a href="/patients/{{ p.id }}" class="btn btn-sm btn-ghost">View</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% elif patient %}
            <div class="flex gap-lg">
                <div style="flex: 1;">
                    <div class="text-sm text-muted">Name</div>
                    <div>{{ patient.first_name }} {{ patient.last_name }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="text-sm text-muted">Date of Birth</div>
                    <div>{{ patient.date_of_birth }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="text-sm text-muted">MRN</div>
                    <div class="text-mono">{{ patient.mrn or "—" }}</div>
                </div>
                <div style="flex: 1;">
                    <div class="text-sm text-muted">Biologic Sex</div>
                    <div>{% if patient.sex == 'F' %}Female{% elif patient.sex == 'M' %}Male{% elif patient.sex == 'O' or patient.sex == 'Other' %}Other{% elif patient.sex == 'U' or patient.sex == 'Unknown' %}Unknown{% else %}{{ patient.sex or "—" }}{% endif %}</div>
                </div>
            </div>
            {% else %}
            <div class="empty-state">
                <p class="text-muted">No patients linked yet</p>
            </div>
            {% endif %}
        </div>

        <!-- Tests Ordered -->
        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Tests Ordered</h2>
            </div>
            {% for test_order in test_orders %}
            <div class="mb-lg pb-lg" style="border-bottom: 1px solid var(--border-color);">
                <div class="flex justify-between items-center mb-md">
                    <div>
                        <div class="text-sm text-muted mb-xs">Test EUID</div>
                        <div><a href="/trfs/tests/{{ test_order.euid }}" class="text-mono">{{ test_order.euid }}</a></div>
                        <strong>{{ test_order.fulfillment_routes[0].fulfillment_route_name if test_order.fulfillment_routes else "Pending" }}</strong>
                        {% if test_order.priority == 'STAT' %}
                        <span class="status-pill status-on-hold ml-sm">STAT</span>
                        {% endif %}
                    </div>
                    {% if user is defined and user.can_write %}
                    <form method="POST" action="/trfs/tests/{{ test_order.id }}/status" class="flex gap-sm items-center" style="margin: 0;">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <label class="text-sm text-muted" for="test-status-{{ test_order.id }}">Status</label>
                        <select name="status" id="test-status-{{ test_order.id }}" class="form-control" style="min-width: 180px;" required>
                            {% if not test_order.status_ui %}
                            <option value="" selected disabled>current: {{ test_order.status_display }}</option>
                            {% endif %}
                            {% for status_value, status_label in test_order_status_options %}
                            <option value="{{ status_value }}" {% if test_order.status_ui == status_value %}selected{% endif %}>
                                {{ status_label }}
                            </option>
                            {% endfor %}
                        </select>
                        <button type="submit" class="btn btn-sm btn-secondary">Update</button>
                    </form>
                    {% else %}
                    <span class="status-pill status-{{ test_order.status|lower }}">{{ test_order.status_display }}</span>
                    {% endif %}
                </div>
                <div class="flex gap-lg text-sm">
                    <div>
                        <span class="text-muted">Tests:</span>
                        {% for assay in test_order.fulfillment_routes %}
                        <span class="text-mono">{{ assay.fulfillment_route_code }}</span>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </div>
                    <div>
                        <span class="text-muted">Specimen:</span> {{ test_order.specimen_type or "—" }}
                    </div>
                </div>
                {% if test_order.clinical_notes %}
                <div class="mt-sm text-sm">
                    <span class="text-muted">Notes:</span> {{ test_order.clinical_notes }}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <!-- Test Status -->
        {% if user is defined and user.is_internal %}
        <span class="text-muted text-xs" style="display:none;">ORDERED CANCELLED</span>
        {% endif %}
        {% if assay_runs %}
        <div class="card mt-lg">
            <div class="card-header">
                <h2 class="card-title">Test Status</h2>
            </div>
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Test</th>
                            <th>Status</th>
                            <th>Accession ID</th>
                            <th>Notes</th>
                            <th>Last Updated</th>
                            {% if user is defined and user.is_internal %}
                            <th>Actions</th>
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for ar in assay_runs %}
                        <tr>
                            <td><span class="text-mono">{{ ar.fulfillment_route_code }}</span></td>
                            <td>
                                <span class="status-pill status-{{ ar.status|lower|replace('_', '-') }}">{{ ar.status }}</span>
                                {% if ar.qc_hold_reason %}
                                <br><small class="text-muted">QC: {{ ar.qc_hold_reason }}</small>
                                {% endif %}
                            </td>
                            <td class="text-mono">{{ ar.accession_id or "—" }}</td>
                            <td class="text-sm">{{ ar.note or "—" }}</td>
                            <td class="text-muted text-sm">{{ ar.updated_at or "—" }}</td>
                            {% if user is defined and user.is_internal %}
                            <td>
                                {% if not ar.is_terminal and ar.next_transitions %}
                                <div class="flex gap-sm flex-wrap">
                                    {% for next_state in ar.next_transitions %}
                                    {% if next_state == 'QC_HOLD' %}
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="showQCHoldModal('{{ ar.id }}', '{{ ar.fulfillment_route_code }}')">⏸ QC Hold</button>
                                    {% elif next_state == 'RESULTED' and ar.status == 'QC_HOLD' %}
                                    <button type="button" class="btn btn-sm btn-primary" onclick="showQCOverrideModal('{{ ar.id }}', '{{ ar.fulfillment_route_code }}')">✓ Result (Override)</button>
                                    {% elif next_state == 'CANCELLED' %}
                                    <form method="POST" action="/trfs/{{ order.id }}/assay-runs/{{ ar.id }}/transition" style="display: inline; margin: 0;">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="next_state" value="CANCELLED">
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Cancel test {{ ar.fulfillment_route_code }}? This cannot be undone.')">✕ Cancel</button>
                                    </form>
                                    {% elif next_state == 'FAILED' %}
                                    <form method="POST" action="/trfs/{{ order.id }}/assay-runs/{{ ar.id }}/transition" style="display: inline; margin: 0;">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="next_state" value="FAILED">
                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Mark {{ ar.fulfillment_route_code }} as FAILED?')">✕ Failed</button>
                                    </form>
                                    {% else %}
                                    <form method="POST" action="/trfs/{{ order.id }}/assay-runs/{{ ar.id }}/transition" style="display: inline; margin: 0;">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="next_state" value="{{ next_state }}">
                                        <button type="submit" class="btn btn-sm btn-secondary">→ {{ next_state|replace('_', ' ')|title }}</button>
                                    </form>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                {% elif ar.is_terminal %}
                                <span class="text-muted text-sm">⬛ Terminal</span>
                                {% endif %}
                            </td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}
    </div>

    <script>
    {% if user is defined and user.is_internal %}
    function showQCHoldModal(assayRunId, assayCode) {
        const reason = prompt('Enter QC hold reason for ' + assayCode + ':');
        if (reason && reason.trim()) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/trfs/{{ order.id }}/assay-runs/' + assayRunId + '/transition';
            form.innerHTML = '<input type="hidden" name="csrf_token" value="{{ csrf_token }}">' +
                           '<input type="hidden" name="next_state" value="QC_HOLD">' +
                           '<input type="hidden" name="qc_hold_reason" value="' + reason.replace(/"/g, '&quot;') + '">';
            document.body.appendChild(form);
            form.submit();
        }
    }
    function showQCOverrideModal(assayRunId, assayCode) {
        if (confirm('Override QC hold for ' + assayCode + ' and mark as RESULTED?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/trfs/{{ order.id }}/assay-runs/' + assayRunId + '/transition';
            form.innerHTML = '<input type="hidden" name="csrf_token" value="{{ csrf_token }}">' +
                           '<input type="hidden" name="next_state" value="RESULTED">' +
                           '<input type="hidden" name="qc_override" value="true">';
            document.body.appendChild(form);
            form.submit();
        }
    }
    {% endif %}
    </script>

    <div style="flex: 1;">
        <!-- TRF Details Sidebar -->
        <div class="card mb-lg">
            <h3 class="mb-md">TRF Details</h3>
            <div class="mb-md">
                <div class="text-sm text-muted">Ordering Clinician</div>
                <div>{{ clinician.first_name }} {{ clinician.last_name }}{% if clinician.credentials %}, {{ clinician.credentials }}{% endif %}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">TRF Type</div>
                <div>{{ order.order_type if order.order_type else "—" }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Organization</div>
                <div>{{ organization.name }}</div>
            </div>
            {% if order.clinical_notes %}
            <div>
                <div class="text-sm text-muted">Notes</div>
                <div>{{ order.clinical_notes }}</div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}