{% extends "base.html" %}
{% block title %}Shop Inspection Portal - {{ settings.company_name }}{% endblock %}

{% block content %}
<div class="mx-auto max-w-5xl 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">
    <div class="border-b border-zinc-200 pb-5">
      <h1 class="text-xl font-black text-zinc-950">Mechanical Inspection Portal</h1>
      <p class="mt-1 text-sm text-zinc-600">Review each report, then approve &amp; stamp (or request changes / revoke). Use the checkboxes for bulk approval.</p>
      {% if shop.name %}<p class="mt-2 text-sm font-bold text-zinc-700">{{ shop.name }}{% if shop.license %} · Licence {{ shop.license }}{% endif %}</p>{% endif %}
    </div>

    {# Status filter #}
    <div class="mt-4 flex flex-wrap gap-2">
      <a class="rounded-full px-3 py-1 text-xs font-black {{ 'bg-zinc-950 text-white' if not status_filter else 'bg-zinc-100 text-zinc-700' }}" href="{{ url_for('shop_portal', shop_token=shop_token) }}">All</a>
      {% for s in ('pending', 'changes_requested', 'approved', 'revoked') %}
        <a class="rounded-full px-3 py-1 text-xs font-black {{ 'bg-zinc-950 text-white' if status_filter == s else 'bg-zinc-100 text-zinc-700' }}" href="{{ url_for('shop_portal', shop_token=shop_token, status=s) }}">{{ s|replace('_',' ')|title }}</a>
      {% endfor %}
    </div>

    <form class="mt-5" method="post" action="{{ url_for('shop_portal_bulk', shop_token=shop_token) }}">
      <div class="flex flex-wrap items-end gap-3 rounded-lg bg-zinc-50 p-4">
        <label><span class="form-label">Bulk action</span>
          <select class="form-input" name="bulk_action">
            <option value="">Choose action</option>
            <option value="approve">Approve &amp; stamp selected</option>
            <option value="request_changes">Request changes selected</option>
            <option value="revoke">Revoke selected</option>
          </select>
        </label>
        <label><span class="form-label">Inspector name (for approve)</span><input class="form-input" name="inspector_name" placeholder="J. Martin"></label>
        <label><span class="form-label">Inspection date (single)</span><input class="form-input" type="date" name="inspection_date"></label>
        <label><span class="form-label">Or random date range: from</span><input class="form-input" type="date" name="inspection_date_start"></label>
        <label><span class="form-label">to</span><input class="form-input" type="date" name="inspection_date_end"></label>
        <p class="w-full text-xs text-zinc-500">If a range is given, each approved report gets a random date within it — so a batch doesn't all show the same approval day.</p>
        <button class="btn-primary" type="submit">Apply to selected</button>
      </div>

      <div class="mt-4 overflow-x-auto">
        <table class="min-w-full divide-y divide-zinc-200">
          <thead class="bg-zinc-100">
            <tr>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600"></th>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600">Vehicle</th>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600">Powertrain</th>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600">Status</th>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600">Generated</th>
              <th class="px-3 py-2 text-left text-xs font-black uppercase text-zinc-600">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-zinc-200">
            {% for r in rows %}
              <tr>
                <td class="px-3 py-2"><input type="checkbox" name="report_tokens" value="{{ r.report_token }}"></td>
                <td class="px-3 py-2 text-sm font-bold text-zinc-950">{{ r.l_year }} {{ r.l_make }} {{ r.l_model }} {{ r.l_trim or '' }}<div class="text-xs font-normal text-zinc-500">{{ r.l_stock or '' }}</div></td>
                <td class="px-3 py-2 text-xs uppercase">{{ r.powertrain_type }}</td>
                <td class="px-3 py-2 text-sm">
                  {% if r.status == 'approved' %}<span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-black text-emerald-800">Approved</span>
                  {% elif r.status == 'pending' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800">Pending</span>
                  {% elif r.status == 'changes_requested' %}<span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-black text-amber-800">Changes requested</span>
                  {% elif r.status == 'revoked' %}<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-black text-red-700">Revoked</span>{% endif %}
                </td>
                <td class="px-3 py-2 text-xs text-zinc-500">{{ (r.generated_at or '')[:10] }}</td>
                <td class="px-3 py-2"><a class="font-bold underline decoration-emerald-400 decoration-2 underline-offset-4" href="{{ url_for('shop_portal_report', shop_token=shop_token, report_token=r.report_token) }}">Open</a></td>
              </tr>
            {% else %}
              <tr><td class="px-3 py-4 text-sm text-zinc-500" colspan="6">No inspection reports yet.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </form>
  </div>
</div>
{% endblock %}