{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% block title %}{{ _("Customers") }}{% endblock %}
{% block content %}
<div id="customers-page" class="p-6">
  {# ── Header row ── #}
  <div class="flex items-center justify-between 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">people</span>
        {{ _("Customers") }}
      </h2>
      <span class="text-xs text-gray-400 dark:text-gray-500">
        {% trans %}manual sync &mdash; use API sync or CSV import{% endtrans %}
      </span>
    </div>
    <div class="flex items-center gap-3">
      <span class="text-sm text-gray-500 dark:text-gray-400">{% trans count=total_count %}{{ count }} customer{% pluralize %}{{ count }} customers{% endtrans %}</span>
      <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>
      <button id="btn-check-websites" type="button"
              {% if not has_feature('website_checks') %}onclick='showUpgradeModal("max", {{ _("Website Health Checks")|tojson }})'{% endif %}
              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>{% if not has_feature('website_checks') %}{{ max_badge() }}{% endif %}
      </button>
      <button id="btn-rescan-modules" type="button"
              {% if not has_feature('website_checks') %}onclick='showUpgradeModal("max", {{ _("Module Rescan")|tojson }})'{% endif %}
              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>{% if not has_feature('website_checks') %}{{ max_badge() }}{% endif %}
      </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>

  {% include '_csv_import.html' %}

  {# ── 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">
      {% trans count=total_count %}Showing <strong>{{ count }}</strong> customer{% pluralize %}Showing <strong>{{ count }}</strong> customers{% endtrans %}
    </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|localdt('%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">{% trans %}Page {{ page }} of {{ total_pages }}{% endtrans %}</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") | tojson }};
    } 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") | tojson }};
    }
  }
  // ── 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...") | tojson }} + ' ') : ({{ _("Checking websites...") | tojson }} + ' ');
    if (wcBannerTitle) wcBannerTitle.textContent = label + p.checked + {{ _(" of ") | tojson }} + 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") | tojson }}; 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") | tojson }}; 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 — ") | tojson }} + p.checked + {{ _(" of ") | tojson }} + p.total + {{ _(" done") | tojson }}; 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...") | tojson }}; }
  }

  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") | tojson }}, detail: p.checked + {{ _(" of ") | tojson }} + p.total + {{ _(" checked before stopping.") | tojson }}, timeout: 6000 });
            } else {
              setBannerComplete(p);
              var detail = p.checked > 0
                ? (p.checked + {{ _(" checked — ") | tojson }} + p.online + {{ _(" online, ") | tojson }} + p.offline + {{ _(" offline") | tojson }} + (p.module_found ? {{ _(", ") | tojson }} + p.module_found + {{ _(" module") | tojson }} + (p.module_found > 1 ? 's' : '') + {{ _(" found") | tojson }} : ''))
                : {{ _("No websites were due for checking.") | tojson }};
              showGrowl({ id: 'wc-done', type: 'success', title: {{ _("Website checks complete") | tojson }}, 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...") | tojson }}, detail: {{ _("Will stop after current URL finishes.") | tojson }}, 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...") | tojson }};
      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") | tojson }},
            detail: {{ _("Checking all due websites in batches of 50.") | tojson }},
            timeout: 4000,
          });
          startWcPoll();
        } else {
          showGrowl({ type: 'error', title: {{ _("Check failed") | tojson }}, detail: data.message || {{ _("Unknown error") | tojson }}, timeout: 0 });
          setWcButton('idle');
        }
      })
      .catch(function(err) {
        showGrowl({ type: 'error', title: {{ _("Error") | tojson }}, 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...") | tojson }};
      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") | tojson }}, detail: {{ _("Scanning online sites for installed modules (fast mode).") | tojson }}, timeout: 4000 });
          startWcPoll();
        } else {
          showGrowl({ type: 'error', title: {{ _("Rescan failed") | tojson }}, detail: data.message || {{ _("Unknown error") | tojson }}, timeout: 0 });
        }
        btnRescan.disabled = false;
        btnRescan.querySelector('span:last-child').textContent = {{ _("Rescan Modules") | tojson }};
      })
      .catch(function(err) {
        showGrowl({ type: 'error', title: {{ _("Error") | tojson }}, detail: String(err), timeout: 0 });
        btnRescan.disabled = false;
        btnRescan.querySelector('span:last-child').textContent = {{ _("Rescan Modules") | tojson }};
      });
    });
  }

  // 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…") | tojson }};
      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") | tojson }},
            detail: '<span class="font-semibold">' + fmt(data.customers_updated) + '</span> ' + {{ _("customer profiles updated") | tojson }},
            timeout: 5000,
          });
          setTimeout(function() { location.reload(); }, 1500);
        } else {
          showGrowl({ type: 'error', title: {{ _("Rebuild failed") | tojson }}, detail: data.message || {{ _("Unknown error") | tojson }}, timeout: 0 });
        }
      })
      .catch(function(err) { showGrowl({ type: 'error', title: {{ _("Rebuild error") | tojson }}, detail: String(err), timeout: 0 }); })
      .finally(function() {
        btnRebuild.disabled = false;
        btnRebuild.querySelector('span:last-child').textContent = {{ _("Rebuild Profiles") | tojson }};
      });
    });
  }

  {% include '_csv_import_js.html' %}
});
</script>
{% endblock %}