{% extends "base.html" %}

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

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Exception Queue</h1>
        <p class="subtitle">Intake exceptions requiring manual intervention</p>
    </div>

    <!-- Filters -->
    <div class="filters-bar">
        <form method="get" action="/exceptions" class="filter-form">
            <div class="filter-group">
                <label for="status">Status:</label>
                <select name="status" id="status" onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="OPEN" {% if status_filter == 'OPEN' %}selected{% endif %}>Open</option>
                    <option value="ASSIGNED" {% if status_filter == 'ASSIGNED' %}selected{% endif %}>Assigned</option>
                    <option value="IN_PROGRESS" {% if status_filter == 'IN_PROGRESS' %}selected{% endif %}>In Progress</option>
                    <option value="RESOLVED" {% if status_filter == 'RESOLVED' %}selected{% endif %}>Resolved</option>
                    <option value="ESCALATED" {% if status_filter == 'ESCALATED' %}selected{% endif %}>Escalated</option>
                    <option value="CLOSED" {% if status_filter == 'CLOSED' %}selected{% endif %}>Closed</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="exception_type">Type:</label>
                <select name="exception_type" id="exception_type" onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="MISSING_ID" {% if type_filter == 'MISSING_ID' %}selected{% endif %}>Missing ID</option>
                    <option value="AMBIGUOUS_MATCH" {% if type_filter == 'AMBIGUOUS_MATCH' %}selected{% endif %}>Ambiguous Match</option>
                    <option value="MISMATCH" {% if type_filter == 'MISMATCH' %}selected{% endif %}>Mismatch</option>
                    <option value="MISSING_DATA" {% if type_filter == 'MISSING_DATA' %}selected{% endif %}>Missing Data</option>
                    <option value="DAMAGED_SPECIMEN" {% if type_filter == 'DAMAGED_SPECIMEN' %}selected{% endif %}>Damaged Specimen</option>
                    <option value="WRONG_SPECIMEN_TYPE" {% if type_filter == 'WRONG_SPECIMEN_TYPE' %}selected{% endif %}>Wrong Type</option>
                    <option value="OTHER" {% if type_filter == 'OTHER' %}selected{% endif %}>Other</option>
                </select>
            </div>
        </form>
    </div>

    <!-- Exception List -->
    {% if exceptions %}
    <div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>Exception #</th>
                    <th>EUID</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Trigger</th>
                    <th>TRF</th>
                    <th>Assigned To</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for exc in exceptions %}
                <tr>
                    <td>
                        <a href="/exceptions/{{ exc.exception_number }}" class="link-primary">
                            {{ exc.exception_number }}
                        </a>
                    </td>
                    <td><a class="text-mono text-sm" href="/tapdb/object/{{ exc.id }}">{{ exc.id }}</a></td>
                    <td>
                        <span class="badge badge-type">{{ exc.exception_type }}</span>
                    </td>
                    <td>
                        <span class="badge badge-status badge-{{ exc.status|lower }}">
                            {{ exc.status }}
                        </span>
                    </td>
                    <td>
                        {% if exc.trigger_entity_type %}
                            {{ exc.trigger_entity_type }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>
                        {% if exc.order_number %}
                            <a href="/trfs/{{ exc.order_id }}" class="link-secondary">
                                {{ exc.order_number }}
                            </a>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>
                        {% if exc.assigned_to %}
                            {{ exc.assigned_to_name or exc.assigned_to }}
                        {% else %}
                            <span class="text-muted">Unassigned</span>
                        {% endif %}
                    </td>
                    <td>{{ exc.created_at | format_dt(user_preferences) }}</td>
                    <td>
                        <a href="/exceptions/{{ exc.exception_number }}" class="btn btn-sm btn-secondary">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <p>No exceptions found.</p>
        {% if status_filter or type_filter %}
        <a href="/exceptions" class="btn btn-secondary">Clear Filters</a>
        {% endif %}
    </div>
    {% endif %}

    <!-- Stats Summary -->
    <div class="stats-summary">
        <div class="stat-card">
            <div class="stat-value">{{ stats.open }}</div>
            <div class="stat-label">Open</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.assigned }}</div>
            <div class="stat-label">Assigned</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.in_progress }}</div>
            <div class="stat-label">In Progress</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ stats.resolved_today }}</div>
            <div class="stat-label">Resolved Today</div>
        </div>
    </div>
</div>
{% endblock %}