{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% block title %}{{ _("Ratings") }}{% endblock %}
{% block content %}
<div class="p-3 sm:p-6">
  {% if upsell is defined and upsell %}
  <div class="max-w-lg mx-auto mt-12 text-center">
    <span class="material-symbols-outlined text-5xl text-gray-300 dark:text-gray-600 mb-4">star</span>
    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">{{ _("Ratings — MAX plan") }}{{ max_badge() }}</h2>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-5">
      {% trans %}Import and manage PrestaShop Addons reviews. Available on the MAX plan.{% endtrans %}
    </p>
    <button type="button" onclick='showUpgradeModal("max", {{ _("Ratings")|tojson }})'
            class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      {{ _("Upgrade to MAX") }}
    </button>
  </div>
  {% else %}
  {# Header #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div>
      <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">{{ _("Ratings") }}</h1>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
        {{ _("Module reviews imported from PrestaShop Addons.") }}
        {% if total %}<span class="ml-1 font-medium text-gray-700 dark:text-gray-300">{% trans count=total %}{{ count }} review{% pluralize %}{{ count }} reviews{% endtrans %}</span>{% endif %}
      </p>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
      {% if total %}
      {% if has_feature('ratings_export') %}
      <a href="{{ url_for('ratings_export') }}{% if product_filter %}?product_id={{ product_filter }}{% endif %}"
         class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
        <span class="material-symbols-outlined text-base">download</span>
        {{ _("Export CSV") }}
      </a>
      {% else %}
      <button type="button" onclick='showUpgradeModal("max", {{ _("Ratings CSV Export")|tojson }})'
              class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
        <span class="material-symbols-outlined text-base">download</span>
        {{ _("Export CSV") }}{{ max_badge() }}
      </button>
      {% endif %}
      {% endif %}
      <a href="{{ url_for('ratings_import') }}"
         class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium transition-colors">
        <span class="material-symbols-outlined text-base">upload</span>
        {{ _("Import Reviews") }}
      </a>
    </div>
  </div>

  {% if total %}
  {# Product filter #}
  <div class="mb-4 flex items-center gap-2">
    <label class="text-sm text-gray-600 dark:text-gray-400">{{ _("Filter by product:") }}</label>
    <select id="product-filter" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 outline-none">
      <option value="">{{ _("All products") }}</option>
      {% for p in products %}
      <option value="{{ p.id }}" {% if product_filter == p.id %}selected{% endif %}>{{ p.name }}</option>
      {% endfor %}
    </select>
  </div>

  {# Ratings table #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Product") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Customer") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Grade") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden lg:table-cell">{{ _("Review") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden md:table-cell">{{ _("Date") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden xl:table-cell">{{ _("Order") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden xl:table-cell">{{ _("Fmt") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden md:table-cell">{{ _("Replied") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
          {% for r in ratings %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors">
            <td class="px-4 py-3 text-xs text-gray-700 dark:text-gray-300 max-w-[160px]">
              <span class="line-clamp-2 leading-snug" title="{{ r.product_name or '' }}">{{ r.product_name or (_("Product #%(id)s", id=r.product_id)) }}</span>
            </td>
            <td class="px-4 py-3 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">{{ r.customer_name or '—' }}</td>
            <td class="px-4 py-3 whitespace-nowrap">
              {% set grade = r.star_rating if r.star_rating else (r.score_average | round(0) | int if r.score_average else none) %}
              {% if grade %}
                <span class="inline-flex items-center gap-0.5">
                  {% for i in range(1, 6) %}
                    <span class="material-symbols-outlined text-sm {% if i <= grade %}text-amber-400{% else %}text-gray-300 dark:text-gray-600{% endif %}" style="font-variation-settings:'FILL' 1">star</span>
                  {% endfor %}
                </span>
              {% else %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">—</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 hidden lg:table-cell max-w-xs">
              {% if r.review_text %}
              <span class="line-clamp-2 leading-relaxed">{{ r.review_text | truncate(180) }}</span>
              {% else %}
              <span class="text-gray-400">—</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:table-cell">
              {{ r.review_date or '—' }}
            </td>
            <td class="px-4 py-3 text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap hidden xl:table-cell">#{{ r.order_id }}</td>
            <td class="px-4 py-3 hidden xl:table-cell">
              <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                {% if r.format == 'new' %}bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400
                {% else %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400{% endif %}">
                {{ r.format }}
              </span>
            </td>
            <td class="px-4 py-3 hidden md:table-cell">
              {% if r.has_seller_reply %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400">{{ _("Replied") }}</span>
              {% else %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">{{ _("No reply") }}</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% else %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-5xl text-gray-300 dark:text-gray-600">star</span>
    <p class="mt-3 text-gray-500 dark:text-gray-400 text-sm">{{ _("No ratings imported yet.") }}</p>
    <p class="mt-1 text-gray-400 dark:text-gray-500 text-xs">{{ _("Use the Import tool to paste reviews from the Addons marketplace.") }}</p>
    <a href="{{ url_for('ratings_import') }}"
       class="mt-4 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-brand-300 dark:border-brand-600 text-brand-600 dark:text-brand-400 text-sm font-medium hover:bg-brand-50 dark:hover:bg-brand-500/10 transition-colors">
      <span class="material-symbols-outlined text-base">upload</span>
      {{ _("Go to Import") }}
    </a>
  </div>
  {% endif %}
</div>

<script>
(function() {
  var sel = document.getElementById('product-filter');
  if (!sel) return;
  sel.addEventListener('change', function() {
    var val = sel.value;
    window.location.href = val ? '/ratings?product_id=' + val : '/ratings';
  });
})();
</script>
{% endif %}
{% endblock %}