{% extends "base.html" %}
{% block title %}Inspection Report - {{ (data.vehicle or {}).make }} {{ (data.vehicle or {}).model }} - {{ settings.company_name }}{% endblock %}

{% macro rating_badge(rating) -%}
  {%- if rating == 'fail' -%}
    <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-bold text-red-800">FAIL</span>
  {%- elif rating == 'pass_with_note' -%}
    <span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-bold text-amber-800">PASS w/ NOTE</span>
  {%- else -%}
    <span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-800">PASS</span>
  {%- endif -%}
{%- endmacro %}

{% block content %}
{% set v = data.vehicle or {} %}
{% set sections = data.sections or [] %}
{% set verdict = data.overall_verdict or {} %}
{% set titles = {'engine':'Engine & Powertrain','transmission':'Transmission & Driveline','exhaust':'Exhaust & Emissions','fluids':'Fluids','hv_battery':'HV Battery','charge_system':'Charge System','drive_motor':'Drive Motor(s) & Inverter','regen':'Regenerative Braking','hv_cooling':'HV Battery Cooling','aux_battery':'12V Auxiliary Battery','range':'Estimated Range','hybrid_control':'Hybrid Powertrain Control','brakes':'Brakes','tires':'Tires & Wheels','suspension':'Suspension & Steering','electrical':'Electrical & Electronics','safety':'Safety Systems','exterior':'Exterior & Interior','road_test':'Road Test'} %}
<div class="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm sm:p-8">

    {# Header: dealer + report title #}
    <div class="border-b border-zinc-200 pb-5">
      <h1 class="text-xl font-black text-zinc-950">{{ settings.company_name }}</h1>
      <p class="mt-1 text-sm font-bold uppercase tracking-wide text-emerald-700">Pre-Sale Mechanical Inspection Report</p>
    </div>

    {# Shop profile block #}
    {% if shop.name or shop.phone or shop.email %}
      <div class="mt-5 flex flex-wrap items-start gap-4 rounded-xl bg-zinc-50 p-4">
        {% if shop.logo_path %}
          <img src="{{ shop.logo_path }}" alt="{{ shop.name }}" class="h-14 w-auto rounded bg-white p-1 object-contain">
        {% endif %}
        <div class="text-sm text-zinc-700">
          <div class="font-black text-zinc-950">{{ shop.name }}</div>
          {% if shop.address %}<div>{{ shop.address }}</div>{% endif %}
          {% if shop.phone %}<div>{{ shop.phone }}</div>{% endif %}
          {% if shop.email %}<div>{{ shop.email }}</div>{% endif %}
          {% if shop.license %}<div class="mt-1 text-xs text-zinc-500">Licence: {{ shop.license }}</div>{% endif %}
        </div>
      </div>
    {% endif %}

    {# Vehicle identity #}
    <div class="mt-5 grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
      <div><span class="text-zinc-500">Vehicle:</span> <span class="font-bold text-zinc-950">{{ v.year }} {{ v.make }} {{ v.model }} {{ v.trim }}</span></div>
      <div><span class="text-zinc-500">Body:</span> <span class="font-bold text-zinc-950">{{ v.body_style }}</span></div>
      <div><span class="text-zinc-500">Powertrain:</span> <span class="font-bold text-zinc-950">{{ v.fuel_type }}</span></div>
      <div><span class="text-zinc-500">Engine:</span> <span class="font-bold text-zinc-950">{{ v.engine }}</span></div>
      <div><span class="text-zinc-500">Driveline:</span> <span class="font-bold text-zinc-950">{{ v.drive_line }}</span></div>
      <div><span class="text-zinc-500">Transmission:</span> <span class="font-bold text-zinc-950">{{ v.transmission }}</span></div>
      <div><span class="text-zinc-500">Odometer:</span> <span class="font-bold text-zinc-950">{{ '{:,}'.format(v.odometer|float) if v.odometer else '' }} km</span></div>
      <div><span class="text-zinc-500">VIN:</span> <span class="font-mono text-zinc-950">{{ v.vin }}</span></div>
      <div><span class="text-zinc-500">Stock:</span> <span class="font-mono text-zinc-950">{{ v.stock }}</span></div>
    </div>
    <div class="mt-3 text-sm text-zinc-600">
      <span class="text-zinc-500">Inspection date:</span> <span class="font-bold text-zinc-950">{{ report.inspection_date or '' }}</span>
      {% if report.inspector_name %}&nbsp;·&nbsp; <span class="text-zinc-500">Inspector:</span> <span class="font-bold text-zinc-950">{{ report.inspector_name }}</span>{% endif %}
    </div>

    {# Sections #}
    <div class="mt-6 space-y-4">
      {% for section in sections %}
        <div class="rounded-xl border border-zinc-200 p-4">
          <div class="flex items-center justify-between gap-3">
            <h3 class="text-sm font-black text-zinc-950">{{ loop.index }}. {{ titles.get(section.id, section.id) }}</h3>
            {{ rating_badge(section.rating) }}
          </div>
          {% if section.findings %}
            <ul class="mt-2 list-disc pl-5 text-sm text-zinc-700">
              {% for f in section.findings %}<li>{{ f }}</li>{% endfor %}
            </ul>
          {% endif %}
          {% if section.notes %}<p class="mt-2 text-sm text-amber-800">Notes: {{ section.notes }}</p>{% endif %}
        </div>
      {% endfor %}
    </div>

    {# Overall verdict #}
    {% if verdict %}
      <div class="mt-6 rounded-xl bg-zinc-950 p-4 text-center text-white">
        <div class="text-xs font-bold uppercase tracking-wide text-zinc-400">Overall verdict</div>
        <div class="mt-1 text-lg font-black">{{ rating_badge(verdict.rating) }} {{ verdict.summary }}</div>
      </div>
    {% endif %}

    {# Shop stamp block (approved only) #}
    {% if report.status == 'approved' and report.approved_at %}
      <div class="mt-6 flex flex-wrap items-center justify-between gap-4 rounded-xl border-2 border-emerald-300 bg-emerald-50 p-4">
        <div class="text-sm text-emerald-900">
          <div class="text-xs uppercase tracking-wide text-emerald-600">Approved by</div>
          <div class="font-black">{{ shop.name }}</div>
          {% if shop.license %}<div class="text-xs">Licence: {{ shop.license }}</div>{% endif %}
          <div class="mt-1 text-xs">Inspector: {{ report.approved_by or report.inspector_name or '—' }}</div>
          <div class="text-xs">Date: {{ (report.approved_at or '')[:10] }}</div>
        </div>
        <div class="rotate-3 rounded-full border-4 border-emerald-600 px-5 py-2 text-center text-emerald-700">
          <div class="text-lg font-black leading-none">APPROVED</div>
          <div class="text-[10px] font-bold uppercase tracking-wide">Mechanical Inspection</div>
        </div>
      </div>
    {% endif %}

    {# Footer #}
    <div class="mt-6 border-t border-zinc-200 pt-4 text-xs text-zinc-400">
      Report ID: <span class="font-mono">{{ report.report_token[:12] }}</span> · Status: {{ report.status }}
    </div>
  </div>
</div>
{% endblock %}