{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div>
    <h2 class="text-2xl font-semibold text-slate-900">Import Clients Preview</h2>
    <p class="text-sm text-slate-500">Review validation result before final import.</p>
  </div>

  {% if import_result is defined and import_result %}
  <div class="rounded-2xl bg-white p-6 shadow-soft space-y-4">
    <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">Created {{ import_result.created|length }} clients.</div>
    {% if import_result.created %}
      <div class="rounded-xl border border-slate-200 p-4 text-sm">
        {% for row in import_result.created %}<div>{{ row.client_code }} — {{ row.client_name }} (ID {{ row.id }})</div>{% endfor %}
      </div>
    {% endif %}
    {% if import_result.failures %}
      <div class="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
        {% for err in import_result.failures %}<div>Row {{ err.row_number }}: {{ err.message }}</div>{% endfor %}
      </div>
    {% endif %}
    <div class="flex justify-end"><a href="/clients" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Back to Clients</a></div>
  </div>
  {% else %}
  <div class="grid gap-6 lg:grid-cols-2">
    <section class="rounded-2xl bg-white p-6 shadow-soft">
      <h3 class="text-base font-semibold text-slate-900">Valid rows</h3>
      <div class="mt-3 text-sm text-slate-600">{{ preview.valid_rows|length }} of {{ preview.total_rows }} rows are ready to import.</div>
      <div class="mt-4 max-h-[28rem] overflow-auto rounded-xl border border-slate-200">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
          <thead class="bg-slate-50"><tr><th class="px-4 py-2 text-left">Row</th><th class="px-4 py-2 text-left">Audit Firm ID</th><th class="px-4 py-2 text-left">Partner</th><th class="px-4 py-2 text-left">Client Code</th><th class="px-4 py-2 text-left">Client Name</th></tr></thead>
          <tbody class="divide-y divide-slate-100 bg-white">
            {% for item in preview.valid_rows %}
            <tr><td class="px-4 py-2">{{ item.row_number }}</td><td class="px-4 py-2">{{ item.tenant_id }}</td><td class="px-4 py-2">{{ item.partner_id }}</td><td class="px-4 py-2">{{ item.client_payload.client_code }}</td><td class="px-4 py-2">{{ item.client_payload.client_name }}</td></tr>
            {% else %}
            <tr><td colspan="5" class="px-4 py-6 text-center text-slate-500">No valid rows found.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="rounded-2xl bg-white p-6 shadow-soft">
      <h3 class="text-base font-semibold text-slate-900">Validation errors</h3>
      <div class="mt-3 text-sm text-slate-600">{{ preview.errors|length }} rows have issues.</div>
      <div class="mt-4 max-h-[28rem] space-y-3 overflow-auto">
        {% for err in preview.errors %}
        <div class="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-900">
          <div class="font-semibold">Row {{ err.row_number }}</div>
          <ul class="mt-2 list-disc space-y-1 pl-5">{% for msg in err.messages %}<li>{{ msg }}</li>{% endfor %}</ul>
        </div>
        {% else %}
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">No validation errors found.</div>
        {% endfor %}
      </div>
    </section>
  </div>

  <div class="flex justify-end gap-3">
    <a href="/clients/import" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
    {% if preview.valid_rows %}
    <form method="post" action="/clients/import/commit">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <textarea name="preview_payload" hidden>{{ preview_payload }}</textarea>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700">Import {{ preview.valid_rows|length }} Valid Rows</button>
    </form>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}