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

{% block title %}Shipment {{ (revision.tracking_number if revision else None) or shipment.id|string|truncate(8, True, '') }} - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">
            <span class="text-mono">{{ (revision.tracking_number if revision else None) or "No Tracking #" }}</span>
            {% if revision %}
            <span class="status-pill status-{{ revision.status|lower|replace('_', '-') }} ml-md">
                {{ revision.status|replace('_', ' ') }}
            </span>
            {% endif %}
        </h1>
        <p class="page-subtitle">Created {{ shipment.created_at | format_dt(user_preferences) if shipment.created_at else 'Unknown' }}</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;">
        <!-- Contents - Hierarchical Tree View -->
        <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 containment_tree %}
                <!-- Test Kits with nested specimens -->
                {% if containment_tree.test_kits %}
                <div class="containment-tree">
                    <h4 class="tree-section-title">Test Kits ({{ containment_tree.test_kits|length }})</h4>
                    {% for kit in containment_tree.test_kits %}
                    <div class="tree-node tree-node-kit">
                        <div class="tree-node-header" style="display: flex; justify-content: space-between; align-items: center;">
                            <div style="display: flex; align-items: center; gap: 0.5rem;">
                                <span class="tree-icon">📦</span>
                                <span class="tree-label">
                                    <a href="/testkits/{{ kit.id }}"><strong>{{ kit.barcode }}</strong></a>
                                    {% if kit.type %}
                                    <span class="badge badge-sm badge-default ml-sm">{{ kit.type }}</span>
                                    {% endif %}
                                </span>
                            </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.id }}">
                                <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.specimens %}
                        <div class="tree-children">
                            {% for specimen in kit.specimens %}
                            <div class="tree-node tree-node-specimen">
                                <span class="tree-icon">🧪</span>
                                <span class="tree-label">
                                    <a href="/tubes/{{ specimen.id }}" class="text-mono">{{ specimen.barcode }}</a>
                                    {% if specimen.type %}
                                    <span class="text-muted ml-sm">{{ specimen.type }}</span>
                                    {% endif %}
                                    {% if specimen.status %}
                                    <span class="badge badge-sm badge-{{ 'success' if specimen.status == 'MATCHED' else 'default' }} ml-sm">
                                        {{ specimen.status }}
                                    </span>
                                    {% endif %}
                                </span>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="tree-children">
                            <div class="text-muted text-sm ml-lg">No specimens in this kit</div>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- Direct containers/materials (not in kits) -->
                {% if containment_tree.direct_specimens %}
                <div class="containment-tree mt-lg">
                    <h4 class="tree-section-title">Direct Materials ({{ containment_tree.direct_specimens|length }})</h4>
                    {% for specimen in containment_tree.direct_specimens %}
                    <div class="tree-node tree-node-specimen" style="display: flex; justify-content: space-between; align-items: center;">
                        <div style="display: flex; align-items: center; gap: 0.5rem;">
                            <span class="tree-icon">🧪</span>
                            <span class="tree-label">
                                <a href="/tubes/{{ specimen.id }}" class="text-mono">{{ specimen.barcode }}</a>
                                {% if specimen.type %}
                                <span class="text-muted ml-sm">{{ specimen.type }}</span>
                                {% endif %}
                                {% if specimen.status %}
                                <span class="badge badge-sm badge-{{ 'success' if specimen.status == 'MATCHED' else 'default' }} ml-sm">
                                    {{ specimen.status }}
                                </span>
                                {% endif %}
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

                {% if not containment_tree.test_kits and not containment_tree.direct_specimens %}
                <div class="empty-state">
                    <p class="text-muted">No contents added yet</p>
                </div>
                {% endif %}
            {% 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-specimen {
            border-left: 3px solid var(--accent-color);
            background: var(--bg-primary);
        }

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

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

        .tree-label {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.25rem;
        }

        .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">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 user and user.is_internal and 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.id }}',
                    tracking_number: '{{ revision.tracking_number if revision else "" }}'
                })
            })
            .then(response => response.json())
            .then(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 %}