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

{% block title %}Shipment {{ shipment.euid }}{% if revision and revision.tracking_number %} ({{ revision.tracking_number }}){% endif %} - LSMC Hub{% endblock %}

{% block content %}
{% macro meta_chip(label, value, extra_class='') -%}
    {% if value %}
    <span class="tree-meta-chip {{ extra_class }}">{{ label }}: {{ value }}</span>
    {% endif %}
{%- endmacro %}

{% macro render_collection_tube(tube) -%}
<div class="tree-node tree-node-tube">
    <div class="tree-node-header">
        <span class="tree-icon">🧪</span>
        <div class="tree-node-body">
            <div class="tree-node-title"><a href="/tubes/{{ tube.external_object_euid }}" class="text-mono">{{ tube.euid }}</a></div>
            <div class="tree-node-meta">
                {{ meta_chip('Type', tube.tube_type) }}
                {{ meta_chip('Status', tube.status) }}
                {% if tube.collected_at %}
                {{ meta_chip('Collected', tube.collected_at | format_dt(user_preferences)) }}
                {% elif tube.created_at %}
                {{ meta_chip('Created', tube.created_at | format_dt(user_preferences)) }}
                {% endif %}
                {{ meta_chip('Collection', tube.collection_type) }}
                {{ meta_chip('Collector', tube.collected_by) }}
            </div>
        </div>
    </div>
</div>
{%- endmacro %}

{% macro render_test(test) -%}
<div class="tree-node tree-node-test">
    <div class="tree-node-header">
        <span class="tree-icon">🧬</span>
        <div class="tree-node-body">
            <div class="tree-node-title">
                <span class="text-mono">{{ test.euid }}</span>
                {% if test.product_code or test.product_name %}
                <span class="tree-node-secondary">
                    {{ test.product_code or test.product_name }}
                    {% if test.product_code and test.product_name %} · {{ test.product_name }}{% endif %}
                </span>
                {% endif %}
            </div>
            <div class="tree-node-meta">
                {{ meta_chip('Status', test.status) }}
                {% if test.created_at %}
                {{ meta_chip('Created', test.created_at | format_dt(user_preferences)) }}
                {% endif %}
                {{ meta_chip('Collections', test.collection_count) }}
            </div>
        </div>
    </div>
    {% if test.collection_tubes %}
    <div class="tree-children">
        {% for tube in test.collection_tubes %}
        {{ render_collection_tube(tube) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{%- endmacro %}

{% macro render_trf(trf) -%}
<div class="tree-node tree-node-trf">
    <div class="tree-node-header">
        <span class="tree-icon">📝</span>
        <div class="tree-node-body">
            <div class="tree-node-title">
                <span class="text-mono">{{ trf.euid }}</span>
                {% if trf.order_number and trf.order_number != trf.euid %}
                <span class="tree-node-secondary">Order {{ trf.order_number }}</span>
                {% endif %}
            </div>
            <div class="tree-node-meta">
                {{ meta_chip('Status', trf.status) }}
                {% if trf.created_at %}
                {{ meta_chip('Created', trf.created_at | format_dt(user_preferences)) }}
                {% endif %}
                {{ meta_chip('Collections', trf.collection_count) }}
            </div>
        </div>
    </div>
    {% if trf.tests %}
    <div class="tree-children">
        {% for test in trf.tests %}
        {{ render_test(test) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{%- endmacro %}

{% macro render_kit(kit) -%}
<div class="tree-node tree-node-kit">
    <div class="tree-node-header tree-node-header-spread">
        <div class="tree-node-header">
            <span class="tree-icon">📦</span>
            <div class="tree-node-body">
                <div class="tree-node-title">
                    <a href="/testkits/{{ kit.euid }}" class="text-mono">{{ kit.euid }}</a>
                    {% if kit.display_label and kit.display_label != kit.euid %}
                    <span class="tree-node-secondary">{{ kit.display_label }}</span>
                    {% endif %}
                </div>
                <div class="tree-node-meta">
                    {{ meta_chip('Type', kit.kit_type) }}
                    {{ meta_chip('Collections', kit.collection_count) }}
                    {% if kit.created_at %}
                    {{ meta_chip('Created', kit.created_at | format_dt(user_preferences)) }}
                    {% endif %}
                </div>
            </div>
        </div>
        {% if revision and revision.status == 'DRAFT' %}
        <form method="POST" action="/shipments/{{ shipment.shipment_number }}/remove-item" style="margin: 0;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="item_type" value="TestKit">
            <input type="hidden" name="item_id" value="{{ kit.euid }}">
            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Remove this test kit from shipment?')">Remove</button>
        </form>
        {% endif %}
    </div>
    {% if kit.trfs %}
    <div class="tree-children">
        {% for trf in kit.trfs %}
        {{ render_trf(trf) }}
        {% endfor %}
    </div>
    {% else %}
    <div class="tree-children">
        <div class="text-muted text-sm">No TRFs linked to this kit yet</div>
    </div>
    {% endif %}
</div>
{%- endmacro %}

<div class="page-header">
    <div>
        <h1 class="page-title">
            <span class="text-mono">{{ shipment.euid }}</span>
            {% if revision and revision.tracking_number %}
            <span class="page-title-secondary">({{ revision.tracking_number }})</span>
            {% endif %}
            {% if revision %}
            <span class="status-pill status-{{ revision.status|lower|replace('_', '-') }} ml-md">
                {{ revision.status|replace('_', ' ') }}
            </span>
            {% endif %}
        </h1>
        <p class="page-subtitle">
            Shipment {{ shipment.shipment_number }}
            {% if shipment.created_at %}
            · Created {{ shipment.created_at | format_dt(user_preferences) }}
            {% endif %}
        </p>
    </div>
    <div class="flex gap-md">
        {% if revision and revision.status == 'DRAFT' and user.can_write %}
        <a href="/shipments/{{ shipment.shipment_number }}/edit" class="btn btn-secondary">Edit</a>
        {% endif %}
        {% if user and user.is_internal and revision and revision.status not in ['RECEIVED', 'CANCELED'] %}
        <form method="POST" action="/shipments/{{ shipment.shipment_number }}/receive" style="margin: 0;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <button type="submit" class="btn btn-primary">📥 Receive Shipment</button>
        </form>
        {% endif %}
        <a href="/shipments" class="btn btn-ghost">← Back</a>
    </div>
</div>

<div class="flex gap-lg">
    <div style="flex: 2;">
        <div class="card mb-lg">
            <div class="card-header">
                <h2 class="card-title">Contents</h2>
                {% if revision and revision.status == 'DRAFT' and user.can_write %}
                <div class="flex gap-sm">
                    <button class="btn btn-sm btn-ghost" onclick="toggleSection('add-existing-kit')">+ Add Existing Kit</button>
                    <button class="btn btn-sm btn-secondary" onclick="showAddKitModal()">+ Create Kit</button>
                    <a href="/shipments/{{ shipment.shipment_number }}/add-specimen" class="btn btn-sm btn-secondary">+ Add Bloom Tube</a>
                </div>
                {% endif %}
            </div>

            <!-- Add Existing Kit Section -->
            <div id="add-existing-kit-section" class="card-body" style="display: none; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary);">
                <h4 class="mb-sm">Add Existing Test Kit</h4>
                <div class="flex gap-sm mb-sm">
                    <input type="text" id="kit-search" placeholder="Search by barcode..." class="form-control" style="flex: 1;"
                           hx-get="/shipments/{{ shipment.shipment_number }}/search/testkits"
                           hx-trigger="keyup changed delay:300ms"
                           hx-target="#kit-search-results"
                           name="q">
                </div>
                <div id="kit-search-results"></div>
            </div>

            {% if shipment_contents and (shipment_contents.test_kits or shipment_contents.loose_trfs or shipment_contents.direct_collection_tubes) %}
            <div class="containment-tree">
                <h4 class="tree-section-title">Test Kits ({{ shipment_contents.test_kits|length }})</h4>
                {% if shipment_contents.test_kits %}
                    {% for kit in shipment_contents.test_kits %}
                    {{ render_kit(kit) }}
                    {% endfor %}
                {% else %}
                <div class="text-muted text-sm">No test kits in this shipment</div>
                {% endif %}
            </div>

            <div class="containment-tree mt-lg">
                <h4 class="tree-section-title">TRFs ({{ shipment_contents.loose_trfs|length }})</h4>
                {% if shipment_contents.loose_trfs %}
                    {% for trf in shipment_contents.loose_trfs %}
                    {{ render_trf(trf) }}
                    {% endfor %}
                {% else %}
                <div class="text-muted text-sm">No loose TRFs in this shipment</div>
                {% endif %}
            </div>

            <div class="containment-tree mt-lg">
                <h4 class="tree-section-title">Collection Tubes ({{ shipment_contents.direct_collection_tubes|length }})</h4>
                {% if shipment_contents.direct_collection_tubes %}
                    {% for tube in shipment_contents.direct_collection_tubes %}
                    {{ render_collection_tube(tube) }}
                    {% endfor %}
                {% else %}
                <div class="text-muted text-sm">No loose collection tubes in this shipment</div>
                {% endif %}
            </div>
            {% else %}
            <div class="empty-state">
                <p class="text-muted">No contents added yet</p>
            </div>
            {% endif %}
        </div>

        <style>
        .containment-tree {
            padding: 1rem;
        }

        .tree-section-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }

        .tree-node {
            margin-bottom: 0.75rem;
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-secondary);
        }

        .tree-node-kit {
            border-left: 3px solid var(--primary-color);
        }

        .tree-node-trf {
            border-left: 3px solid #4f46e5;
        }

        .tree-node-test {
            border-left: 3px solid #0f766e;
            background: var(--bg-primary);
        }

        .tree-node-tube {
            border-left: 3px solid var(--accent-color);
            background: var(--bg-primary);
        }

        .tree-node-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .tree-node-header-spread {
            justify-content: space-between;
            align-items: flex-start;
        }

        .tree-icon {
            font-size: 1.25rem;
        }

        .tree-node-body {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-width: 0;
        }

        .tree-node-title {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
            font-weight: 600;
        }

        .tree-node-secondary,
        .page-title-secondary {
            color: var(--text-muted);
            font-weight: 500;
        }

        .tree-node-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .tree-meta-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.2rem 0.45rem;
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.06);
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .tree-children {
            margin-top: 0.75rem;
            margin-left: 2rem;
            padding-left: 1rem;
            border-left: 2px dashed var(--border-color);
        }

        .tree-children .tree-node {
            margin-bottom: 0.5rem;
        }

        .tree-children .tree-node:last-child {
            margin-bottom: 0;
        }
        </style>
    </div>

    <div style="flex: 1;">
        <!-- Shipment Details -->
        <div class="card mb-lg">
            <h3 class="mb-md">Shipment Details</h3>
            <div class="mb-md">
                <div class="text-sm text-muted">Shipment EUID</div>
                <div class="text-mono">{{ shipment.euid }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Shipment Number</div>
                <div>{{ shipment.shipment_number }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Carrier</div>
                <div>{{ (revision.carrier if revision else None) or "Not specified" }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Origin</div>
                <div>{{ origin_site.name if origin_site else "Not specified" }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Destination</div>
                <div>{{ (revision.destination_address.get('name') if revision and revision.destination_address else None) or "LSMC Lab" }}</div>
            </div>
            {% if revision and revision.special_instructions %}
            <div>
                <div class="text-sm text-muted">Notes</div>
                <div>{{ revision.special_instructions }}</div>
            </div>
            {% endif %}
        </div>

        {% if revision and revision.status == 'DRAFT' %}
        <div class="card mb-lg">
            <h3 class="mb-md">Actions</h3>
            <form method="POST" action="/shipments/{{ shipment.shipment_number }}/ship">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <button type="submit" class="btn btn-primary" style="width: 100%;">Mark as Shipped</button>
            </form>
        </div>
        {% endif %}

        <!-- Documents Section -->
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">📄 Documents</h3>
                <button class="btn btn-sm btn-secondary" onclick="showUploadDocModal()">+ Upload</button>
            </div>
            {% if documents and documents|length > 0 %}
            <div class="document-list">
                {% for doc in documents %}
                <div class="document-item">
                    <span class="document-icon">📄</span>
                    <div class="document-info">
                        <div class="document-name">{{ doc.filename }}</div>
                        <div class="document-meta text-sm text-muted">
                            {{ doc.document_type or 'Document' }} • {{ doc.size_bytes|filesizeformat if doc.size_bytes else 'Unknown size' }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p class="text-muted">No documents attached</p>
            </div>
            {% endif %}
        </div>

        <!-- FedEx Tracking Section -->
        {% if tracking or (revision and revision.tracking_number) %}
        <div class="card mb-lg">
            <div class="card-header">
                <h3 class="card-title">📦 FedEx Tracking</h3>
                {% if revision and revision.tracking_number %}
                <button class="btn btn-sm btn-secondary" onclick="refreshTracking()">Refresh</button>
                {% endif %}
            </div>

            {% if tracking %}
            <div class="tracking-summary mb-md">
                <div class="tracking-status">
                    <span class="badge badge-lg badge-{{ 'success' if tracking.delivery_status == 'Delivered' else 'primary' }}">
                        {{ tracking.delivery_status }}
                    </span>
                </div>

                <div class="tracking-details mt-md">
                    <div class="flex gap-lg">
                        <div>
                            <div class="text-sm text-muted">Origin</div>
                            <div>{{ tracking.origin_city or '—' }}, {{ tracking.origin_state or '—' }}</div>
                        </div>
                        <div>
                            <div class="text-sm text-muted">Destination</div>
                            <div>{{ tracking.destination_city or '—' }}, {{ tracking.destination_state or '—' }}</div>
                        </div>
                    </div>

                    {% if tracking.transit_time_seconds %}
                    <div class="mt-md">
                        <div class="text-sm text-muted">Transit Time</div>
                        <div>{{ (tracking.transit_time_seconds / 3600)|round(1) }} hours</div>
                    </div>
                    {% endif %}

                    {% if tracking.service_description %}
                    <div class="mt-md">
                        <div class="text-sm text-muted">Service</div>
                        <div>{{ tracking.service_description }}</div>
                    </div>
                    {% endif %}
                </div>
            </div>

            {% if tracking.events %}
            <h4 class="text-sm text-muted mb-sm">Tracking Events</h4>
            <div class="tracking-events">
                {% for event in tracking.events[:5] %}
                <div class="tracking-event">
                    <div class="tracking-event-time">
                        {{ event.timestamp.strftime('%m/%d %H:%M') if event.timestamp else '—' }}
                    </div>
                    <div class="tracking-event-details">
                        <div class="tracking-event-desc">{{ event.event_description }}</div>
                        <div class="text-sm text-muted">
                            {{ event.city or '' }}{% if event.city and event.state %}, {% endif %}{{ event.state or '' }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% else %}
            <div class="text-muted">
                Tracking number: {{ revision.tracking_number }}<br>
                <small>Click "Refresh" to fetch tracking data</small>
            </div>
            {% endif %}
        </div>

        <style>
        .tracking-status {
            text-align: center;
            padding: 1rem 0;
        }

        .badge-lg {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }

        .tracking-events {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .tracking-event {
            display: flex;
            gap: 1rem;
            padding: 0.5rem;
            border-left: 2px solid var(--border-color);
        }

        .tracking-event-time {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
            width: 80px;
        }

        .tracking-event-desc {
            font-weight: 500;
        }
        </style>

        <script>
        function refreshTracking() {
            fetch('/api/tracking/shipment/update', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    shipment_id: '{{ shipment.euid }}',
                    tracking_number: '{{ revision.tracking_number if revision else "" }}'
                })
            })
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(text || 'Tracking refresh failed');
                    });
                }
                return response.json();
            })
            .then(data => {
                void data;
                location.reload();
            })
            .catch(error => {
                alert('Error refreshing tracking: ' + error.message);
            });
        }
        </script>
        {% endif %}
    </div>
</div>

{% include "partials/tube_panel.html" %}

<!-- Add Kit Modal -->
<div id="addKitModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h3>Add Test Kit to Shipment</h3>
        <form method="POST" action="/shipments/{{ shipment.shipment_number }}/add-kit">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="form-group">
                <label for="kit_barcode">Kit Barcode</label>
                <input type="text" id="kit_barcode" name="kit_barcode" placeholder="Scan barcode or leave blank to mint a new Atlas kit EUID" class="form-input">
            </div>
            <div class="form-group">
                <label for="kit_type">Kit Type</label>
                <select id="kit_type" name="kit_type" class="form-select">
                    <option value="">-- Select Type --</option>
                    <option value="DNA">DNA Collection Kit</option>
                    <option value="RNA">RNA Collection Kit</option>
                    <option value="BLOOD">Blood Collection Kit</option>
                    <option value="TISSUE">Tissue Collection Kit</option>
                </select>
            </div>
            <p class="text-sm text-muted">If no barcode is available, Atlas will create the kit and use its EUID as the operational label.</p>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Add Kit</button>
                <button type="button" class="btn btn-secondary" onclick="hideAddKitModal()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Upload Document Modal -->
<div id="uploadDocModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h3>Upload Document</h3>
        <form method="POST" action="/documents/upload" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <input type="hidden" name="entity_type" value="Shipment">
            <input type="hidden" name="entity_id" value="{{ shipment.euid }}">
            <div class="form-group">
                <label for="doc_file">File *</label>
                <input type="file" id="doc_file" name="file" required class="form-input">
            </div>
            <div class="form-group">
                <label for="doc_type">Document Type</label>
                <select id="doc_type" name="document_type" class="form-select">
                    <option value="">-- Select Type --</option>
                    <option value="MANIFEST">Manifest</option>
                    <option value="PACKING_SLIP">Packing Slip</option>
                    <option value="CHAIN_OF_CUSTODY">Chain of Custody</option>
                    <option value="REQUISITION">Requisition Form</option>
                    <option value="OTHER">Other</option>
                </select>
            </div>
            <div class="form-group">
                <label for="doc_note">Note</label>
                <textarea id="doc_note" name="note" class="form-input" rows="2" placeholder="Optional note about this document"></textarea>
            </div>
            <div class="form-group">
                <label for="doc_visibility">Who can see this document?</label>
                <select id="doc_visibility" name="visibility" class="form-select">
                    <option value="organization">My Organization — visible to everyone in my organization</option>
                    <option value="individual">Just Me — only I can see this document</option>
                </select>
                <small class="form-text text-muted">Internal staff and admins can always view all documents.</small>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Upload</button>
                <button type="button" class="btn btn-secondary" onclick="hideUploadDocModal()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<style>
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
    margin-bottom: 1.5rem;
}

.modal-content .form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
</style>

<script>
function toggleSection(section) {
    const sections = ['add-existing-kit'];
    sections.forEach(s => {
        const el = document.getElementById(s + '-section');
        if (el) {
            if (s === section) {
                el.style.display = el.style.display === 'none' ? 'block' : 'none';
            } else {
                el.style.display = 'none';
            }
        }
    });
}

function showAddKitModal() {
    document.getElementById('addKitModal').style.display = 'flex';
    document.getElementById('kit_barcode').focus();
}

function hideAddKitModal() {
    document.getElementById('addKitModal').style.display = 'none';
}

function showUploadDocModal() {
    document.getElementById('uploadDocModal').style.display = 'flex';
}

function hideUploadDocModal() {
    document.getElementById('uploadDocModal').style.display = 'none';
}

// Close modals on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        hideAddKitModal();
        hideUploadDocModal();
        // Also close search sections
        ['add-existing-kit-section'].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.style.display = 'none';
        });
    }
});

// Close modals when clicking outside
document.querySelectorAll('.modal').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.style.display = 'none';
        }
    });
});
</script>
{% endblock %}