{% extends "base.html" %}
{% block title %}Import Ratings{% endblock %}
{% block content %}
<div class="p-3 sm:p-6 max-w-5xl">

  <div class="flex items-center gap-3 mb-6">
    <a href="{{ url_for('ratings_list') }}"
       class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
      <span class="material-symbols-outlined text-xl">arrow_back</span>
    </a>
    <div>
      <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ _("Import Reviews") }}</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}Select all reviews on the Addons page, copy, and paste below. Star ratings are captured automatically.{% endtrans %}</p>
    </div>
  </div>


  <form method="post" action="{{ url_for('ratings_import') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">

      {# New format — rich paste intercepts clipboard for plain text + star ratings #}
      <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60">
          <span class="material-symbols-outlined text-base text-amber-500">star</span>
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ _("New format") }}</span>
          <span class="ml-1 text-xs text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20 px-1.5 py-0.5 rounded border border-green-200 dark:border-green-700">★ {{ _("rich paste") }}</span>
          <span class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ _("Current Addons review system") }}</span>
        </div>
        <div class="p-3">
          {# plain text sent to server for parsing; star ratings extracted from clipboard HTML by JS #}
          <input type="hidden" name="new_format" id="new_format_input">
          <input type="hidden" name="new_format_stars" id="new_format_stars_input">
          <div
            id="new_format_editor"
            contenteditable="true"
            data-placeholder="{{ _('Select all reviews on the Addons page, copy (Ctrl+C), and paste here…') }}"
            class="w-full min-h-[18rem] max-h-96 overflow-y-auto text-sm bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-500 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-600"
          ></div>
          <p id="new_format_hint" class="mt-1.5 text-xs text-gray-400 dark:text-gray-500 hidden"></p>
        </div>
      </div>

      {# Old format #}
      <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="flex items-center gap-2 px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60">
          <span class="material-symbols-outlined text-base text-gray-400">star_outline</span>
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ _("Old format") }}</span>
          <span class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ _("Legacy Addons review system") }}</span>
        </div>
        <div class="p-3">
          <textarea
            name="old_format"
            id="old_format"
            rows="18"
            placeholder="{{ _('Paste old-format reviews here…') }}"
            class="w-full text-xs font-mono bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-brand-500 resize-y"
          >{{ old_raw }}</textarea>
        </div>
      </div>
    </div>

    <div class="flex items-center gap-3">
      <button type="submit" id="submit-btn"
              class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium transition-colors">
        <span class="material-symbols-outlined text-base">search</span>
        {% trans %}Parse &amp; Preview{% endtrans %}
      </button>
      <span class="text-xs text-gray-400 dark:text-gray-500">{{ _("Reviews will be matched to products but not saved yet.") }}</span>
    </div>
  </form>

  {% if parse_error %}
  <div class="mt-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-xl p-4">
    <p class="text-sm font-medium text-red-800 dark:text-red-200">{{ _("Parse error") }}</p>
    <p class="text-xs text-red-600 dark:text-red-400 mt-1 font-mono">{{ parse_error }}</p>
  </div>
  {% endif %}

  {% if parsed_old %}
  <div class="mt-5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60 flex items-center gap-2">
      <span class="material-symbols-outlined text-base text-gray-400">star_outline</span>
      <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans count=parsed_old|length %}Old format parsed — {{ count }} review{% pluralize %}Old format parsed — {{ count }} reviews{% endtrans %}</span>
      <span class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ _("locale:") }} {{ parsed_old[0].locale }}</span>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-xs">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400">
            <th class="px-4 py-2 font-medium">{{ _("Order") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Product(s)") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Purchased") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Reviewed") }}</th>
            <th class="px-4 py-2 font-medium text-center">{{ _("Mod") }}</th>
            <th class="px-4 py-2 font-medium text-center">{{ _("Docs") }}</th>
            <th class="px-4 py-2 font-medium text-center">{{ _("Install") }}</th>
            <th class="px-4 py-2 font-medium text-center">{{ _("Avg") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Skill") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Comment") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700/50">
          {% for r in parsed_old %}
          {% set products = r.matched_products if r.matched_products is defined else [] %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 {% if products|length > 1 %}bg-amber-50/40 dark:bg-amber-900/10{% endif %}">
            <td class="px-4 py-2 font-mono text-gray-500 dark:text-gray-400">#{{ r.order_id }}</td>
            <td class="px-4 py-2 max-w-[180px]">
              {% if products %}
                {% for p in products %}
                  <div class="{% if products|length > 1 %}text-amber-700 dark:text-amber-400 font-medium{% else %}text-gray-700 dark:text-gray-300{% endif %} truncate" title="{{ p.product_name }}">
                    {{ p.product_name | truncate(35, True, '…') }}
                  </div>
                {% endfor %}
                {% if products|length > 1 %}
                  <div class="text-xs text-amber-500 dark:text-amber-500 mt-0.5">{% trans count=products|length %}⚠ {{ count }} product{% pluralize %}⚠ {{ count }} products{% endtrans %}</div>
                {% endif %}
              {% else %}
                <span class="text-gray-300 dark:text-gray-600">{{ _("not found") }}</span>
              {% endif %}
            </td>
            <td class="px-4 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ r.purchase_date or '—' }}</td>
            <td class="px-4 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ r.review_date or '—' }}</td>
            <td class="px-4 py-2 text-center text-gray-700 dark:text-gray-300">{{ r.score_module or '—' }}</td>
            <td class="px-4 py-2 text-center text-gray-700 dark:text-gray-300">{{ r.score_docs or '—' }}</td>
            <td class="px-4 py-2 text-center text-gray-700 dark:text-gray-300">{{ r.score_install or '—' }}</td>
            <td class="px-4 py-2 text-center font-semibold text-amber-600 dark:text-amber-400">{{ r.score_average or '—' }}</td>
            <td class="px-4 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ r.skill_level or '—' }}</td>
            <td class="px-4 py-2 text-gray-700 dark:text-gray-300 max-w-xs">
              {% if r.comment_text %}
                <span title="{{ r.comment_text }}">{{ r.comment_text[:80] }}{% if r.comment_text|length > 80 %}…{% endif %}</span>
              {% else %}
                <span class="text-gray-300 dark:text-gray-600 italic">{{ _("no comment") }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  {% if parsed_new %}
  <div class="mt-5 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60 flex items-center gap-2">
      <span class="material-symbols-outlined text-base text-amber-500">star</span>
      <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans count=parsed_new|length %}New format parsed — {{ count }} review{% pluralize %}New format parsed — {{ count }} reviews{% endtrans %}</span>
      {% if parsed_new and parsed_new[0].star_rating is none %}
      <span class="ml-2 inline-flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-0.5 rounded-full border border-amber-200 dark:border-amber-700" title="{{ _('Paste the page HTML source instead to include star ratings') }}">
        <span class="material-symbols-outlined text-sm">warning</span>
        {{ _("No stars — paste HTML source for ratings") }}
      </span>
      {% endif %}
      <span class="ml-auto text-xs text-gray-400 dark:text-gray-500">{{ _("locale:") }} {{ parsed_new[0].locale }}</span>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-xs">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400">
            <th class="px-4 py-2 font-medium">{{ _("Order") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Product(s)") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Customer") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Purchased") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Reviewed") }}</th>
            <th class="px-4 py-2 font-medium text-center">{{ _("Stars") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Reply") }}</th>
            <th class="px-4 py-2 font-medium">{{ _("Review") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700/50">
          {% for r in parsed_new %}
          {% set products = r.matched_products if r.matched_products is defined else [] %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/40 {% if products|length > 1 %}bg-amber-50/40 dark:bg-amber-900/10{% endif %}">
            <td class="px-4 py-2 font-mono text-gray-500 dark:text-gray-400">#{{ r.order_id }}</td>
            <td class="px-4 py-2 max-w-[180px]">
              {% if products %}
                {% for p in products %}
                  <div class="{% if products|length > 1 %}text-amber-700 dark:text-amber-400 font-medium{% else %}text-gray-700 dark:text-gray-300{% endif %} truncate" title="{{ p.product_name }}">
                    {{ p.product_name | truncate(35, True, '…') }}
                  </div>
                {% endfor %}
                {% if products|length > 1 %}
                  <div class="text-xs text-amber-500 mt-0.5">{% trans count=products|length %}⚠ {{ count }} product{% pluralize %}⚠ {{ count }} products{% endtrans %}</div>
                {% endif %}
              {% else %}
                <span class="text-gray-300 dark:text-gray-600">{{ _("not found") }}</span>
              {% endif %}
            </td>
            <td class="px-4 py-2 text-gray-800 dark:text-gray-200 whitespace-nowrap">{{ r.customer_name }}</td>
            <td class="px-4 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ r.purchase_date or '—' }}</td>
            <td class="px-4 py-2 text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ r.review_date or '—' }}</td>
            <td class="px-4 py-2 text-center whitespace-nowrap">
              {% if r.star_rating %}
                <span class="font-semibold text-amber-500">{{ r.star_rating }}</span><span class="text-amber-400 text-xs">★</span>
              {% else %}
                <span class="text-gray-300 dark:text-gray-600" title="{{ _('Paste HTML source to get star ratings') }}">—</span>
              {% endif %}
            </td>
            <td class="px-4 py-2 whitespace-nowrap">
              {% if r.has_seller_reply %}
                <span class="inline-flex items-center gap-1 text-brand-600 dark:text-brand-400">
                  <span class="material-symbols-outlined text-sm">reply</span>
                  {{ r.seller_reply_date or '?' }}
                </span>
              {% else %}
                <span class="text-gray-300 dark:text-gray-600">—</span>
              {% endif %}
            </td>
            <td class="px-4 py-2 text-gray-700 dark:text-gray-300 max-w-xs">
              <span title="{{ r.review_text }}">{{ r.review_text[:80] }}{% if r.review_text|length > 80 %}…{% endif %}</span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}

  {# Conflict resolution + import — only shown when there are parsed results #}
  {% set all_parsed = parsed_new + parsed_old %}
  {% set conflicts = [] %}
  {% set undetected = [] %}
  {% for r in all_parsed %}
    {% if r.matched_products is defined and r.matched_products|length > 1 %}
      {% set _ = conflicts.append(r) %}
    {% elif not r.matched_products is defined or r.matched_products|length == 0 %}
      {% set _ = undetected.append(r) %}
    {% endif %}
  {% endfor %}

  {% if all_parsed %}
  <div class="mt-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60 flex items-center gap-2">
      <span class="material-symbols-outlined text-base text-brand-500">upload</span>
      <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans %}Confirm &amp; Import{% endtrans %}</span>
      <span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{% trans count=all_parsed|length %}{{ count }} review ready{% pluralize %}{{ count }} reviews ready{% endtrans %}</span>
    </div>
    <div class="p-4 space-y-4">

      {% if conflicts %}
      <div class="space-y-3">
        <div class="flex flex-wrap items-center gap-3">
          <p class="text-sm font-medium text-amber-700 dark:text-amber-400 flex items-center gap-1.5">
            <span class="material-symbols-outlined text-base">warning</span>
            {% trans count=conflicts|length %}{{ count }} order matched multiple products — choose which to assign:{% pluralize %}{{ count }} orders matched multiple products — choose which to assign:{% endtrans %}
          </p>
          <button type="button" id="apply-all-btn"
                  class="ml-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800/40 border border-amber-200 dark:border-amber-700/50 transition-colors">
            <span class="material-symbols-outlined text-sm">select_all</span>
            {{ _("Apply to all for all conflicts") }}
          </button>
        </div>
        {% for r in conflicts %}
        {% set review_text = r.review_text if r.review_text is defined else r.comment_text if r.comment_text is defined else '' %}
        <div class="bg-amber-50/60 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/50 rounded-lg p-3 space-y-2">
          <div class="flex flex-wrap items-start gap-3">
            <span class="text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-nowrap mt-0.5">Order #{{ r.order_id }}</span>
            <div class="flex flex-wrap gap-3">
              {% for p in r.matched_products %}
              <label class="flex items-center gap-2 cursor-pointer text-xs">
                <input type="radio"
                       name="conflict_{{ r.order_id }}"
                       value="{{ p.id_product }}"
                       class="conflict-radio text-brand-600 focus:ring-brand-500"
                       data-order="{{ r.order_id }}"
                       {% if loop.first %}checked{% endif %}>
                <span class="text-gray-700 dark:text-gray-300">{{ p.product_name }}</span>
              </label>
              {% endfor %}
              <label class="flex items-center gap-2 cursor-pointer text-xs">
                <input type="radio"
                       name="conflict_{{ r.order_id }}"
                       value="all"
                       class="conflict-radio text-brand-600 focus:ring-brand-500"
                       data-order="{{ r.order_id }}">
                <span class="text-gray-500 dark:text-gray-400 italic">{{ _("Apply to all %(n)s", n=r.matched_products|length) }}</span>
              </label>
            </div>
          </div>
          {% if review_text %}
          <p class="text-xs text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-wrap border-l-2 border-amber-300 dark:border-amber-600 pl-2">{{ review_text }}</p>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      {% endif %}

      {% if undetected %}
      <div class="space-y-3">
        <p class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-1.5">
          <span class="material-symbols-outlined text-base">help_outline</span>
          {% trans count=undetected|length %}{{ count }} order with no matching product in orders history:{% pluralize %}{{ count }} orders with no matching product in orders history:{% endtrans %}
        </p>
        <div class="bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 rounded-lg p-3 space-y-3">
          <div class="flex flex-wrap gap-2 text-xs text-gray-500 dark:text-gray-400">
            {% for r in undetected %}
            <span class="font-mono bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded px-1.5 py-0.5">#{{ r.order_id }}</span>
            {% endfor %}
          </div>
          <div class="flex flex-wrap items-start gap-4">
            <div class="flex items-center gap-2 pt-1">
              <input type="radio" name="undetected_action" value="apply" id="undetected-apply"
                     class="text-brand-600 focus:ring-brand-500" checked>
              <label for="undetected-apply" class="text-sm text-gray-700 dark:text-gray-300 cursor-pointer">{{ _("Apply to:") }}</label>
            </div>
            <div class="flex-1 min-w-[240px]">
              <div class="max-h-40 overflow-y-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-100 dark:divide-gray-700/50 text-xs">
                {% for p in products_for_picker %}
                <label class="flex items-center gap-2.5 px-3 py-1.5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/40">
                  <input type="checkbox" name="undetected_products" value="{{ p.id }}"
                         class="undetected-product-cb rounded text-brand-600 focus:ring-brand-500"
                         {% if suggested_product_id and p.id == suggested_product_id %}checked{% endif %}>
                  <span class="text-gray-700 dark:text-gray-300 {% if suggested_product_id and p.id == suggested_product_id %}font-medium{% endif %}">{{ p.name }}</span>
                  {% if discovered_products %}
                    {% for dp in discovered_products %}
                      {% if dp.id == p.id %}<span class="ml-auto text-gray-400 dark:text-gray-500">{{ dp.count }}×</span>{% endif %}
                    {% endfor %}
                  {% endif %}
                </label>
                {% endfor %}
              </div>
              <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ _("Check all modules that were part of the bundle") }}</p>
            </div>
            <div class="flex items-center gap-2 pt-1">
              <input type="radio" name="undetected_action" value="ignore"
                     class="text-brand-600 focus:ring-brand-500">
              <label class="text-sm text-gray-500 dark:text-gray-400 cursor-pointer">{{ _("Ignore these orders") }}</label>
            </div>
          </div>
        </div>
      </div>
      {% endif %}

      <div class="flex items-center gap-3 pt-1">
        <button id="confirm-import-btn" type="button"
                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
          <span class="material-symbols-outlined text-base">cloud_upload</span>
          {% trans %}Confirm &amp; Import{% endtrans %}
        </button>
        <span class="text-xs text-gray-400 dark:text-gray-500">{{ _("Duplicates are skipped automatically.") }}</span>
      </div>

      <div id="import-result" class="hidden"></div>
    </div>
  </div>

  {# Embed parsed data as JSON for the import JS #}
  <script type="application/json" id="parsed-new-json">{{ parsed_new | tojson }}</script>
  <script type="application/json" id="parsed-old-json">{{ parsed_old | tojson }}</script>
  {% endif %}

</div>

<script>
(function() {
  // ── Paste interceptor ─────────────────────────────────────────────────
  var editor = document.getElementById('new_format_editor');
  var plainInput = document.getElementById('new_format_input');
  var starsInput = document.getElementById('new_format_stars_input');
  var hint = document.getElementById('new_format_hint');

  if (editor) {
    editor.addEventListener('paste', function(e) {
      e.preventDefault();
      var cd = e.clipboardData || window.clipboardData;

      var htmlData = cd.getData('text/html') || '';
      var stars = [];
      var re = /class="stars\s+stars-(\d)"/g, m;
      while ((m = re.exec(htmlData)) !== null) stars.push(parseInt(m[1]));

      var plain = cd.getData('text/plain') || '';
      if (!plain.trim() && htmlData) {
        var tmp = document.createElement('div');
        tmp.innerHTML = htmlData;
        plain = tmp.innerText || tmp.textContent || '';
      }
      plain = plain.trim();

      var lineCount = plain.split('\n').filter(function(l){ return l.trim(); }).length;
      var strLinesCaptured = {{ _(" lines captured") | tojson }};
      var strStarRating = {{ _(" star rating") | tojson }};
      var strStarRatings = {{ _(" star ratings") | tojson }};
      var strNoStarRatings = {{ _(" · no star ratings in clipboard") | tojson }};
      hint.textContent = lineCount + strLinesCaptured + (stars.length ? ' · ' + stars.length + (stars.length !== 1 ? strStarRatings : strStarRating) + ': ' + stars.join(', ') : strNoStarRatings);
      hint.className = 'mt-1.5 text-xs ' + (stars.length ? 'text-green-600 dark:text-green-400' : 'text-amber-500 dark:text-amber-400');

      plainInput.value = plain;
      starsInput.value = JSON.stringify(stars);
      // Show rendered HTML for readability; plain text goes to the hidden input
      editor.innerHTML = htmlData || plain;
    });

    document.getElementById('submit-btn').closest('form').addEventListener('submit', function() {
      if (!plainInput.value && editor.innerText.trim()) {
        plainInput.value = editor.innerText;
      }
    });
  }

  // ── Apply all to all products ─────────────────────────────────────────
  var applyAllBtn = document.getElementById('apply-all-btn');
  if (applyAllBtn) {
    applyAllBtn.addEventListener('click', function() {
      document.querySelectorAll('.conflict-radio[value="all"]').forEach(function(radio) {
        radio.checked = true;
      });
    });
  }

  // ── Confirm & Import ──────────────────────────────────────────────────
  var importBtn = document.getElementById('confirm-import-btn');
  if (!importBtn) return;

  var parsedNewEl = document.getElementById('parsed-new-json');
  var parsedOldEl = document.getElementById('parsed-old-json');
  var parsedNew = parsedNewEl ? JSON.parse(parsedNewEl.textContent) : [];
  var parsedOld = parsedOldEl ? JSON.parse(parsedOldEl.textContent) : [];

  // Tag each review with its format
  parsedNew.forEach(function(r) { r.format = 'new'; });
  parsedOld.forEach(function(r) { r.format = 'old'; });
  var allReviews = parsedNew.concat(parsedOld);

  importBtn.addEventListener('click', function() {
    importBtn.disabled = true;
    importBtn.querySelector('.material-symbols-outlined').textContent = 'hourglass_empty';

    // Collect checked products for undetected orders
    var undetectedProductIds = [];
    document.querySelectorAll('.undetected-product-cb:checked').forEach(function(cb) {
      undetectedProductIds.push(cb.value);
    });

    // Collect conflict overrides from radios
    var overrides = {};
    document.querySelectorAll('.conflict-radio:checked').forEach(function(radio) {
      var orderId = radio.dataset.order;
      overrides[orderId] = radio.value;
    });

    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

    var undetectedRadio = document.querySelector('input[name="undetected_action"]:checked');
    var undetectedAction = undetectedRadio ? undetectedRadio.value : 'apply';

    fetch('{{ url_for("ratings_do_import") }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrfToken,
      },
      body: JSON.stringify({
        undetected_product_ids: undetectedProductIds,
        overrides: overrides,
        undetected_action: undetectedAction,
        reviews: allReviews,
      }),
    })
    .then(function(resp) {
      if (!resp.ok) {
        var strServerError = {{ _("Server error") | tojson }};
        return resp.text().then(function(t) { throw new Error(strServerError + ' ' + resp.status + (t ? ': ' + t.slice(0, 200) : '')); });
      }
      return resp.json();
    })
    .then(function(data) {
      importBtn.disabled = false;
      importBtn.querySelector('.material-symbols-outlined').textContent = 'cloud_upload';

      var resultEl = document.getElementById('import-result');
      resultEl.className = '';
      if (data.error) {
        resultEl.innerHTML = '<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-lg p-3 text-sm text-red-700 dark:text-red-300">' + data.error + '</div>';
      } else {
        var errHtml = '';
        if (data.errors && data.errors.length) {
          errHtml = '<ul class="mt-2 text-xs text-amber-700 dark:text-amber-400 list-disc list-inside">' +
            data.errors.map(function(e) { return '<li>' + e + '</li>'; }).join('') +
            '</ul>';
        }
        var color = data.inserted > 0 ? 'green' : 'gray';
        var strImported = {{ _("imported") | tojson }};
        var strAlreadyExisted = {{ _("already existed") | tojson }};
        resultEl.innerHTML =
          '<div class="bg-' + color + '-50 dark:bg-' + color + '-900/20 border border-' + color + '-200 dark:border-' + color + '-700 rounded-lg p-3 flex items-start gap-2">' +
            '<span class="material-symbols-outlined text-' + color + '-600 dark:text-' + color + '-400 text-lg shrink-0">' + (data.inserted > 0 ? 'check_circle' : 'info') + '</span>' +
            '<div>' +
              '<p class="text-sm font-medium text-' + color + '-800 dark:text-' + color + '-200">' +
                data.inserted + ' ' + strImported + ', ' + data.skipped + ' ' + strAlreadyExisted +
              '</p>' +
              errHtml +
            '</div>' +
          '</div>';

        // Auto-redirect to a clean import page after success
        if (data.inserted > 0 || (!data.errors || !data.errors.length)) {
          setTimeout(function() {
            window.location.href = '{{ url_for("ratings_import") }}';
          }, 1800);
        }
      }
    })
    .catch(function(err) {
      importBtn.disabled = false;
      importBtn.querySelector('.material-symbols-outlined').textContent = 'cloud_upload';
      var strNetworkError = {{ _("Network error:") | tojson }};
      document.getElementById('import-result').innerHTML =
        '<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 rounded-lg p-3 text-sm text-red-700 dark:text-red-300">' + strNetworkError + ' ' + err.message + '</div>';
      document.getElementById('import-result').className = '';
    });
  });
})();
</script>
{% endblock %}