{% extends "base.html" %}

{% block title %}AI Reports{% endblock %}
{% block page_title %}AI Assisted Comparison Reports{% endblock %}
{% block page_subtitle %}Before and after cleaning photo analysis{% endblock %}

{% block content %}
{% include "partials/breadcrumb.html" %}

<div class="toolbar-tablet">
    <form method="get" class="toolbar-tablet-filters">
        <div class="filter-field">
            <label for="{{ form.q.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.q.label }}
            </label>
            {{ form.q }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.status.label }}
            </label>
            {{ form.status }}
        </div>
        <div class="filter-field min-w-[160px]">
            <label for="{{ form.created_date.id_for_label }}" class="block text-sm font-medium text-slate-700 mb-1">
                {{ form.created_date.label }}
            </label>
            {{ form.created_date }}
        </div>
        <div class="filter-field flex items-end gap-2">
            <button type="submit" class="btn-secondary">Filter</button>
            <a href="{% url 'damage_detection:report_list' %}" class="btn-secondary">Clear</a>
        </div>
    </form>
</div>

<div class="table-scroll-card card">
    {% if page_obj.object_list %}
    <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th>Order #</th>
                    <th>Customer</th>
                    <th>Mobile</th>
                    <th>Photo Type</th>
                    <th>Similarity</th>
                    <th>Confidence</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for report in page_obj %}
                <tr>
                    <td>
                        <a href="{% url 'orders:detail' report.order.pk %}" class="table-action-link text-brand-600">{{ report.order.order_number }}</a>
                    </td>
                    <td>{{ report.order.customer.name }}</td>
                    <td>{{ report.order.customer.mobile_number }}</td>
                    <td>{{ report.before_photo.get_photo_type_display|default:"—" }}</td>
                    <td>{{ report.similarity_score }}%</td>
                    <td>{{ report.confidence_score }}%</td>
                    <td>
                        {% if report.status == 'no_damage' %}
                        <span class="badge badge-counter">{{ report.get_status_display }}</span>
                        {% elif report.status == 'possible_damage' %}
                        <span class="badge" style="background:#fef2f2;color:#b91c1c;">{{ report.get_status_display }}</span>
                        {% else %}
                        <span class="badge" style="background:#fffbeb;color:#b45309;">{{ report.get_status_display }}</span>
                        {% endif %}
                    </td>
                    <td>{{ report.created_at|date:"d M Y, H:i" }}</td>
                    <td>
                        <a href="{% url 'damage_detection:report_detail' report.pk %}" class="table-action-link text-brand-600">View</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% include "partials/pagination.html" with page_obj=page_obj querystring=querystring %}
    {% else %}
    {% include "partials/empty_state.html" with message="No AI assisted comparison reports yet." %}
    {% endif %}
</div>
{% endblock %}