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

{% block title %}Support Tickets - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-stack">
    <section class="brand-hero support-hero">
        <div class="brand-hero-copy">
            <p class="brand-eyebrow">Support</p>
            <h1 class="brand-title">Need help with a TRF, specimen, or result?</h1>
            <p class="brand-description">
                Open a ticket for technical issues, access requests, billing questions, or case follow-up.
                Atlas keeps the operational history attached to your organization.
            </p>
            <div class="brand-actions">
                <a href="/support/create" class="btn btn-primary">Create Ticket</a>
                <a href="mailto:support@lsmc.bio" class="btn btn-ghost">support@lsmc.bio</a>
            </div>
        </div>
        <aside class="brand-panel">
            <div class="brand-mark brand-mark-lg" aria-hidden="true"></div>
            <p class="brand-panel-kicker">{{ tickets|length }} ticket{% if tickets|length != 1 %}s{% endif %} in view</p>
            <p class="brand-panel-copy">
                Technical triage, access questions, and customer follow-up in one queue.
            </p>
        </aside>
    </section>

    <section class="card filters-card">
        <form method="get" action="/support" class="filters-form">
            <div class="filter-group">
                <label for="status" class="form-label">Status</label>
                <select name="status" id="status" class="form-select" 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="WAITING_CUSTOMER" {% if status_filter == 'WAITING_CUSTOMER' %}selected{% endif %}>Waiting Customer</option>
                    <option value="WAITING_INTERNAL" {% if status_filter == 'WAITING_INTERNAL' %}selected{% endif %}>Waiting Internal</option>
                    <option value="RESOLVED" {% if status_filter == 'RESOLVED' %}selected{% endif %}>Resolved</option>
                    <option value="CLOSED" {% if status_filter == 'CLOSED' %}selected{% endif %}>Closed</option>
                </select>
            </div>

            <div class="filter-group">
                <label for="ticket_type" class="form-label">Type</label>
                <select name="ticket_type" id="ticket_type" class="form-select" onchange="this.form.submit()">
                    <option value="">All</option>
                    <option value="TECHNICAL" {% if type_filter == 'TECHNICAL' %}selected{% endif %}>Technical</option>
                    <option value="BILLING" {% if type_filter == 'BILLING' %}selected{% endif %}>Billing</option>
                    <option value="ORDER_ISSUE" {% if type_filter == 'ORDER_ISSUE' %}selected{% endif %}>TRF Issue</option>
                    <option value="SPECIMEN_ISSUE" {% if type_filter == 'SPECIMEN_ISSUE' %}selected{% endif %}>Specimen Issue</option>
                    <option value="RESULT_INQUIRY" {% if type_filter == 'RESULT_INQUIRY' %}selected{% endif %}>Result Inquiry</option>
                    <option value="ACCESS_REQUEST" {% if type_filter == 'ACCESS_REQUEST' %}selected{% endif %}>Access Request</option>
                    <option value="FEATURE_REQUEST" {% if type_filter == 'FEATURE_REQUEST' %}selected{% endif %}>Feature Request</option>
                    <option value="OTHER" {% if type_filter == 'OTHER' %}selected{% endif %}>Other</option>
                </select>
            </div>
        </form>
    </section>

    <section class="card">
        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Ticket #</th>
                        <th>EUID</th>
                        <th>Subject</th>
                        <th>Type</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if tickets %}
                        {% for ticket, revision in tickets %}
                        <tr>
                            <td>
                                <a href="/support/{{ ticket.euid }}" class="link">
                                    {{ ticket.ticket_number }}
                                </a>
                            </td>
                            <td><a class="text-mono text-sm link" href="/tapdb/object/{{ ticket.euid }}">{{ ticket.euid }}</a></td>
                            <td><strong>{{ revision.subject }}</strong></td>
                            <td>
                                <span class="badge badge-default">
                                    {{ revision.ticket_type.replace('_', ' ') }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ 'danger' if revision.priority == 'URGENT' else 'warning' if revision.priority == 'HIGH' else 'default' }}">
                                    {{ revision.priority }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ 'success' if revision.status == 'RESOLVED' else 'secondary' if revision.status == 'CLOSED' else 'primary' if revision.status == 'IN_PROGRESS' else 'default' }}">
                                    {{ revision.status.replace('_', ' ') }}
                                </span>
                            </td>
                            <td>{{ ticket.created_at | format_dt(user_preferences) }}</td>
                            <td>
                                <a href="/support/{{ ticket.euid }}" class="btn btn-sm btn-secondary">View</a>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="8" class="text-center text-muted">
                                No tickets found
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </section>

    <div>
        <a href="/" class="btn btn-secondary">← Back to Dashboard</a>
    </div>
</div>
{% endblock %}