{% extends "base.html" %}
{% block title %}Customers{% endblock %}
{% block content %}
<div id="customers-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">people</span>
      Customers
    </h2>
    <div class="flex items-center gap-3">
      <span class="text-sm text-gray-500 dark:text-gray-400">{{ total_count }} customer{{ 's' if total_count != 1 }}</span>
      <button id="btn-check-websites" type="button"
              class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 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-sm">lan</span>
        <span>Check Websites</span>
      </button>
      <button id="btn-rescan-modules" type="button"
              class="inline-flex items-center gap-1 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-300 dark:border-amber-600 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-500/20 transition-colors">
        <span class="material-symbols-outlined text-sm">extension</span>
        <span>Rescan Modules</span>
      </button>
      <button id="btn-rebuild-profiles" type="button"
              class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 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-sm">refresh</span>
        <span>Rebuild Profiles</span>
      </button>
    </div>
  </div>

  {# ── CSV Import Banner ── #}
  <div id="csv-import-banner" class="mb-5 rounded-xl p-4 relative border bg-amber-50 dark:bg-amber-500/10 border-amber-200 dark:border-amber-700 transition-colors">
    <button type="button" id="csv-dismiss" class="absolute top-2 right-2 text-amber-400 hover:text-amber-600 dark:hover:text-amber-300 text-lg leading-none">&times;</button>
    <div class="flex items-start gap-3">
      <span id="csv-banner-icon" class="material-symbols-outlined text-amber-500 mt-0.5">upload_file</span>
      <div class="flex-1">
        {# ── Idle state ── #}
        <div id="csv-state-idle">
          <p class="text-sm font-medium text-amber-800 dark:text-amber-400 mb-1">Import Addons CSV for customer names &amp; historical orders</p>
          <p class="text-xs text-amber-600 dark:text-amber-400 mb-3">
            Export the CSV from
            <a href="https://addons.prestashop.com/en/mymodules/sales/statistics" target="_blank" rel="noopener"
               class="underline font-medium">Addons &rarr; Statistics</a>
            (semicolon-delimited). This adds client names, websites, and order history not available via API.
          </p>
          <div class="flex items-center gap-3">
            <input type="file" id="csv-file-input" accept=".csv" class="text-xs text-gray-600 dark:text-gray-400 file:mr-2 file:py-1 file:px-3 file:rounded-lg file:border file:border-amber-300 dark:file:border-amber-600 file:text-xs file:font-medium file:bg-white dark:file:bg-gray-700 file:text-amber-700 dark:file:text-amber-300 hover:file:bg-amber-50 dark:hover:file:bg-amber-500/10">
            <button type="button" id="btn-import-csv" disabled
                    class="inline-flex items-center gap-1 px-4 py-1.5 text-xs font-medium text-white bg-amber-600 rounded-lg hover:bg-amber-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
              <span class="material-symbols-outlined text-sm">cloud_upload</span>
              <span>Import</span>
            </button>
          </div>
          <p id="csv-row-preview" class="hidden text-xs text-amber-600 dark:text-amber-400 mt-2"></p>
        </div>

        {# ── Processing state ── #}
        <div id="csv-state-processing" class="hidden">
          <p id="csv-phase-text" class="text-sm font-medium text-amber-800 dark:text-amber-400 mb-2">Importing CSV...</p>
          <div class="w-full bg-amber-100 dark:bg-amber-500/10 rounded-full h-2.5 mb-2">
            <div id="csv-progress-bar" class="bg-amber-500 h-2.5 rounded-full transition-all duration-300" style="width:0%"></div>
          </div>
          <div class="flex items-center justify-between">
            <p id="csv-progress-text" class="text-xs text-amber-600 dark:text-amber-400">Preparing...</p>
            <p id="csv-progress-pct" class="text-xs font-medium text-amber-700 dark:text-amber-400">0%</p>
          </div>
          <div id="csv-running-counts" class="flex items-center gap-4 mt-2 text-xs text-amber-700 dark:text-amber-400">
            <span>New: <strong id="csv-cnt-new">0</strong></span>
            <span>Updated: <strong id="csv-cnt-updated">0</strong></span>
            <span>Skipped: <strong id="csv-cnt-skipped">0</strong></span>
          </div>
        </div>

        {# ── Complete state ── #}
        <div id="csv-state-complete" class="hidden">
          <p class="text-sm font-medium text-green-800 dark:text-green-400 mb-3">CSV import complete</p>
          <div class="flex items-center gap-3 flex-wrap">
            <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
              <p id="csv-final-new" class="text-lg font-bold text-green-700 dark:text-green-400">0</p>
              <p class="text-xs text-green-600 dark:text-green-400">new</p>
            </div>
            <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
              <p id="csv-final-updated" class="text-lg font-bold text-blue-700 dark:text-blue-400">0</p>
              <p class="text-xs text-blue-600 dark:text-blue-400">updated</p>
            </div>
            <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
              <p id="csv-final-skipped" class="text-lg font-bold text-gray-500 dark:text-gray-400">0</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">skipped</p>
            </div>
            <div class="bg-white dark:bg-gray-800 border border-green-200 dark:border-green-700 rounded-lg px-3 py-2 text-center min-w-[80px]">
              <p id="csv-final-profiles" class="text-lg font-bold text-purple-700 dark:text-purple-400">0</p>
              <p class="text-xs text-purple-600 dark:text-purple-400">profiles</p>
            </div>
          </div>
          <button type="button" id="csv-import-another" class="mt-3 text-xs text-green-700 dark:text-green-400 underline hover:text-green-900 dark:hover:text-green-100">Import another file</button>
        </div>

        {# ── Error state ── #}
        <div id="csv-state-error" class="hidden">
          <p class="text-sm font-medium text-red-800 dark:text-red-400 mb-1">CSV import failed</p>
          <p id="csv-error-detail" class="text-xs text-red-600 dark:text-red-400 mb-3"></p>
          <button type="button" id="csv-retry" class="text-xs text-red-700 dark:text-red-400 underline hover:text-red-900 dark:hover:text-red-100">Try again</button>
        </div>
      </div>
    </div>
  </div>

  {# ── Filters ── #}
  <form id="customers-filter-form" method="get" action="{{ url_for('customers_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">Search</label>
      <input type="text" name="search" value="{{ filters.search or '' }}" placeholder="Name or website..."
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-48 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">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="ctype"
              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="buyers" {% if filters.ctype == 'buyers' %}selected{% endif %}>With orders</option>
        <option value="thread_only" {% if filters.ctype == 'thread_only' %}selected{% endif %}>Thread only</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Business Care</label>
      <select name="bc"
              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="yes" {% if filters.bc == 'yes' %}selected{% endif %}>Yes</option>
        <option value="no" {% if filters.bc == 'no' %}selected{% endif %}>No</option>
      </select>
    </div>
    {# Preserve sort + pill values as hidden inputs (updated by JS) #}
    <input type="hidden" name="online" id="hid-online" value="{{ filters.online or '' }}">
    <input type="hidden" name="module" id="hid-module" value="{{ filters.module or '' }}">
    <input type="hidden" name="sort" value="{{ filters.sort or 'revenue_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.search or filters.country or filters.bc or filters.ctype or filters.online or filters.module %}
    <a href="{{ url_for('customers_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>

  {# ── Online / Module pill filters ── #}
  <div class="flex flex-wrap items-center gap-x-6 gap-y-2 mb-4">
    <div class="flex items-center gap-1">
      <span class="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Online:</span>
      {% set online_opts = [('', 'All'), ('yes', 'Online'), ('no', 'Offline'), ('unchecked', 'Unchecked')] %}
      {% for val, label in online_opts %}
      <button type="button" data-pill="online" data-value="{{ val }}"
              class="pill-btn px-2.5 py-1 text-xs font-medium rounded-lg border transition-colors
                     {% if (filters.online or '') == val %}border-brand-200 dark:border-brand-600 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-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800{% endif %}">
        {%- if val == 'yes' %}<span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mr-1"></span>
        {%- elif val == 'no' %}<span class="inline-block w-1.5 h-1.5 rounded-full bg-red-500 mr-1"></span>{% endif -%}
        {{ label }}
      </button>
      {% endfor %}
    </div>
    <div class="flex items-center gap-1">
      <span class="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Module:</span>
      {% set module_opts = [('', 'All'), ('yes', 'Found'), ('no', 'Not found'), ('unchecked', 'Unchecked')] %}
      {% for val, label in module_opts %}
      <button type="button" data-pill="module" data-value="{{ val }}"
              class="pill-btn px-2.5 py-1 text-xs font-medium rounded-lg border transition-colors
                     {% if (filters.module or '') == val %}border-brand-200 dark:border-brand-600 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-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800{% endif %}">
        {{ label }}
      </button>
      {% endfor %}
    </div>
  </div>

  {# ── Summary strip (live-updated during checks) ── #}
  <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> customer{{ 's' if total_count != 1 }}
    </span>
    {% if check_summary %}
    <span class="text-xs text-gray-400 dark:text-gray-500">|</span>
    <span id="wc-summary-strip" class="text-xs text-gray-500 dark:text-gray-400">
      <span class="inline-flex items-center gap-0.5"><span class="material-symbols-outlined text-xs text-gray-400 dark:text-gray-500">task_alt</span> <strong id="wc-sum-checked">{{ check_summary.checked | default(0) }}</strong> checked</span>
      <span class="mx-1 text-gray-300 dark:text-gray-600">&middot;</span>
      <span class="inline-flex items-center gap-0.5"><span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500"></span> <strong id="wc-sum-online">{{ check_summary.online | default(0) }}</strong> online</span>
      <span class="mx-1 text-gray-300 dark:text-gray-600">&middot;</span>
      <span class="inline-flex items-center gap-0.5"><span class="inline-block w-1.5 h-1.5 rounded-full bg-red-500"></span> <strong id="wc-sum-offline">{{ check_summary.offline | default(0) }}</strong> offline</span>
      <span class="mx-1 text-gray-300 dark:text-gray-600">&middot;</span>
      <span class="inline-flex items-center gap-0.5"><span class="material-symbols-outlined text-xs text-amber-500">extension</span> <strong id="wc-sum-module">{{ check_summary.module_found | default(0) }}</strong> modules</span>
      <span class="mx-1 text-gray-300 dark:text-gray-600">&middot;</span>
      <span class="inline-flex items-center gap-0.5"><span class="material-symbols-outlined text-xs text-gray-400 dark:text-gray-500">schedule</span> <strong id="wc-sum-queued">{{ check_summary.unchecked | default(0) }}</strong> queued</span>
    </span>
    {% endif %}
  </div>

  {# ── Inline website-check progress banner (hidden until check runs) ── #}
  <div id="wc-progress-banner" class="hidden mb-4 rounded-xl border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-500/10 overflow-hidden">
    <div class="px-4 py-3">
      {# Top row: title + live rate #}
      <div class="flex items-center justify-between mb-2">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-blue-600 dark:text-blue-400 text-lg animate-spin-slow">progress_activity</span>
          <span id="wc-banner-title" class="text-sm font-semibold text-blue-900 dark:text-blue-200">Checking websites...</span>
        </div>
        <span id="wc-banner-pct" class="text-sm font-bold text-blue-700 dark:text-blue-400 tabular-nums">0%</span>
      </div>
      {# Progress bar #}
      <div class="w-full bg-blue-100 dark:bg-blue-500/10 rounded-full h-2 mb-3">
        <div id="wc-banner-bar" class="h-2 rounded-full bg-blue-500 transition-all duration-500 ease-out" style="width: 0%"></div>
      </div>
      {# Stats cards #}
      <div class="flex flex-wrap items-center gap-3">
        <div class="flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-gray-800 rounded-lg border border-blue-100 dark:border-blue-700 text-xs">
          <span class="material-symbols-outlined text-sm text-blue-500">dns</span>
          <span class="text-gray-500 dark:text-gray-400">Checked</span>
          <strong id="wc-p-checked" class="text-gray-800 dark:text-gray-200 tabular-nums">0</strong>
          <span class="text-gray-400 dark:text-gray-500">/</span>
          <span id="wc-p-total" class="text-gray-500 dark:text-gray-400 tabular-nums">0</span>
        </div>
        <div class="flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-gray-800 rounded-lg border border-green-100 dark:border-green-700 text-xs">
          <span class="inline-block w-2 h-2 rounded-full bg-green-500"></span>
          <span class="text-gray-500 dark:text-gray-400">Online</span>
          <strong id="wc-p-online" class="text-green-700 dark:text-green-400 tabular-nums">0</strong>
        </div>
        <div class="flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-gray-800 rounded-lg border border-red-100 dark:border-red-700 text-xs">
          <span class="inline-block w-2 h-2 rounded-full bg-red-500"></span>
          <span class="text-gray-500 dark:text-gray-400">Offline</span>
          <strong id="wc-p-offline" class="text-red-700 dark:text-red-400 tabular-nums">0</strong>
        </div>
        <div class="flex items-center gap-1.5 px-2.5 py-1 bg-white dark:bg-gray-800 rounded-lg border border-amber-100 dark:border-amber-700 text-xs">
          <span class="material-symbols-outlined text-sm text-amber-500">extension</span>
          <span class="text-gray-500 dark:text-gray-400">Modules</span>
          <strong id="wc-p-modules" class="text-amber-700 dark:text-amber-400 tabular-nums">0</strong>
        </div>
      </div>
    </div>
  </div>
  <style>
    @keyframes spin-slow { to { transform: rotate(360deg); } }
    .animate-spin-slow { animation: spin-slow 1.5s linear infinite; }
    .tabular-nums { font-variant-numeric: tabular-nums; }
  </style>

  {# ── Sort tabs ── #}
  <div id="customers-sort-tabs" class="flex items-center gap-1 mb-4">
    {% set sort_options = [
      ('activity_desc', 'Recent Activity'),
      ('revenue_desc', 'Top Revenue'),
      ('orders_desc', 'Most Orders'),
      ('tickets_desc', 'Most Tickets'),
      ('name_asc', 'Name A-Z'),
    ] %}
    {% for val, label in sort_options %}
    <a href="{{ url_for('customers_list', search=filters.search, country=filters.country, ctype=filters.ctype, bc=filters.bc, online=filters.online, module=filters.module, 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 == 'activity_desc') %}border-brand-200 dark:border-brand-600 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-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800{% endif %}">
      {{ label }}
    </a>
    {% endfor %}
  </div>

  {# ── Customers table ── #}
  {% if customers %}
  <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="customers-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>
            {% set base_url = url_for('customers_list', search=filters.search, country=filters.country, ctype=filters.ctype, bc=filters.bc, online=filters.online, module=filters.module, page=1) %}
            {% macro sort_th(label, key, align='left') %}
              {% set cur = filters.sort or 'activity_desc' %}
              {% set is_active = cur.startswith(key) %}
              {% set next_sort = key + '_asc' if cur == key + '_desc' else key + '_desc' %}
              {% set arrow = '' %}
              {% if cur == key + '_desc' %}{% set arrow = ' &#9660;' %}{% elif cur == key + '_asc' %}{% set arrow = ' &#9650;' %}{% endif %}
              <th class="text-{{ align }} px-4 py-3 text-xs font-semibold uppercase tracking-wide">
                <a href="{{ base_url }}&sort={{ next_sort }}"
                   class="inline-flex items-center gap-0.5 {{ 'text-brand-700 dark:text-brand-300' if is_active else 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300' }}">
                  {{ label }}{{ arrow | safe }}
                </a>
              </th>
            {% endmacro %}
            {{ sort_th('Customer', 'name') }}
            {{ sort_th('Website', 'website') }}
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Online</th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Module</th>
            {{ sort_th('Country', 'country') }}
            {{ sort_th('Revenue', 'revenue', 'right') }}
            {{ sort_th('Orders', 'orders', 'center') }}
            {{ sort_th('Products', 'products', 'center') }}
            {{ sort_th('Tickets', 'tickets', 'center') }}
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">BC</th>
            {{ sort_th('Last Activity', 'activity') }}
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for c in customers %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            {# Customer name #}
            <td class="px-4 py-3">
              <a href="{{ url_for('customer_detail', customer_hash=c.customer_hash) }}"
                 class="text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 font-medium">
                {{ c.display_name }}
              </a>
            </td>

            {# Website URL #}
            <td class="px-4 py-3 text-xs max-w-[200px]">
              {% if c.website %}
                {% set ws_href = c.website if c.website.startswith('http') else 'https://' + c.website %}
                <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 block" title="{{ c.website }}">
                  {{ c.website | truncate(30) }}
                </a>
              {% else %}
                <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Online status #}
            <td class="px-4 py-3 text-center whitespace-nowrap">
              {% set ss = site_status.get(c.customer_hash) %}
              {% if ss and ss.is_online == true %}
                {% set tip = 'Online' %}
                {% if ss.error_message %}{% set tip = 'Online (' ~ ss.http_status ~ ' — ' ~ ss.error_message ~ ')' %}
                {% elif ss.http_status %}{% set tip = 'Online (' ~ ss.http_status ~ ', ' ~ (ss.response_time_ms or '?') ~ 'ms)' %}{% endif %}
                <span class="inline-block w-2.5 h-2.5 rounded-full bg-green-500" title="{{ tip }}"></span>
              {% elif ss and ss.is_online == false %}
                {% set tip = 'Offline' %}
                {% if ss.error_message %}{% set tip = 'Offline — ' ~ ss.error_message %}{% endif %}
                <span class="inline-block w-2.5 h-2.5 rounded-full bg-red-500" title="{{ tip }}"></span>
              {% else %}<span class="text-gray-300 dark:text-gray-600">--</span>{% endif %}
            </td>

            {# Module found #}
            <td class="px-4 py-3 text-center">
              {% set ss = site_status.get(c.customer_hash) %}
              {% if ss and ss.modules_found_slugs %}
                <div class="flex flex-wrap justify-center gap-1">
                  {% for slug in ss.modules_found_slugs %}
                    {% if slug in ss.get('purchased_slugs', []) %}
                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400" title="Purchased">{{ slug }}</span>
                    {% else %}
                  <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-600 dark:text-orange-400" title="Not purchased">{{ slug }}</span>
                    {% endif %}
                  {% endfor %}
                </div>
              {% elif ss and ss.module_found == false %}<span class="text-amber-500 text-xs font-medium">No</span>
              {% else %}<span class="text-gray-300 dark:text-gray-600">--</span>{% endif %}
            </td>

            {# Country #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap">
              {{ c.country_code or '--' }}
            </td>

            {# Revenue #}
            <td class="px-4 py-3 text-right whitespace-nowrap font-medium text-emerald-600 dark:text-emerald-400">
              &euro;{{ c.total_revenue }}
            </td>

            {# Orders #}
            <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">
              {{ c.total_orders }}
            </td>

            {# Products #}
            <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">
              {{ c.total_products }}
            </td>

            {# Tickets #}
            <td class="px-4 py-3 text-center text-gray-700 dark:text-gray-300">
              {{ c.total_threads }}
            </td>

            {# BC badge #}
            <td class="px-4 py-3 text-center whitespace-nowrap">
              {% if c.has_bc %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-indigo-100 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400">BC</span>
              {% else %}
              <span class="text-gray-300 dark:text-gray-600">--</span>
              {% endif %}
            </td>

            {# Last Activity #}
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
              {{ c.last_activity.strftime('%Y-%m-%d') if c.last_activity else '--' }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {# ── Pagination ── #}
  {% if total_pages > 1 %}
  <div id="customers-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('customers_list', search=filters.search, country=filters.country, ctype=filters.ctype, bc=filters.bc, online=filters.online, module=filters.module, 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-700 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('customers_list', search=filters.search, country=filters.country, ctype=filters.ctype, bc=filters.bc, online=filters.online, module=filters.module, 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-700 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('customers_list', search=filters.search, country=filters.country, ctype=filters.ctype, bc=filters.bc, online=filters.online, module=filters.module, 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-700 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">people</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">No customers 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>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var csrf = getCsrf();

  // ── Pill filter buttons (Online / Module) ──
  var filterForm = document.getElementById('customers-filter-form');
  document.querySelectorAll('.pill-btn[data-pill]').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var group = btn.dataset.pill;   // 'online' or 'module'
      var value = btn.dataset.value;  // '' | 'yes' | 'no' | 'unchecked'
      document.getElementById('hid-' + group).value = value;
      filterForm.submit();
    });
  });
  var fmt = function(n) { return n.toLocaleString(); };

  // ── Check Websites (auto-loop with stop button) ──
  var btnCheck = document.getElementById('btn-check-websites');
  var wcPollTimer = null;
  var wcIsRunning = false;
  function stopWcPoll() { if (wcPollTimer) { clearInterval(wcPollTimer); wcPollTimer = null; } }
  function setWcButton(mode) {
    if (!btnCheck) return;
    var icon = btnCheck.querySelector('span.material-symbols-outlined');
    var label = btnCheck.querySelector('span:last-child');
    if (mode === 'running') {
      wcIsRunning = true;
      btnCheck.disabled = false;
      btnCheck.classList.remove('text-gray-700', 'bg-white', 'border-gray-300', 'hover:bg-gray-50',
                                'dark:text-gray-300', 'dark:bg-gray-700', 'dark:border-gray-600', 'dark:hover:bg-gray-800');
      btnCheck.classList.add('text-red-700', 'bg-red-50', 'border-red-300', 'hover:bg-red-100',
                             'dark:text-red-400', 'dark:bg-red-500/10', 'dark:border-red-600', 'dark:hover:bg-red-500/20');
      icon.textContent = 'stop_circle';
      label.textContent = 'Stop Checking';
    } else {
      wcIsRunning = false;
      btnCheck.disabled = false;
      btnCheck.classList.remove('text-red-700', 'bg-red-50', 'border-red-300', 'hover:bg-red-100',
                                'dark:text-red-400', 'dark:bg-red-500/10', 'dark:border-red-600', 'dark:hover:bg-red-500/20');
      btnCheck.classList.add('text-gray-700', 'bg-white', 'border-gray-300', 'hover:bg-gray-50',
                             'dark:text-gray-300', 'dark:bg-gray-700', 'dark:border-gray-600', 'dark:hover:bg-gray-800');
      icon.textContent = 'lan';
      label.textContent = 'Check Websites';
    }
  }
  // ── Banner DOM refs ──
  var wcBanner     = document.getElementById('wc-progress-banner');
  var wcBannerTitle= document.getElementById('wc-banner-title');
  var wcBannerPct  = document.getElementById('wc-banner-pct');
  var wcBannerBar  = document.getElementById('wc-banner-bar');
  var wcPChecked   = document.getElementById('wc-p-checked');
  var wcPTotal     = document.getElementById('wc-p-total');
  var wcPOnline    = document.getElementById('wc-p-online');
  var wcPOffline   = document.getElementById('wc-p-offline');
  var wcPModules   = document.getElementById('wc-p-modules');
  // Summary strip refs
  var wcSumChecked = document.getElementById('wc-sum-checked');
  var wcSumOnline  = document.getElementById('wc-sum-online');
  var wcSumOffline = document.getElementById('wc-sum-offline');
  var wcSumModule  = document.getElementById('wc-sum-module');
  var wcSumQueued  = document.getElementById('wc-sum-queued');
  // Store server-side baseline so we can add live delta
  var wcBaseline = {
    checked: parseInt(wcSumChecked ? wcSumChecked.textContent : '0', 10),
    online:  parseInt(wcSumOnline  ? wcSumOnline.textContent  : '0', 10),
    offline: parseInt(wcSumOffline ? wcSumOffline.textContent  : '0', 10),
    module:  parseInt(wcSumModule  ? wcSumModule.textContent   : '0', 10),
    queued:  parseInt(wcSumQueued  ? wcSumQueued.textContent   : '0', 10),
  };

  function showBanner(visible) {
    if (wcBanner) wcBanner.classList.toggle('hidden', !visible);
  }
  function updateBanner(p) {
    var pct = p.total > 0 ? Math.round(p.checked / p.total * 100) : 0;
    var label = p.mode === 'module_rescan' ? 'Scanning modules... ' : 'Checking websites... ';
    if (wcBannerTitle) wcBannerTitle.textContent = label + p.checked + ' of ' + p.total;
    if (wcBannerPct)   wcBannerPct.textContent   = pct + '%';
    if (wcBannerBar)   wcBannerBar.style.width    = pct + '%';
    if (wcPChecked)    wcPChecked.textContent     = p.checked;
    if (wcPTotal)      wcPTotal.textContent       = p.total;
    if (wcPOnline)     wcPOnline.textContent      = p.online || 0;
    if (wcPOffline)    wcPOffline.textContent     = p.offline || 0;
    if (wcPModules)    wcPModules.textContent     = p.module_found || 0;
  }
  function updateSummaryStrip(p) {
    // During a check, the summary strip shows baseline + live progress combined
    if (wcSumChecked) wcSumChecked.textContent = wcBaseline.checked + p.checked;
    if (wcSumOnline)  wcSumOnline.textContent  = wcBaseline.online  + p.online;
    if (wcSumOffline) wcSumOffline.textContent = wcBaseline.offline + p.offline;
    if (wcSumModule)  wcSumModule.textContent  = wcBaseline.module  + (p.module_found || 0);
    if (wcSumQueued)  wcSumQueued.textContent  = Math.max(0, wcBaseline.queued - p.checked);
  }
  function setBannerComplete(p) {
    // Switch banner to green "complete" style
    if (!wcBanner) return;
    wcBanner.classList.remove('border-blue-200', 'bg-blue-50', 'dark:border-blue-700', 'dark:bg-blue-500/10');
    wcBanner.classList.add('border-green-200', 'bg-green-50', 'dark:border-green-700', 'dark:bg-green-500/10');
    if (wcBannerBar) {
      wcBannerBar.classList.remove('bg-blue-500');
      wcBannerBar.classList.add('bg-green-500');
      wcBannerBar.style.width = '100%';
    }
    if (wcBannerPct) { wcBannerPct.textContent = 'Done'; wcBannerPct.classList.remove('text-blue-700', 'dark:text-blue-400'); wcBannerPct.classList.add('text-green-700', 'dark:text-green-400'); }
    var spinner = wcBanner.querySelector('.animate-spin-slow');
    if (spinner) { spinner.classList.remove('animate-spin-slow', 'text-blue-600', 'dark:text-blue-400'); spinner.classList.add('text-green-600', 'dark:text-green-400'); spinner.textContent = 'check_circle'; }
    if (wcBannerTitle) { wcBannerTitle.textContent = 'Website checks complete'; wcBannerTitle.classList.remove('text-blue-900', 'dark:text-blue-200'); wcBannerTitle.classList.add('text-green-900', 'dark:text-green-200'); }
  }
  function setBannerStopped(p) {
    if (!wcBanner) return;
    wcBanner.classList.remove('border-blue-200', 'bg-blue-50', 'dark:border-blue-700', 'dark:bg-blue-500/10');
    wcBanner.classList.add('border-amber-200', 'bg-amber-50', 'dark:border-amber-700', 'dark:bg-amber-500/10');
    if (wcBannerBar) { wcBannerBar.classList.remove('bg-blue-500'); wcBannerBar.classList.add('bg-amber-500'); }
    if (wcBannerPct) { wcBannerPct.classList.remove('text-blue-700', 'dark:text-blue-400'); wcBannerPct.classList.add('text-amber-700', 'dark:text-amber-400'); }
    var spinner = wcBanner.querySelector('.animate-spin-slow');
    if (spinner) { spinner.classList.remove('animate-spin-slow', 'text-blue-600', 'dark:text-blue-400'); spinner.classList.add('text-amber-600', 'dark:text-amber-400'); spinner.textContent = 'pause_circle'; }
    if (wcBannerTitle) { wcBannerTitle.textContent = 'Checks stopped — ' + p.checked + ' of ' + p.total + ' done'; wcBannerTitle.classList.remove('text-blue-900', 'dark:text-blue-200'); wcBannerTitle.classList.add('text-amber-900', 'dark:text-amber-200'); }
  }
  function resetBannerStyle() {
    // Reset to blue "in progress" colors for next run
    if (!wcBanner) return;
    wcBanner.classList.remove('border-green-200', 'bg-green-50', 'border-amber-200', 'bg-amber-50',
                              'dark:border-green-700', 'dark:bg-green-500/10', 'dark:border-amber-700', 'dark:bg-amber-500/10');
    wcBanner.classList.add('border-blue-200', 'bg-blue-50', 'dark:border-blue-700', 'dark:bg-blue-500/10');
    if (wcBannerBar) { wcBannerBar.classList.remove('bg-green-500', 'bg-amber-500'); wcBannerBar.classList.add('bg-blue-500'); wcBannerBar.style.width = '0%'; }
    if (wcBannerPct) { wcBannerPct.textContent = '0%'; wcBannerPct.classList.remove('text-green-700', 'text-amber-700', 'dark:text-green-400', 'dark:text-amber-400'); wcBannerPct.classList.add('text-blue-700', 'dark:text-blue-400'); }
    var spinner = wcBanner.querySelector('.material-symbols-outlined');
    if (spinner) { spinner.className = 'material-symbols-outlined text-blue-600 dark:text-blue-400 text-lg animate-spin-slow'; spinner.textContent = 'progress_activity'; }
    if (wcBannerTitle) { wcBannerTitle.className = 'text-sm font-semibold text-blue-900 dark:text-blue-200'; wcBannerTitle.textContent = 'Checking websites...'; }
  }

  var wcSeenRunning = false;  // track if we ever saw running=true
  function startWcPoll() {
    stopWcPoll();
    setWcButton('running');
    resetBannerStyle();
    showBanner(true);
    wcSeenRunning = false;
    wcPollTimer = setInterval(function() {
      fetch('/api/website-checks/progress')
        .then(function(r) { return r.json(); })
        .then(function(p) {
          if (p.running) wcSeenRunning = true;
          if (p.total > 0) {
            updateBanner(p);
            updateSummaryStrip(p);
          }
          // Detect completion: not running AND (we saw it running before, or checked>0)
          if (!p.running && (wcSeenRunning || p.checked > 0)) {
            stopWcPoll();
            updateBanner(p);
            updateSummaryStrip(p);
            if (p.stop) {
              setBannerStopped(p);
              showGrowl({ id: 'wc-done', type: 'warning', title: 'Website checks stopped', detail: p.checked + ' of ' + p.total + ' checked before stopping.', timeout: 6000 });
            } else {
              setBannerComplete(p);
              var detail = p.checked > 0
                ? (p.checked + ' checked — ' + p.online + ' online, ' + p.offline + ' offline' + (p.module_found ? ', ' + p.module_found + ' module' + (p.module_found > 1 ? 's' : '') + ' found' : ''))
                : 'No websites were due for checking.';
              showGrowl({ id: 'wc-done', type: 'success', title: 'Website checks complete', detail: detail, timeout: 6000 });
            }
            setWcButton('idle');
            setTimeout(function() { showBanner(false); location.reload(); }, 5000);
          }
        })
        .catch(function() {});
    }, 2000);
  }
  function stopWcRun() {
    fetch('/api/website-checks/stop', {
      method: 'POST',
      headers: {'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrf}
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (data.success) {
        showGrowl({ id: 'wc-stopping', type: 'warning', title: 'Stopping...', detail: 'Will stop after current URL finishes.', timeout: 4000 });
        btnCheck.disabled = true;
      }
    });
  }
  if (btnCheck) {
    btnCheck.addEventListener('click', function() {
      if (wcIsRunning) { stopWcRun(); return; }
      btnCheck.disabled = true;
      btnCheck.querySelector('span:last-child').textContent = 'Starting...';
      fetch('/api/website-checks/run', {
        method: 'POST',
        headers: {'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrf}
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          showGrowl({
            id: 'wc-started', type: 'info',
            title: 'Website checks started',
            detail: 'Checking all due websites in batches of 50.',
            timeout: 4000,
          });
          startWcPoll();
        } else {
          showGrowl({ type: 'error', title: 'Check failed', detail: data.message || 'Unknown error', timeout: 0 });
          setWcButton('idle');
        }
      })
      .catch(function(err) {
        showGrowl({ type: 'error', title: 'Error', detail: String(err), timeout: 0 });
        setWcButton('idle');
      });
    });
  }

  // ── Rescan Modules (fast module-only scan) ──
  var btnRescan = document.getElementById('btn-rescan-modules');
  if (btnRescan) {
    btnRescan.addEventListener('click', function() {
      if (wcIsRunning) return;
      btnRescan.disabled = true;
      btnRescan.querySelector('span:last-child').textContent = 'Starting...';
      fetch('/api/website-checks/rescan-modules', {
        method: 'POST',
        headers: {'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrf}
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          showGrowl({ id: 'wc-started', type: 'info', title: 'Module rescan started', detail: 'Scanning online sites for installed modules (fast mode).', timeout: 4000 });
          startWcPoll();
        } else {
          showGrowl({ type: 'error', title: 'Rescan failed', detail: data.message || 'Unknown error', timeout: 0 });
        }
        btnRescan.disabled = false;
        btnRescan.querySelector('span:last-child').textContent = 'Rescan Modules';
      })
      .catch(function(err) {
        showGrowl({ type: 'error', title: 'Error', detail: String(err), timeout: 0 });
        btnRescan.disabled = false;
        btnRescan.querySelector('span:last-child').textContent = 'Rescan Modules';
      });
    });
  }

  // Auto-resume polling if a check is already running (e.g. user navigated away)
  fetch('/api/website-checks/progress')
    .then(function(r) { return r.json(); })
    .then(function(p) { if (p.running) startWcPoll(); });

  // ── Rebuild Profiles ──
  var btnRebuild = document.getElementById('btn-rebuild-profiles');
  if (btnRebuild) {
    btnRebuild.addEventListener('click', function() {
      btnRebuild.disabled = true;
      btnRebuild.querySelector('span:last-child').textContent = 'Rebuilding…';
      fetch('/api/customers/rebuild', {
        method: 'POST',
        headers: {'X-Requested-With': 'XMLHttpRequest', 'X-CSRFToken': csrf}
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          showGrowl({
            type: 'success', title: 'Profiles rebuilt',
            detail: '<span class="font-semibold">' + fmt(data.customers_updated) + '</span> customer profiles updated',
            timeout: 5000,
          });
          setTimeout(function() { location.reload(); }, 1500);
        } else {
          showGrowl({ type: 'error', title: 'Rebuild failed', detail: data.message || 'Unknown error', timeout: 0 });
        }
      })
      .catch(function(err) { showGrowl({ type: 'error', title: 'Rebuild error', detail: String(err), timeout: 0 }); })
      .finally(function() {
        btnRebuild.disabled = false;
        btnRebuild.querySelector('span:last-child').textContent = 'Rebuild Profiles';
      });
    });
  }

  // ── CSV Import ──
  var banner = document.getElementById('csv-import-banner');
  var bannerIcon = document.getElementById('csv-banner-icon');
  var dismissBtn = document.getElementById('csv-dismiss');
  var stateIdle = document.getElementById('csv-state-idle');
  var stateProcessing = document.getElementById('csv-state-processing');
  var stateComplete = document.getElementById('csv-state-complete');
  var stateError = document.getElementById('csv-state-error');
  var fileInput = document.getElementById('csv-file-input');
  var btnImport = document.getElementById('btn-import-csv');
  var rowPreview = document.getElementById('csv-row-preview');
  var progressBar = document.getElementById('csv-progress-bar');
  var progressText = document.getElementById('csv-progress-text');
  var progressPct = document.getElementById('csv-progress-pct');
  var phaseText = document.getElementById('csv-phase-text');
  var cntNew = document.getElementById('csv-cnt-new');
  var cntUpdated = document.getElementById('csv-cnt-updated');
  var cntSkipped = document.getElementById('csv-cnt-skipped');

  var totalRows = 0;
  var pollInterval = null;
  var lastPhase = '';

  function setBannerState(state) {
    stateIdle.classList.toggle('hidden', state !== 'idle');
    stateProcessing.classList.toggle('hidden', state !== 'processing');
    stateComplete.classList.toggle('hidden', state !== 'complete');
    stateError.classList.toggle('hidden', state !== 'error');
    dismissBtn.classList.toggle('hidden', state === 'processing');

    // Banner colors
    banner.classList.remove('bg-amber-50', 'border-amber-200', 'bg-green-50', 'border-green-200', 'bg-red-50', 'border-red-200',
                            'dark:bg-amber-500/10', 'dark:border-amber-700', 'dark:bg-green-500/10', 'dark:border-green-700', 'dark:bg-red-500/10', 'dark:border-red-700');
    bannerIcon.classList.remove('text-amber-500', 'text-green-500', 'text-red-500');
    if (state === 'complete') {
      banner.classList.add('bg-green-50', 'border-green-200', 'dark:bg-green-500/10', 'dark:border-green-700');
      bannerIcon.classList.add('text-green-500');
      bannerIcon.textContent = 'check_circle';
    } else if (state === 'error') {
      banner.classList.add('bg-red-50', 'border-red-200', 'dark:bg-red-500/10', 'dark:border-red-700');
      bannerIcon.classList.add('text-red-500');
      bannerIcon.textContent = 'error';
    } else {
      banner.classList.add('bg-amber-50', 'border-amber-200', 'dark:bg-amber-500/10', 'dark:border-amber-700');
      bannerIcon.classList.add('text-amber-500');
      bannerIcon.textContent = 'upload_file';
    }
  }

  function resetToIdle() {
    setBannerState('idle');
    fileInput.value = '';
    btnImport.disabled = true;
    btnImport.querySelector('span:last-child').textContent = 'Import';
    rowPreview.classList.add('hidden');
    totalRows = 0;
  }

  if (dismissBtn && banner) {
    dismissBtn.addEventListener('click', function() { banner.classList.add('hidden'); });
  }

  // Count rows when file selected
  if (fileInput) {
    fileInput.addEventListener('change', function() {
      if (!fileInput.files.length) { btnImport.disabled = true; return; }
      var reader = new FileReader();
      reader.onload = function(e) {
        var lines = e.target.result.split('\n').filter(function(l) { return l.trim().length > 0; });
        totalRows = Math.max(0, lines.length - 1); // minus header
        btnImport.disabled = false;
        btnImport.querySelector('span:last-child').textContent = 'Import ' + fmt(totalRows) + ' rows';
        rowPreview.textContent = fileInput.files[0].name + ' — ' + fmt(totalRows) + ' rows detected';
        rowPreview.classList.remove('hidden');
      };
      reader.readAsText(fileInput.files[0]);
    });
  }

  // Import button click
  if (btnImport) {
    btnImport.addEventListener('click', function() {
      if (!fileInput.files.length) return;

      var taskId = 'csv_' + Date.now() + '_' + Math.random().toString(36).substr(2, 6);
      setBannerState('processing');
      progressBar.style.width = '2%';
      progressText.textContent = 'Uploading file...';
      progressPct.textContent = '0%';
      cntNew.textContent = '0';
      cntUpdated.textContent = '0';
      cntSkipped.textContent = '0';

      var formData = new FormData();
      formData.append('file', fileInput.files[0]);
      formData.append('task_id', taskId);
      formData.append('total_rows', totalRows);

      // Start polling immediately
      lastPhase = '';
      pollInterval = setInterval(function() {
        fetch('/api/orders/import-csv/progress/' + taskId)
          .then(function(r) { return r.json(); })
          .then(function(p) {
            if (p.error && p.done) return; // handled by main fetch
            var processed = p.processed || 0;
            var total = p.total || totalRows || 1;
            var pct;

            // Phase transition growls
            if (p.phase && p.phase !== lastPhase) {
              if (p.phase === 'processing' && lastPhase === '') {
                showGrowl({type: 'info', title: 'Processing CSV', detail: 'Parsing and importing rows...', timeout: 4000});
              } else if (p.phase === 'db_write') {
                showGrowl({type: 'info', title: 'Writing to database', detail: 'Committing order records...', timeout: 4000});
              } else if (p.phase === 'rebuilding') {
                showGrowl({type: 'info', title: 'Rebuilding profiles', detail: 'Updating customer profiles from order data...', timeout: 4000});
              }
              lastPhase = p.phase;
            }

            // Progress percentage mapping:
            //   processing  -> 0-60%
            //   db_write    -> 60-70%
            //   rebuilding  -> 70-95%
            //   done        -> 100%
            if (p.phase === 'rebuilding') {
              var rCur = p.rebuild_current || 0;
              var rTot = p.rebuild_total || 1;
              pct = Math.min(95, 70 + Math.round((rCur / Math.max(rTot, 1)) * 25));
              var detail = p.rebuild_detail || 'Rebuilding customer profiles...';
              phaseText.textContent = detail;
              progressText.textContent = rTot > 0 ? (fmt(rCur) + ' of ' + fmt(rTot) + ' profiles') : 'Preparing...';
            } else if (p.phase === 'db_write') {
              pct = 65;
              phaseText.textContent = p.db_write_detail || 'Committing orders to database...';
              progressText.textContent = fmt(processed) + ' rows parsed, writing to database...';
            } else {
              // processing phase: 0-60%
              pct = Math.min(60, Math.round((processed / total) * 58) + 2);
              phaseText.textContent = 'Processing rows... ' + fmt(processed) + ' / ' + fmt(total);
              progressText.textContent = fmt(processed) + ' of ' + fmt(total) + ' rows';
            }
            progressBar.style.width = pct + '%';
            progressPct.textContent = pct + '%';
            cntNew.textContent = fmt(p.new || 0);
            cntUpdated.textContent = fmt(p.updated || 0);
            cntSkipped.textContent = fmt(p.skipped || 0);
          })
          .catch(function() {}); // ignore polling errors
      }, 1000);

      // Main fetch
      fetch('/api/orders/import-csv', {
        method: 'POST',
        headers: {'X-CSRFToken': csrf},
        body: formData,
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        clearInterval(pollInterval);
        if (data.success) {
          progressBar.style.width = '100%';
          progressPct.textContent = '100%';
          // Show complete state
          setBannerState('complete');
          document.getElementById('csv-final-new').textContent = fmt(data.new_orders);
          document.getElementById('csv-final-updated').textContent = fmt(data.updated_orders);
          document.getElementById('csv-final-skipped').textContent = fmt(data.skipped);
          document.getElementById('csv-final-profiles').textContent = fmt(data.customers_updated);
          showGrowl({
            type: 'success', title: 'CSV import complete',
            detail: '<span class="font-semibold">' + fmt(data.new_orders) + '</span> new &middot; <span class="font-semibold">' + fmt(data.updated_orders) + '</span> updated &middot; <span class="font-semibold">' + fmt(data.skipped) + '</span> skipped',
            timeout: 8000,
          });
        } else {
          setBannerState('error');
          document.getElementById('csv-error-detail').textContent = data.message || 'Unknown error';
          showGrowl({ type: 'error', title: 'CSV import failed', detail: data.message || 'Unknown error', timeout: 0 });
        }
      })
      .catch(function(err) {
        clearInterval(pollInterval);
        setBannerState('error');
        document.getElementById('csv-error-detail').textContent = String(err);
        showGrowl({ type: 'error', title: 'CSV import failed', detail: String(err), timeout: 0 });
      });
    });
  }

  // "Import another file" and "Try again" buttons
  var btnAnother = document.getElementById('csv-import-another');
  var btnRetry = document.getElementById('csv-retry');
  if (btnAnother) btnAnother.addEventListener('click', resetToIdle);
  if (btnRetry) btnRetry.addEventListener('click', resetToIdle);
});
</script>
{% endblock %}