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

{% macro render_tree(node) %}
<div class="tree-node">
    <div class="flex gap-sm align-center">
        <span class="text-mono">{{ node.type or 'Item' }}</span>
        <span>{{ node.label or node.id }}</span>
        {% if node.id %}
        <span class="text-sm text-muted">{{ node.id }}</span>
        {% endif %}
    </div>
    {% if node.children %}
    <div class="tree-children">
        {% for child in node.children %}
        {{ render_tree(child) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}

{% block title %}Accessioning {{ detail.item.euid }} - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Accessioning Work Item</h1>
        <p class="page-subtitle text-mono">{{ detail.item.euid }} · Shipment {{ detail.shipment.shipment_number if detail.shipment else detail.item.shipment_euid }}</p>
    </div>
    <div class="flex gap-sm">
        <a href="/accessioning?mode={{ mode }}" class="btn btn-secondary">Back to Workbench</a>
        <a href="/accessioning?mode=queue" class="btn {% if mode == 'queue' %}btn-primary{% else %}btn-secondary{% endif %}">Queue Mode</a>
        <a href="/accessioning?mode=combined" class="btn {% if mode == 'combined' %}btn-primary{% else %}btn-secondary{% endif %}">Combined Mode</a>
    </div>
</div>

<div class="stats-grid mb-lg">
    <div class="stat-card">
        <div class="stat-value">{{ queue_labels[detail.revision.queue] }}</div>
        <div class="stat-label">Queue</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ detail.revision.stage_status }}</div>
        <div class="stat-label">Stage Status</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ detail.matching_state.test_euid or "Unlinked" }}</div>
        <div class="stat-label">Linked Test</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ detail.outcome_summary.outcome or "Pending" }}</div>
        <div class="stat-label">Outcome</div>
    </div>
</div>

<div class="grid" style="display: grid; gap: 1rem; grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.2fr);">
    <div>
        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Receipt Context</h2>
            </div>
            <div class="grid" style="display: grid; gap: 0.75rem;">
                <div><span class="text-sm text-muted">Tracking</span><div class="text-mono">{{ detail.revision.receipt_metadata.tracking_number or "Hand delivery / unknown" }}</div></div>
                <div><span class="text-sm text-muted">Carrier</span><div>{{ detail.revision.receipt_metadata.carrier or "Unknown" }}</div></div>
                <div><span class="text-sm text-muted">Received At</span><div>{{ detail.revision.receipt_metadata.received_at or "Unknown" }}</div></div>
                <div><span class="text-sm text-muted">Received By</span><div>{{ detail.revision.receipt_metadata.received_by or "Unknown" }}</div></div>
                <div><span class="text-sm text-muted">Origin Site</span><div>{{ detail.revision.receipt_metadata.origin_site_id or "Unknown" }}</div></div>
                <div><span class="text-sm text-muted">Package Condition</span><div>{{ detail.revision.receipt_metadata.package_condition or "Not recorded" }}</div></div>
                <div><span class="text-sm text-muted">Notes</span><div>{{ detail.revision.receipt_metadata.notes or "None" }}</div></div>
            </div>
        </div>

        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Containment Tree</h2>
            </div>
            {% if detail.tree %}
            <div class="containment-tree">
                {{ render_tree(detail.tree) }}
            </div>
            {% else %}
            <div class="empty-state"><p>No contents registered yet.</p></div>
            {% endif %}
        </div>

        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Manifest Items</h2>
            </div>
            {% if detail.manifest_items %}
            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Kind</th>
                            <th>Label</th>
                            <th>Parent</th>
                            <th>Hooks / Placeholders</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in detail.manifest_items %}
                        <tr>
                            <td>{{ row.kind }}</td>
                            <td class="text-mono">{{ row.label or row.entity_id }}</td>
                            <td class="text-sm text-muted">{{ row.parent_type }} · {{ row.parent_id }}</td>
                            <td class="text-sm">
                                {% if row.label_print_requested %}
                                <div>Print hook pending{% if row.label_print_context %}: {{ row.label_print_context }}{% endif %}</div>
                                {% endif %}
                                {% if row.tube_image_metadata %}
                                <div>Tube image: {{ row.tube_image_metadata }}</div>
                                {% endif %}
                                {% if row.package_image_metadata %}
                                <div>Package image: {{ row.package_image_metadata }}</div>
                                {% endif %}
                                {% if not row.label_print_requested and not row.tube_image_metadata and not row.package_image_metadata %}
                                <span class="text-muted">None</span>
                                {% endif %}
                            </td>
                            <td class="text-sm text-muted">{{ row.notes or "None" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="empty-state"><p>No manifest items recorded.</p></div>
            {% endif %}
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Linked Context</h2>
            </div>
            <div class="grid" style="display: grid; gap: 0.75rem;">
                <div><span class="text-sm text-muted">TRF</span><div class="text-mono">{{ detail.matching_state.trf_euid or "Unlinked" }}</div></div>
                <div><span class="text-sm text-muted">Test</span><div class="text-mono">{{ detail.matching_state.test_euid or "Unlinked" }}</div></div>
                <div><span class="text-sm text-muted">Patient</span><div class="text-mono">{{ detail.matching_state.patient_euid or "Unlinked" }}</div></div>
                <div><span class="text-sm text-muted">Collection Events</span><div>{{ (detail.matching_state.collection_event_euids or [])|join(', ') or "None" }}</div></div>
                <div><span class="text-sm text-muted">Outcome Summary</span><div>{{ detail.outcome_summary.reason or detail.outcome_summary.outcome or "Pending" }}</div></div>
            </div>
        </div>
    </div>

    <div>
        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Stage 2: Register Contents</h2>
            </div>
            <form method="POST" action="/accessioning/work-items/{{ detail.item.euid }}/contents" enctype="multipart/form-data" class="grid" style="display: grid; gap: 0.75rem;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="mode" value="{{ mode }}">
                <input type="hidden" name="registration_token" value="{{ content_registration_token }}">

                <div>
                    <label class="form-label">Content Type</label>
                    <select class="form-select" name="content_type">
                        <option value="ChildShipment">Child Shipment</option>
                        <option value="Kit">Kit</option>
                        <option value="Document">Document Set</option>
                        <option value="Tube">Tube / Container</option>
                        <option value="Misc">Misc Paperwork</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Parent Type</label>
                    <select class="form-select" name="parent_type">
                        <option value="Shipment">Shipment</option>
                        <option value="TestKit">TestKit</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Parent ID</label>
                    <input class="form-input" type="text" name="parent_id" placeholder="{{ detail.item.shipment_euid }}">
                </div>
                <div>
                    <label class="form-label">Barcode / Tracking</label>
                    <input class="form-input" type="text" name="barcode" placeholder="Kit barcode, tube barcode, or other label">
                </div>
                <div>
                    <label class="form-label">Tracking Number</label>
                    <input class="form-input" type="text" name="tracking_number" placeholder="For child shipments">
                </div>
                <div>
                    <label class="form-label">Carrier / Kit Type</label>
                    <input class="form-input" type="text" name="carrier" placeholder="Carrier or extra detail">
                </div>
                <div>
                    <label class="form-label">Kit Type</label>
                    <input class="form-input" type="text" name="kit_type" placeholder="Collection, return, etc.">
                </div>
                <div>
                    <label class="form-label">Label</label>
                    <input class="form-input" type="text" name="label" placeholder="Misc label or paperwork title">
                </div>
                <div>
                    <label class="form-label">Origin Site</label>
                    <select class="form-select" name="origin_site_id">
                        <option value="">Unknown</option>
                        {% for site in site_options %}
                        <option value="{{ site.id }}">{{ site.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="form-label">Collection Site</label>
                    <select class="form-select" name="collection_site_euid">
                        <option value="">Unspecified</option>
                        {% for site in site_options %}
                        <option value="{{ site.id }}">{{ site.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="form-label">Existing Document EUID</label>
                    <input class="form-input" type="text" name="document_euid" placeholder="Optional">
                </div>
                <div>
                    <label class="form-label">Document Type</label>
                    <input class="form-input" type="text" name="document_type" placeholder="TRF, manifest, paperwork">
                </div>
                <div>
                    <label class="form-label">Upload Document</label>
                    <input class="form-input" type="file" name="document_file">
                </div>
                <div>
                    <label class="form-label">Notes</label>
                    <textarea class="form-textarea" name="notes" rows="2"></textarea>
                </div>
                <label class="checkbox-label">
                    <input type="checkbox" name="label_print_requested" value="true">
                    <span>Queue label print hook placeholder</span>
                </label>
                <div>
                    <label class="form-label">Label Print Context</label>
                    <input class="form-input" type="text" name="label_print_context" placeholder="Bench printer, queue, or print batch context">
                </div>
                <div>
                    <label class="form-label">Tube Image Metadata Placeholder</label>
                    <textarea class="form-textarea" name="tube_image_metadata" rows="2" placeholder="Camera angle, filename, station note, or pending image reference"></textarea>
                </div>
                <div>
                    <label class="form-label">Package Image Metadata Placeholder</label>
                    <textarea class="form-textarea" name="package_image_metadata" rows="2" placeholder="Damage note, photo reference, or scan placeholder"></textarea>
                </div>
                <label class="checkbox-label">
                    <input type="checkbox" name="defer_matching" value="true">
                    <span>Route to matching queue after save</span>
                </label>
                <div>
                    <button type="submit" class="btn btn-primary">Register Content</button>
                </div>
            </form>
        </div>

        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Stage 3: Search and Match</h2>
            </div>
            <form hx-get="/accessioning/work-items/{{ detail.item.euid }}/search" hx-target="#accessioning-match-results" hx-swap="innerHTML" class="mb-md">
                <input class="form-input" type="text" name="q" placeholder="Search by TRF, Test, MRN, DOB (YYYY-MM-DD), shipment, kit, tube, or XID">
            </form>
            <div id="accessioning-match-results">
                {% include "accessioning/_match_results.html" %}
            </div>

            <hr class="my-lg">

            <form method="POST" action="/accessioning/work-items/{{ detail.item.euid }}/links" class="grid" style="display: grid; gap: 0.75rem;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="mode" value="{{ mode }}">

                <div>
                    <label class="form-label">TRF EUID</label>
                    <input class="form-input text-mono" type="text" name="trf_euid" value="{{ detail.matching_state.trf_euid or '' }}">
                </div>
                <div>
                    <label class="form-label">Test EUID</label>
                    <input class="form-input text-mono" type="text" name="test_euid" value="{{ detail.matching_state.test_euid or '' }}">
                </div>
                <div>
                    <label class="form-label">Patient EUID</label>
                    <input class="form-input text-mono" type="text" name="patient_euid" value="{{ detail.matching_state.patient_euid or '' }}">
                </div>
                <div>
                    <label class="form-label">Collection Site</label>
                    <select class="form-select" name="collection_site_euid">
                        <option value="">Unspecified</option>
                        {% for site in site_options %}
                        <option value="{{ site.id }}" {% if detail.matching_state.collection_site_euid == site.id %}selected{% endif %}>{{ site.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="form-label">Role Lines</label>
                    <textarea class="form-textarea" name="role_lines" rows="3" placeholder="PAT-123:PROBAND&#10;PAT-456:MOTHER&#10;PAT-789:FATHER"></textarea>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">Save Linking</button>
                </div>
            </form>
        </div>

        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">No-Order Flow: Provisional Order</h2>
            </div>
            <form method="POST" action="/accessioning/work-items/{{ detail.item.euid }}/provisional-order" class="grid" style="display: grid; gap: 0.75rem;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="mode" value="{{ mode }}">

                <div>
                    <label class="form-label">Site</label>
                    <select class="form-select" name="site_id">
                        <option value="">Select site</option>
                        {% for site in site_options %}
                        <option value="{{ site.id }}">{{ site.name }}{% if site.site_code %} ({{ site.site_code }}){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="form-label">Test / Route Code</label>
                    <input class="form-input" type="text" name="fulfillment_route_code" placeholder="WGS, CMA, etc.">
                </div>
                <div>
                    <label class="form-label">Specimen Type Required</label>
                    <input class="form-input" type="text" name="specimen_type_required" placeholder="blood-whole">
                </div>
                <div>
                    <label class="form-label">Clinician EUID</label>
                    <input class="form-input text-mono" type="text" name="clinician_euid">
                </div>
                <div>
                    <label class="form-label">Clinician First Name</label>
                    <input class="form-input" type="text" name="clinician_first_name">
                </div>
                <div>
                    <label class="form-label">Clinician Last Name</label>
                    <input class="form-input" type="text" name="clinician_last_name">
                </div>
                <div>
                    <label class="form-label">Credentials</label>
                    <input class="form-input" type="text" name="clinician_credentials">
                </div>
                <div>
                    <label class="form-label">Clinical Notes</label>
                    <textarea class="form-textarea" name="clinical_notes" rows="2"></textarea>
                </div>

                <div class="card" style="padding: 1rem;">
                    <h3 class="mb-sm">Proband</h3>
                    <div class="grid" style="display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
                        <input class="form-input text-mono" type="text" name="proband_patient_euid" placeholder="Existing patient EUID">
                        <input class="form-input" type="text" name="proband_first_name" placeholder="First name">
                        <input class="form-input" type="text" name="proband_last_name" placeholder="Last name">
                        <input class="form-input" type="date" name="proband_date_of_birth">
                        <input class="form-input" type="text" name="proband_mrn" placeholder="MRN">
                    </div>
                </div>

                <div class="card" style="padding: 1rem;">
                    <h3 class="mb-sm">Mother</h3>
                    <div class="grid" style="display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
                        <input class="form-input text-mono" type="text" name="mother_patient_euid" placeholder="Existing patient EUID">
                        <input class="form-input" type="text" name="mother_first_name" placeholder="First name">
                        <input class="form-input" type="text" name="mother_last_name" placeholder="Last name">
                        <input class="form-input" type="date" name="mother_date_of_birth">
                        <input class="form-input" type="text" name="mother_mrn" placeholder="MRN">
                    </div>
                </div>

                <div class="card" style="padding: 1rem;">
                    <h3 class="mb-sm">Father</h3>
                    <div class="grid" style="display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
                        <input class="form-input text-mono" type="text" name="father_patient_euid" placeholder="Existing patient EUID">
                        <input class="form-input" type="text" name="father_first_name" placeholder="First name">
                        <input class="form-input" type="text" name="father_last_name" placeholder="Last name">
                        <input class="form-input" type="date" name="father_date_of_birth">
                        <input class="form-input" type="text" name="father_mrn" placeholder="MRN">
                    </div>
                </div>

                <div>
                    <button type="submit" class="btn btn-secondary">Create Provisional Order</button>
                </div>
            </form>
        </div>

        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Outcome</h2>
            </div>
            <form method="POST" action="/accessioning/work-items/{{ detail.item.euid }}/outcome" class="grid" style="display: grid; gap: 0.75rem;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="mode" value="{{ mode }}">

                <div>
                    <label class="form-label">Outcome</label>
                    <select class="form-select" name="outcome">
                        <option value="ACCEPTED">ACCEPTED</option>
                        <option value="HOLD">HOLD</option>
                        <option value="REJECTED">REJECTED</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Patient EUID</label>
                    <input class="form-input text-mono" type="text" name="patient_euid" value="{{ detail.matching_state.patient_euid or '' }}">
                </div>
                <div>
                    <label class="form-label">Starting Queue</label>
                    <select class="form-select" name="starting_queue">
                        <option value="">Required for ACCEPTED</option>
                        {% for queue in starting_queues %}
                        <option value="{{ queue }}">{{ queue }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="form-label">Reason</label>
                    <textarea class="form-textarea" name="reason" rows="2" placeholder="Required for HOLD / REJECTED"></textarea>
                </div>
                <div>
                    <button type="submit" class="btn btn-primary">Record Outcome</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
.containment-tree {
    display: grid;
    gap: 0.75rem;
}

.tree-node {
    border-left: 3px solid var(--border-color);
    padding-left: 0.75rem;
}

.tree-children {
    margin-left: 1rem;
    margin-top: 0.75rem;
    display: grid;
    gap: 0.75rem;
}
</style>
{% endblock %}