{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% block title %}{{ _("Orders") }}{% endblock %}
{% block content %}
<div id="orders-page" class="p-3 sm:p-6">
  {# ── Header row ── #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div class="flex items-center gap-3">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">receipt_long</span>
        {{ _("Orders") }}
      </h2>
      {% if last_order_sync %}
      <span class="text-xs text-gray-400 dark:text-gray-500">
        {{ _("last synced") }} <span data-ts="{{ last_order_sync }}"></span>
        <a href="#" onclick="inlineSync('orders',this);return false" class="text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 ml-0.5">({{ _("sync now") }})</a>
      </span>
      {% endif %}
    </div>
    <div class="flex items-center gap-3">
      <span class="text-sm text-gray-500 dark:text-gray-400">{% trans count=total_count %}{{ count }} order{% pluralize %}{{ count }} orders{% endtrans %}</span>
      {% if has_feature('ratings_export') %}{# ratings_export is the proxy flag for MAX CSV features #}
      <button type="button" id="csv-expand-btn"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-600 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-500/20 transition-colors"
              title="{{ _('Import orders from Addons CSV export') }}">
        <span class="material-symbols-outlined text-sm">upload_file</span>
        {{ _("Import CSV") }}
      </button>
      {% else %}
      <button type="button" onclick='showUpgradeModal("max", {{ _("Orders CSV Import")|tojson }})'
              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-600 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-500/20 transition-colors"
              title="{{ _('Import orders — MAX plan feature') }}">
        <span class="material-symbols-outlined text-sm">upload_file</span>
        {{ _("Import CSV") }}{{ max_badge() }}
      </button>
      {% endif %}
      <button type="button" id="sync-all-btn" onclick="syncAllHistory(this)"
              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
        <span class="material-symbols-outlined text-lg">cloud_sync</span>
        <span>{{ _("Sync All History") }}</span>
      </button>
    </div>
  </div>

  {% include '_csv_import.html' %}

  {# ── Filters ── #}
  <form id="orders-filter-form" method="get" action="{{ url_for('orders_list') }}" class="flex flex-wrap items-end gap-3 mb-5">
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Date From") }}</label>
      <input type="date" name="date_from" id="orders-date-from" value="{{ filters.date_from or '' }}"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Date To") }}</label>
      <input type="date" name="date_to" id="orders-date-to" value="{{ filters.date_to or '' }}"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Product") }}</label>
      <select name="product"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none max-w-[200px]">
        <option value="">{{ _("All") }}</option>
        {% for p in products %}
        <option value="{{ p.id }}" {% if filters.product == p.id|string %}selected{% endif %}>{{ p.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Country") }}</label>
      <select name="country"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">{{ _("All") }}</option>
        {% for c in countries %}
        <option value="{{ c }}" {% if filters.country == c %}selected{% endif %}>{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Type") }}</label>
      <select name="type"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">{{ _("All") }}</option>
        <option value="income" {% if filters.type == 'income' %}selected{% endif %}>{{ _("Income") }}</option>
        <option value="payment" {% if filters.type == 'payment' %}selected{% endif %}>{{ _("Payment") }}</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Search") }}</label>
      <input type="text" name="search" value="{{ filters.search or '' }}" placeholder="{{ _('Product name...') }}"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-40 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    {# Preserve sort #}
    <input type="hidden" name="sort" value="{{ filters.sort or 'date_desc' }}">
    <button type="submit"
            class="inline-flex items-center gap-1 px-4 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      <span class="material-symbols-outlined text-base">filter_list</span>
      {{ _("Filter") }}
    </button>
    {% if filters.date_from or filters.date_to or filters.product or filters.country or filters.type or filters.search %}
    <a href="{{ url_for('orders_list') }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 underline">{{ _("Clear") }}</a>
    {% endif %}
  </form>

  <script>document.addEventListener('DOMContentLoaded', function() { initDatePresets('orders-filter-form', 'orders-date-from', 'orders-date-to'); });</script>

  {# ── Summary strip ── #}
  <div class="flex items-center gap-4 mb-4 px-1">
    <span class="text-sm text-gray-600 dark:text-gray-400">
      {% trans count=total_count %}Showing <strong>{{ count }}</strong> order{% pluralize %}Showing <strong>{{ count }}</strong> orders{% endtrans %}
    </span>
    <span class="text-sm text-gray-400 dark:text-gray-500">|</span>
    <span class="text-sm text-gray-600 dark:text-gray-400">
      {{ _("Revenue:") }} <strong class="text-emerald-600 dark:text-emerald-400">&euro;{{ filtered_revenue }}</strong>
    </span>
    <span class="text-sm text-gray-400 dark:text-gray-500">|</span>
    {% if has_feature('ratings_export') %}
    <a href="/api/orders/export-csv?date_from={{ filters.date_from or '' }}&date_to={{ filters.date_to or '' }}&product={{ filters.product or '' }}&country={{ filters.country or '' }}&type={{ filters.type or '' }}&search={{ filters.search or '' }}"
       class="inline-flex items-center gap-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export Current") }}
    </a>
    <a href="/api/orders/export-csv?export=all"
       class="inline-flex items-center gap-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export All") }}
    </a>
    {% else %}
    <button type="button" onclick='showUpgradeModal("max", {{ _("Orders CSV Export")|tojson }})'
            class="inline-flex items-center gap-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export Current") }}{{ max_badge() }}
    </button>
    <button type="button" onclick='showUpgradeModal("max", {{ _("Orders CSV Export")|tojson }})'
            class="inline-flex items-center gap-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
      <span class="material-symbols-outlined text-base">download</span>
      {{ _("Export All") }}{{ max_badge() }}
    </button>
    {% endif %}
  </div>

  {# ── Sort tabs ── #}
  <div id="orders-sort-tabs" class="flex items-center gap-1 mb-4">
    {% set sort_options = [
      ('date_desc', _('Newest First')),
      ('date_asc', _('Oldest First')),
      ('amount_desc', _('Highest Amount')),
      ('amount_asc', _('Lowest Amount')),
    ] %}
    {% for val, label in sort_options %}
    <a href="{{ url_for('orders_list', date_from=filters.date_from, date_to=filters.date_to, product=filters.product, country=filters.country, type=filters.type, search=filters.search, sort=val, page=1) }}"
       class="px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors
              {% if filters.sort == val or (not filters.sort and val == 'date_desc') %}border-brand-200 bg-brand-50 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300{% else %}border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800{% endif %}">
      {{ label }}
    </a>
    {% endfor %}
  </div>

  {# ── Orders table ── #}
  {% if orders %}
  <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 id="orders-table" class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <tr>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Date") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Order ID") }}</th>
            <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 hidden lg:table-cell">{{ _("Customer") }}</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">{{ _("Licence URL") }}</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">{{ _("Country") }}</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden sm:table-cell">{{ _("Type") }}</th>
            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Amount") }}</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden sm:table-cell">{{ _("Qty") }}</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for o in orders %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            {# Date #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap text-xs">
              {{ o.order_date.strftime('%Y-%m-%d') if o.order_date else '--' }}
            </td>

            {# Order ID #}
            <td class="px-4 py-3 text-gray-700 dark:text-gray-300 whitespace-nowrap font-mono text-xs">
              {{ o.id_order or o.provider_order_id }}
            </td>

            {# Product: icon + name #}
            <td class="px-4 py-3 max-w-[260px]">
              <div class="flex items-center gap-2.5">
                {% if o.product_type == 'business_care' %}
                <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0">
                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">{{ _("BC") }}</span>
                </div>
                {% elif o.pico_url %}
                <img src="{{ o.pico_url }}" alt="" class="w-8 h-8 rounded-lg flex-shrink-0" loading="lazy" onerror="this.style.display='none'">
                {% endif %}
                {% if o.id_product %}
                <a href="{{ url_for('inbox', product=o.id_product) }}" class="text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 truncate" title="{{ o.product_name or '' }}">
                  {% if o.product_name %}{{ o.product_name }}{% else %}{% trans pid=o.id_product %}Product #{{ pid }}{% endtrans %}{% endif %}
                </a>
                {% else %}
                <span class="text-gray-600 dark:text-gray-400 truncate">{{ o.product_name or '--' }}</span>
                {% endif %}
              </div>
            </td>

            {# Customer name / hash #}
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs whitespace-nowrap hidden lg:table-cell">
              {% if o.customer_name %}
                <span class="font-medium text-gray-700 dark:text-gray-300" title="{{ o.customer_name }}">{{ o.customer_name[:24] }}{% if o.customer_name|length > 24 %}…{% endif %}</span>
              {% elif o.customer_hash %}
                <span class="font-mono">{{ o.customer_hash[:12] }}...</span>
              {% else %}
                --
              {% endif %}
            </td>

            {# Licence URL (customer website) + online status #}
            <td class="px-4 py-3 text-xs whitespace-nowrap max-w-[180px] hidden lg:table-cell">
              {% if o.customer_website %}
                {% set ws_href = o.customer_website if o.customer_website.startswith('http') else 'https://' + o.customer_website %}
                <div class="flex items-center gap-1.5">
                  {% set oss = site_status.get(o.id) %}
                  {% if oss and oss.is_online == true %}
                    {% set tip = _('Online') %}
                    {% if oss.error_message %}{% set tip = _('Online') ~ ' (' ~ oss.http_status ~ ' — ' ~ oss.error_message ~ ')' %}
                    {% elif oss.http_status %}{% set tip = _('Online') ~ ' (' ~ oss.http_status ~ ', ' ~ (oss.response_time_ms or '?') ~ 'ms)' %}{% endif %}
                    <span class="inline-block w-2 h-2 rounded-full bg-green-500 flex-shrink-0" title="{{ tip }}"></span>
                  {% elif oss and oss.is_online == false %}
                    {% set tip = _('Offline') %}
                    {% if oss.error_message %}{% set tip = _('Offline') ~ ' — ' ~ oss.error_message %}{% endif %}
                    <span class="inline-block w-2 h-2 rounded-full bg-red-500 flex-shrink-0" title="{{ tip }}"></span>{% endif %}
                  <a href="{{ ws_href }}" target="_blank" rel="noopener"
                     class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 truncate" title="{{ o.customer_website }}">
                    {{ o.customer_website | truncate(28) }}
                  </a>
                </div>
              {% else %}
                <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Country #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap hidden md:table-cell">
              {{ o.iso_code or '--' }}
            </td>

            {# Type badge #}
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              {% if o.transaction_type == 'income' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400">{{ _("income") }}</span>
              {% elif o.transaction_type == 'payment' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400">{{ _("payment") }}</span>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">{{ o.transaction_type or '--' }}</span>
              {% endif %}
            </td>

            {# Amount (green for income, red for payment) #}
            <td class="px-4 py-3 text-right whitespace-nowrap font-medium">
              {% if o.transaction_type == 'income' %}
              <span class="text-emerald-600 dark:text-emerald-400">&euro;{{ o.amount or '0' }}</span>
              {% elif o.transaction_type == 'payment' %}
              <span class="text-red-600 dark:text-red-400">&euro;{{ o.amount or '0' }}</span>
              {% else %}
              <span class="text-gray-600 dark:text-gray-400">&euro;{{ o.amount or '0' }}</span>
              {% endif %}
            </td>

            {# Qty #}
            <td class="px-4 py-3 text-center text-gray-600 dark:text-gray-400 hidden sm:table-cell">
              {{ o.product_quantity or 1 }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# ── Pagination ── #}
  {% if total_pages > 1 %}
  <div id="orders-pagination" class="flex items-center justify-between mt-4">
    <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}Page {{ page }} of {{ total_pages }}{% endtrans %}</p>
    <div class="flex items-center gap-1">
      {% if page > 1 %}
      <a href="{{ url_for('orders_list', date_from=filters.date_from, date_to=filters.date_to, product=filters.product, country=filters.country, type=filters.type, search=filters.search, sort=filters.sort, page=page-1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">chevron_left</span>
      </a>
      {% endif %}

      {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
        <span class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg">{{ p }}</span>
        {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('orders_list', date_from=filters.date_from, date_to=filters.date_to, product=filters.product, country=filters.country, type=filters.type, search=filters.search, sort=filters.sort, page=p) }}"
           class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">{{ p }}</a>
        {% elif p == 2 or p == total_pages - 1 %}
        <span class="px-1 text-gray-400 dark:text-gray-500">&hellip;</span>
        {% endif %}
      {% endfor %}

      {% if page < total_pages %}
      <a href="{{ url_for('orders_list', date_from=filters.date_from, date_to=filters.date_to, product=filters.product, country=filters.country, type=filters.type, search=filters.search, sort=filters.sort, page=page+1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-base">chevron_right</span>
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}

  {% else %}
  {# ── Empty state ── #}
  <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-4xl text-gray-300 dark:text-gray-600 mb-3 block">receipt_long</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _("No orders found.") }}</p>
    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">{{ _("Try adjusting your filters or sync orders first.") }}</p>
  </div>
  {% endif %}
</div>

{# ── Sync All History JS ── #}
<script>
function syncAllHistory(btn) {
  if (!confirm({{ _("This will fetch ALL historical orders (up to 10 years). This may take a few minutes. Continue?") | tojson }})) return;
  btn.disabled = true;
  btn.querySelector('span:last-child').textContent = {{ _("Syncing...") | tojson }};
  var csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
  fetch('/api/orders/sync-all', {
    method: 'POST',
    headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrfToken },
  })
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.success) {
      showGrowl({
        type: 'success', title: {{ _("Order sync complete") | tojson }},
        detail: '<span class="font-semibold">' + data.new_orders + '</span> ' + {{ _("new") | tojson }} + ' &middot; <span class="font-semibold">' + data.updated_orders + '</span> ' + {{ _("updated") | tojson }} + ' &middot; <span class="font-semibold">' + data.customers_updated + '</span> ' + {{ _("profiles rebuilt") | tojson }} + ' &middot; ~' + data.months_covered + ' ' + {{ _("months") | tojson }},
        timeout: 8000,
      });
      setTimeout(function() { location.reload(); }, 1500);
    } else {
      showGrowl({ type: 'error', title: {{ _("Order sync failed") | tojson }}, detail: data.message || {{ _("Unknown error") | tojson }}, timeout: 0 });
    }
  })
  .catch(function(err) { showGrowl({ type: 'error', title: {{ _("Sync error") | tojson }}, detail: String(err), timeout: 0 }); })
  .finally(function() {
    btn.disabled = false;
    btn.querySelector('span:last-child').textContent = {{ _("Sync All History") | tojson }};
  });
}

document.addEventListener('DOMContentLoaded', function() {
  {% include '_csv_import_js.html' %}
});
</script>
{% endblock %}