{% extends "base.html" %}

{% block title %}AI Report — {{ report.order.order_number }}{% endblock %}
{% block page_title %}AI Assisted Comparison Report{% endblock %}
{% block page_subtitle %}{{ report.order.order_number }} — {{ photo_type_label }}{% endblock %}

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

<div class="flex flex-wrap gap-3 mb-6">
    <a href="{% url 'orders:detail' report.order.pk %}" class="btn-secondary">Back to Order</a>
    <a href="{% url 'damage_detection:report_list' %}" class="btn-secondary">All AI Reports</a>
</div>

<div class="card mb-6 bg-amber-50 border-amber-200">
    <p class="text-sm text-amber-900">
        <strong>AI assisted comparison only.</strong>
        Results indicate possible visible differences — not guaranteed or confirmed damage.
        Manual verification recommended before customer communication.
    </p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Order Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Order #: </dt><dd class="inline font-medium">{{ report.order.order_number }}</dd></div>
            <div><dt class="text-slate-500 inline">Status: </dt><dd class="inline">{{ report.order.get_status_display }}</dd></div>
            <div><dt class="text-slate-500 inline">Photo Type: </dt><dd class="inline">{{ photo_type_label|default:"—" }}</dd></div>
            <div><dt class="text-slate-500 inline">Report Created: </dt><dd class="inline">{{ report.created_at|date:"d M Y, H:i" }}</dd></div>
            <div><dt class="text-slate-500 inline">Generated By: </dt><dd class="inline">{{ report.created_by.get_full_name|default:report.created_by.username|default:"—" }}</dd></div>
        </dl>
    </div>
    <div class="card">
        <h3 class="text-lg font-semibold mb-4">Customer Details</h3>
        <dl class="space-y-2 text-sm">
            <div><dt class="text-slate-500 inline">Name: </dt><dd class="inline font-medium">{{ report.order.customer.name }}</dd></div>
            <div><dt class="text-slate-500 inline">Mobile: </dt><dd class="inline">{{ report.order.customer.mobile_number }}</dd></div>
            <div><dt class="text-slate-500 inline">WhatsApp: </dt><dd class="inline">{{ report.order.customer.whatsapp_number|default:"—" }}</dd></div>
        </dl>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="card text-center">
        <p class="text-sm text-slate-500">Similarity Score</p>
        <p class="text-2xl font-bold text-brand-600">{{ report.similarity_score }}%</p>
    </div>
    <div class="card text-center">
        <p class="text-sm text-slate-500">Confidence Score</p>
        <p class="text-2xl font-bold">{{ report.confidence_score }}%</p>
    </div>
    <div class="card text-center md:col-span-2">
        <p class="text-sm text-slate-500">Status</p>
        <p class="text-lg font-semibold mt-1">{{ report.get_status_display }}</p>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <div class="card">
        <h3 class="text-sm font-semibold mb-3">Before Cleaning</h3>
        {% if report.before_photo %}
        <img src="{{ report.before_photo.photo.url }}" alt="Before cleaning" class="w-full rounded-lg border object-cover" style="max-height:280px">
        {% else %}
        <p class="text-sm text-slate-500">No before image linked.</p>
        {% endif %}
    </div>
    <div class="card">
        <h3 class="text-sm font-semibold mb-3">After Cleaning</h3>
        {% if report.after_photo %}
        <img src="{{ report.after_photo.photo.url }}" alt="After cleaning" class="w-full rounded-lg border object-cover" style="max-height:280px">
        {% else %}
        <p class="text-sm text-slate-500">No after image linked.</p>
        {% endif %}
    </div>
    <div class="card">
        <h3 class="text-sm font-semibold mb-3">Difference (Highlighted Areas)</h3>
        {% if report.difference_image %}
        <img src="{{ report.difference_image.url }}" alt="Difference map" class="w-full rounded-lg border object-cover" style="max-height:280px">
        <p class="text-xs text-slate-500 mt-2">Red boxes indicate areas of possible visible difference.</p>
        {% else %}
        <p class="text-sm text-slate-500">No difference image available.</p>
        {% endif %}
    </div>
</div>

<div class="card mb-6">
    <h3 class="text-lg font-semibold mb-3">AI Observations</h3>
    <p class="text-sm text-slate-700 whitespace-pre-line">{{ report.ai_observations }}</p>
</div>

<div class="card">
    <h3 class="text-lg font-semibold mb-3">Manual Verification Note</h3>
    <p class="text-sm text-slate-600">
        {% if report.status == 'no_damage' %}
        AI assisted comparison suggests images are highly similar. This is not a guarantee of garment condition.
        Staff may still perform a physical check if needed.
        {% else %}
        Manual verification recommended. AI assisted comparison cannot confirm exact damage type
        (stain, tear, color change, shrinkage, or texture change). Please inspect the garment physically
        before informing the customer.
        {% endif %}
    </p>
</div>
{% endblock %}