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

{% block title %}Exception Queue - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Exception Queue</h1>
        <p class="page-subtitle">Specimens requiring manual review</p>
    </div>
    <a href="/intake" class="btn btn-secondary">← Back to Scan</a>
</div>

<div class="stats-grid mb-lg">
    <div class="stat-card">
        <div class="stat-value">{{ stats.unmatched or 0 }}</div>
        <div class="stat-label">Unmatched Specimens</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.received_pending or 0 }}</div>
        <div class="stat-label">Received - Pending Match</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ stats.mia or 0 }}</div>
        <div class="stat-label">Missing (MIA)</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Pending Exceptions</h2>
        <select class="form-select" style="width: auto;" onchange="filterExceptions(this.value)">
            <option value="">All Types</option>
            <option value="UNMATCHED" {% if type_filter == 'UNMATCHED' %}selected{% endif %}>Unmatched</option>
            <option value="RECEIVED" {% if type_filter == 'RECEIVED' %}selected{% endif %}>Received</option>
            <option value="MIA" {% if type_filter == 'MIA' %}selected{% endif %}>MIA</option>
        </select>
    </div>
    
    {% if exceptions %}
    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Barcode</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Received</th>
                    <th>Age</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for exc in exceptions %}
                <tr>
                    <td class="text-mono">{{ exc.barcode }}</td>
                    <td>{{ exc.specimen_type or "—" }}</td>
                    <td>
                        <span class="status-pill status-{{ exc.status|lower }}">{{ exc.status }}</span>
                    </td>
                    <td class="text-sm">{{ exc.received_date or "—" }}</td>
                    <td class="text-sm text-muted">{{ exc.age }}</td>
                    <td>
                        <div class="flex gap-sm">
                            <a href="/intake?barcode={{ exc.barcode }}" class="btn btn-sm btn-secondary">Match</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon">✅</div>
        <p>No exceptions pending</p>
        <p class="text-sm text-muted">All specimens have been matched</p>
    </div>
    {% endif %}
</div>

<script>
function filterExceptions(type) {
    const url = new URL(window.location);
    if (type) {
        url.searchParams.set('type', type);
    } else {
        url.searchParams.delete('type');
    }
    window.location = url;
}
</script>
{% endblock %}