{% extends "base.html" %}
{% block title %}Orders{% endblock %}
{% block content %}
<div id="orders-page" class="p-6">
  {# ── Header row ── #}
  <div class="flex items-center justify-between mb-5">
    <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>
    <div class="flex items-center gap-3">
      <span class="text-sm text-gray-500 dark:text-gray-400">{{ total_count }} order{{ 's' if total_count != 1 }}</span>
      <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>

  {# ── 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">
      Showing <strong>{{ total_count }}</strong> order{{ 's' if total_count != 1 }}
    </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>
    <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>
  </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">Customer</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">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">Country</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">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">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 '' }}">
                  {{ o.product_name or ('Product #' ~ o.id_product) }}
                </a>
                {% else %}
                <span class="text-gray-600 dark:text-gray-400 truncate">{{ o.product_name or '--' }}</span>
                {% endif %}
              </div>
            </td>

            {# Customer hash (truncated) #}
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs font-mono whitespace-nowrap">
              {% if o.customer_hash %}
                {{ o.customer_hash[:12] }}...
              {% else %}
                --
              {% endif %}
            </td>

            {# Licence URL (customer website) + online status #}
            <td class="px-4 py-3 text-xs whitespace-nowrap max-w-[180px]">
              {% 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">
              {{ o.iso_code or '--' }}
            </td>

            {# Type badge #}
            <td class="px-4 py-3 whitespace-nowrap">
              {% 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">
              {{ 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">Page {{ page }} of {{ total_pages }}</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?')) return;
  btn.disabled = true;
  btn.querySelector('span:last-child').textContent = 'Syncing...';
  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',
        detail: '<span class="font-semibold">' + data.new_orders + '</span> new &middot; <span class="font-semibold">' + data.updated_orders + '</span> updated &middot; <span class="font-semibold">' + data.customers_updated + '</span> profiles rebuilt &middot; ~' + data.months_covered + ' months',
        timeout: 8000,
      });
      setTimeout(function() { location.reload(); }, 1500);
    } else {
      showGrowl({ type: 'error', title: 'Order sync failed', detail: data.message || 'Unknown error', timeout: 0 });
    }
  })
  .catch(function(err) { showGrowl({ type: 'error', title: 'Sync error', detail: String(err), timeout: 0 }); })
  .finally(function() {
    btn.disabled = false;
    btn.querySelector('span:last-child').textContent = 'Sync All History';
  });
}
</script>
{% endblock %}