{% extends "base.html" %}
{% block title %}Products{% endblock %}
{% block content %}
<div id="products-page" class="p-6">
  <div class="flex items-center justify-between mb-6">
    <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">inventory_2</span>
      Products
    </h2>
    <span class="text-sm text-gray-500 dark:text-gray-400" id="product-count">{{ products|length }} product{{ 's' if products|length != 1 }}</span>
  </div>

  {# Filters bar #}
  <div class="mb-4 flex flex-wrap items-center gap-4">
    <div class="relative max-w-sm flex-1 min-w-[200px]">
      <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 text-lg">search</span>
      <input type="text" id="product-search" placeholder="Filter by name..."
             class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg 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 transition-colors" />
    </div>
    <div class="flex items-center gap-1" id="status-filter">
      <button type="button" data-filter="all"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        All
      </button>
      <button type="button" data-filter="confirm"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-green-500 mr-1"></span>Active
      </button>
      <button type="button" data-filter="declined"
              class="status-btn px-3 py-1.5 text-xs font-medium rounded-lg border transition-colors">
        <span class="inline-block w-1.5 h-1.5 rounded-full bg-orange-500 mr-1"></span>Declined
      </button>
    </div>
  </div>

  {% if products %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm" id="products-table">
        <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <tr>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="name">
              Product <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="type">
              Type <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="status">
              Status <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="version">
              Version <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="rating">
              Rating <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">PS Compat.</th>
            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="price">
              Price <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="tickets">
              Open Tickets <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="load">
              Support 30d <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="guides">
              Guides <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Slug</th>
            <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide cursor-pointer hover:text-gray-700 dark:hover:text-gray-300 select-none" data-sort="updated">
              Last Update <span class="sort-arrow text-[10px]"></span>
            </th>
            <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800" id="products-tbody">
          {% for p in products %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors product-row"
              data-name="{{ p.name|lower }}"
              data-type="{{ (p.product_type or '')|lower }}"
              data-status="{{ (p.status or '')|lower }}"
              data-version="{{ p.current_version or '' }}"
              data-rating="{{ p.avg_rating or '0' }}"
              data-price="{{ p.price or '0' }}"
              data-tickets="{{ p.open_tickets }}"
              data-load="{{ p.tickets_30d + p.msgs_30d }}"
              data-guides="{{ guides_count.get(p.id, 0) }}"
              data-updated="{{ p.last_update_at.isoformat() if p.last_update_at else '' }}">

            {# Product: icon + name #}
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                {% if p.product_type == 'business_care' %}
                <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0 shadow-sm">
                  <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
                {% elif p.pico_url %}
                <img src="{{ p.pico_url }}" alt="" class="w-10 h-10 rounded-lg shadow-sm" loading="lazy" />
                {% else %}
                <div class="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                  <span class="material-symbols-outlined text-gray-400 dark:text-gray-500 text-xl">extension</span>
                </div>
                {% endif %}
                <div>
                  <span class="font-medium text-gray-900 dark:text-gray-100">{{ p.name }}</span>
                  {% if p.is_online == false %}
                  <span class="ml-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">offline</span>
                  {% endif %}
                </div>
              </div>
            </td>

            {# Type badge #}
            <td class="px-4 py-3">
              {% if p.product_type %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">{{ p.product_type }}</span>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Status badge: green=confirm, orange=declined #}
            <td class="px-4 py-3">
              {% if p.status %}
                {% if p.status == 'confirm' %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
                  {{ p.status }}
                </span>
                {% elif p.status == 'declined' %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-orange-500"></span>
                  {{ p.status }}
                </span>
                {% else %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                  <span class="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500"></span>
                  {{ p.status }}
                </span>
                {% endif %}
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Version #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400">{{ p.current_version or '--' }}</td>

            {# Rating #}
            <td class="px-4 py-3">
              {% if p.avg_rating %}
              <div class="flex items-center gap-1">
                <span class="material-symbols-outlined text-yellow-500 text-base" style="font-variation-settings: 'FILL' 1;">star</span>
                <span class="text-gray-700 dark:text-gray-300 font-medium">{{ p.avg_rating }}</span>
                {% if p.total_ratings %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">({{ p.total_ratings }})</span>
                {% endif %}
              </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# PS Compatibility #}
            <td class="px-4 py-3 text-gray-600 dark:text-gray-400 text-xs">
              {% if p.compatibility_min or p.compatibility_max %}
                {{ p.compatibility_min or '?' }} &ndash; {{ p.compatibility_max or '?' }}
              {% else %}
                <span class="text-gray-400 dark:text-gray-500">--</span>
              {% endif %}
            </td>

            {# Price #}
            <td class="px-4 py-3 text-right text-gray-700 dark:text-gray-300 font-medium whitespace-nowrap">{{ p.display_price or p.price or '--' }}</td>

            {# Open Tickets #}
            <td class="px-4 py-3 text-center">
              {% if p.open_tickets > 0 %}
              <a href="{{ url_for('inbox') }}?product={{ p.provider_product_id }}"
                 class="inline-flex items-center justify-center min-w-[28px] px-2 py-0.5 rounded-full text-xs font-semibold bg-brand-50 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300 hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
                {{ p.open_tickets }}
              </a>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">0</span>
              {% endif %}
            </td>

            {# Support Load 30d #}
            <td class="px-4 py-3 text-center whitespace-nowrap">
              {% set total_load = p.tickets_30d + p.msgs_30d %}
              {% if total_load > 0 %}
                {% if total_load >= 10 %}
                  {% set bg = 'bg-red-50 dark:bg-red-500/10' %}{% set text = 'text-red-700 dark:text-red-400' %}
                {% elif total_load >= 5 %}
                  {% set bg = 'bg-orange-50 dark:bg-orange-500/10' %}{% set text = 'text-orange-700 dark:text-orange-400' %}
                {% else %}
                  {% set bg = 'bg-blue-50 dark:bg-blue-500/10' %}{% set text = 'text-blue-700 dark:text-blue-400' %}
                {% endif %}
                <div class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded {{ bg }}">
                  <span class="text-xs font-semibold {{ text }}" title="{{ p.tickets_30d }} new tickets, {{ p.msgs_30d }} inbound messages in last 30 days">
                    {{ p.tickets_30d }}t / {{ p.msgs_30d }}m
                  </span>
                </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% endif %}
            </td>

            {# Guides #}
            <td class="px-4 py-3 text-center">
              <span class="guide-count" data-product-id="{{ p.id }}">
                {% set gc = guides_count.get(p.id, 0) %}
                {% if gc > 0 %}
                  <a href="{{ url_for('guides_list') }}?product={{ p.id }}"
                     class="inline-flex items-center justify-center min-w-[24px] px-1.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-500/20 transition-colors">{{ gc }}</a>
                {% else %}
                  <span class="text-gray-400 dark:text-gray-500 text-xs">0</span>
                {% endif %}
              </span>
              <button class="btn-candidates inline-flex items-center justify-center w-6 h-6 ms-1 text-xs rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-400 dark:hover:border-gray-500 transition-colors"
                      data-product-id="{{ p.id }}"
                      data-product-name="{{ p.name|e }}"
                      title="Find guide candidates">&#9889;</button>
            </td>

            {# Module Slug (inline edit — hidden for bundles) #}
            <td class="px-4 py-3 whitespace-nowrap">
              {% if p.product_type == 'bundle' %}
                <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% else %}
              <div class="flex items-center gap-1">
                <input type="text" value="{{ p.module_slug or '' }}" placeholder="e.g. mymodule"
                       data-product-id="{{ p.id }}" class="slug-input border border-gray-200 dark:border-gray-600 rounded text-xs px-2 py-1 w-28 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-brand-500 focus:border-brand-500 outline-none"
                       title="Module slug for /modules/{slug}/logo.png check">
                <button type="button" class="slug-save hidden text-green-600 dark:text-green-400 text-xs font-medium hover:text-green-800 dark:hover:text-green-300" data-product-id="{{ p.id }}">Save</button>
              </div>
              {% endif %}
            </td>

            {# Last Update #}
            <td class="px-4 py-3 whitespace-nowrap">
              {% if p.product_type == 'bundle' %}
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">depends on bundle products</span>
              {% elif p.last_update_at %}
                <div class="flex items-center gap-1.5">
                  <span class="text-gray-600 dark:text-gray-400 text-xs">{{ p.last_update_at.strftime('%Y-%m-%d') }}</span>
                  {% if p.days_since_update is not none %}
                    {% if p.days_since_update <= 30 %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400" title="{{ p.days_since_update }} days ago">{{ p.days_since_update }}d</span>
                    {% elif p.days_since_update <= 60 %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-orange-100 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400" title="{{ p.days_since_update }} days ago">{{ p.days_since_update }}d</span>
                    {% else %}
                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400" title="{{ p.days_since_update }} days ago">{{ p.days_since_update }}d</span>
                    {% endif %}
                  {% endif %}
                </div>
              {% else %}
              <span class="text-gray-400 dark:text-gray-500 text-xs">--</span>
              {% endif %}
            </td>

            {# Actions #}
            <td class="px-4 py-3 text-right">
              <a href="https://addons.prestashop.com/en/-/{{ p.provider_product_id }}-.html"
                 target="_blank" rel="noopener noreferrer"
                 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-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                 title="View on Addons Marketplace">
                <span class="material-symbols-outlined text-sm">open_in_new</span>
                Addons
              </a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-3 block">inventory_2</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">No products synced yet.</p>
    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">Products are synced automatically when you run a sync.</p>
  </div>
  {% endif %}
</div>

<script>
(function() {
  var STORAGE_KEY = 'products_status_filter';
  var activeFilter = localStorage.getItem(STORAGE_KEY) || 'all';
  var searchInput = document.getElementById('product-search');

  function applyFilters() {
    var q = (searchInput ? searchInput.value : '').toLowerCase();
    document.querySelectorAll('.product-row').forEach(function(row) {
      var matchesName = row.dataset.name.includes(q);
      var matchesStatus = activeFilter === 'all' || row.dataset.status === activeFilter;
      row.style.display = (matchesName && matchesStatus) ? '' : 'none';
    });
    // Update visible count
    var visible = document.querySelectorAll('.product-row[style=""], .product-row:not([style])').length;
    var countEl = document.getElementById('product-count');
    if (countEl) {
      var total = document.querySelectorAll('.product-row').length;
      countEl.textContent = (activeFilter !== 'all' || q) ? visible + ' / ' + total + ' products' : total + ' product' + (total !== 1 ? 's' : '');
    }
  }

  function setActiveButton(filter) {
    document.querySelectorAll('.status-btn').forEach(function(btn) {
      if (btn.dataset.filter === filter) {
        btn.className = 'status-btn px-3 py-1.5 text-xs font-medium rounded-lg border border-brand-200 bg-brand-50 dark:bg-brand-500/10 text-brand-700 dark:text-brand-300 transition-colors';
      } else {
        btn.className = 'status-btn px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors';
      }
    });
  }

  // Status filter buttons
  document.querySelectorAll('.status-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      activeFilter = this.dataset.filter;
      localStorage.setItem(STORAGE_KEY, activeFilter);
      setActiveButton(activeFilter);
      applyFilters();
    });
  });

  // Search filter
  if (searchInput) {
    searchInput.addEventListener('input', applyFilters);
  }

  // Apply saved filter on page load
  setActiveButton(activeFilter);
  applyFilters();

  // Sortable columns
  var currentSort = { col: null, asc: true };
  var tbody = document.getElementById('products-tbody');
  if (!tbody) return;

  document.querySelectorAll('th[data-sort]').forEach(function(th) {
    th.addEventListener('click', function() {
      var col = this.dataset.sort;
      if (currentSort.col === col) {
        currentSort.asc = !currentSort.asc;
      } else {
        currentSort.col = col;
        currentSort.asc = true;
      }

      // Update arrow indicators
      document.querySelectorAll('.sort-arrow').forEach(function(el) { el.textContent = ''; });
      this.querySelector('.sort-arrow').textContent = currentSort.asc ? ' \u25B2' : ' \u25BC';

      var rows = Array.from(tbody.querySelectorAll('.product-row'));
      rows.sort(function(a, b) {
        var av, bv;
        switch (col) {
          case 'name':
            av = a.dataset.name; bv = b.dataset.name;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'type':
            av = a.dataset.type; bv = b.dataset.type;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'status':
            av = a.dataset.status; bv = b.dataset.status;
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          case 'version':
            av = a.dataset.version; bv = b.dataset.version;
            return currentSort.asc ? av.localeCompare(bv, undefined, {numeric: true}) : bv.localeCompare(av, undefined, {numeric: true});
          case 'rating':
            av = parseFloat(a.dataset.rating) || 0; bv = parseFloat(b.dataset.rating) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'price':
            av = parseFloat(a.dataset.price) || 0; bv = parseFloat(b.dataset.price) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'tickets':
            av = parseInt(a.dataset.tickets) || 0; bv = parseInt(b.dataset.tickets) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'load':
            av = parseInt(a.dataset.load) || 0; bv = parseInt(b.dataset.load) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'guides':
            av = parseInt(a.dataset.guides) || 0; bv = parseInt(b.dataset.guides) || 0;
            return currentSort.asc ? av - bv : bv - av;
          case 'updated':
            av = a.dataset.updated || '0000'; bv = b.dataset.updated || '0000';
            return currentSort.asc ? av.localeCompare(bv) : bv.localeCompare(av);
          default:
            return 0;
        }
      });
      rows.forEach(function(row) { tbody.appendChild(row); });
    });
  });
})();
</script>

{# ── Guide Candidates Panel ── #}
<div id="candidates-panel" style="position:fixed;right:0;top:0;width:480px;height:100vh;z-index:50;background:#fff;border-left:1px solid #e5e7eb;box-shadow:-4px 0 24px rgba(0,0,0,.10);flex-direction:column;">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e7eb;flex-shrink:0;">
    <h3 id="panel-title" style="font-size:14px;font-weight:600;color:#111827;margin:0;">Guide Candidates</h3>
    <button id="panel-close" style="border:none;background:none;cursor:pointer;color:#6b7280;font-size:20px;line-height:1;padding:4px;">&#x2715;</button>
  </div>
  <div id="panel-body" style="flex:1;overflow-y:auto;padding:16px 20px;">
    <div id="panel-loading" style="display:none;text-align:center;padding:40px 0;color:#6b7280;font-size:13px;">
      <div style="display:inline-block;width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#6366f1;border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px;"></div>
      <div>Searching for candidates…</div>
    </div>
    <div id="panel-empty" style="display:none;text-align:center;padding:40px 0;color:#9ca3af;font-size:13px;">No guide candidates found.</div>
    <div id="panel-list"></div>
  </div>
</div>
<div id="panel-overlay" style="display:none;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.2);"></div>

<style>
@keyframes spin { to { transform: rotate(360deg); } }
#candidates-panel { display: none; }
#candidates-panel.open { display: flex !important; }
</style>

<script>
(function() {
  var panel = document.getElementById('candidates-panel');
  var overlay = document.getElementById('panel-overlay');
  var panelTitle = document.getElementById('panel-title');
  var panelLoading = document.getElementById('panel-loading');
  var panelEmpty = document.getElementById('panel-empty');
  var panelList = document.getElementById('panel-list');
  var csrfToken = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').content : '';

  function openPanel(productId, productName) {
    panelTitle.textContent = 'Guide Candidates \u2014 ' + productName;
    panelLoading.style.display = 'block';
    panelEmpty.style.display = 'none';
    panelList.innerHTML = '';
    panel.classList.add('open');
    overlay.style.display = 'block';

    fetch('/api/products/' + productId + '/guide-candidates', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      panelLoading.style.display = 'none';
      var candidates = data.candidates || [];
      if (!candidates.length) {
        panelEmpty.style.display = 'block';
        return;
      }
      candidates.forEach(function(c) {
        var item = document.createElement('div');
        item.style.cssText = 'border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px;';

        var badge = c.cluster_size > 1
          ? '<span style="display:inline-block;background:#ede9fe;color:#7c3aed;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;margin-left:6px;">' + c.cluster_size + ' similar</span>'
          : '';

        var summary = c.summary_text ? escapeHtml(c.summary_text) : '<em style="color:#9ca3af">No summary</em>';

        item.innerHTML =
          '<div style="font-size:12px;color:#374151;line-height:1.5;margin-bottom:10px;">' + summary + badge + '</div>' +
          '<button class="btn-generate" data-thread-id="' + c.thread_id + '" style="font-size:12px;font-weight:500;padding:5px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;color:#374151;transition:all .15s;">' +
          '&#10024; Generate guide</button>' +
          '<span class="gen-result" style="display:none;font-size:12px;margin-left:8px;"></span>';

        panelList.appendChild(item);
      });

      // Wire up generate buttons
      panelList.querySelectorAll('.btn-generate').forEach(function(btn) {
        btn.addEventListener('click', function() {
          var threadId = parseInt(this.dataset.threadId);
          var resultEl = this.nextElementSibling;
          this.disabled = true;
          this.textContent = 'Generating…';
          fetch('/api/products/generate-guide', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest',
              'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({ thread_id: threadId })
          })
          .then(function(r) { return r.json(); })
          .then(function(data) {
            if (data.success) {
              btn.textContent = '\u2713 Done';
              btn.style.background = '#f0fdf4';
              btn.style.borderColor = '#86efac';
              btn.style.color = '#15803d';
              resultEl.style.display = 'inline';
              resultEl.style.color = '#374151';
              resultEl.textContent = data.title || 'Guide created';
              // Update guide count badge in the row
              var countEl = document.querySelector('.guide-count[data-product-id="' + productId + '"]');
              if (countEl) {
                var cur = parseInt(countEl.querySelector('a,span')?.textContent) || 0;
                countEl.innerHTML = '<a href="/guides" style="display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:1px 6px;border-radius:20px;font-size:12px;font-weight:600;background:#ede9fe;color:#4f46e5;text-decoration:none;">' + (cur + 1) + '</a>';
              }
            } else {
              btn.disabled = false;
              btn.textContent = '&#10024; Generate guide';
              resultEl.style.display = 'inline';
              resultEl.style.color = '#dc2626';
              resultEl.textContent = data.error || 'Error';
            }
          })
          .catch(function() {
            btn.disabled = false;
            btn.textContent = '&#10024; Generate guide';
            resultEl.style.display = 'inline';
            resultEl.style.color = '#dc2626';
            resultEl.textContent = 'Request failed';
          });
        });
      });
    })
    .catch(function() {
      panelLoading.style.display = 'none';
      panelEmpty.style.display = 'block';
      panelEmpty.textContent = 'Failed to load candidates.';
    });
  }

  // Keep productId accessible in close handler
  var currentProductId = null;

  function closePanel() {
    panel.classList.remove('open');
    overlay.style.display = 'none';
  }

  document.getElementById('panel-close').addEventListener('click', closePanel);
  overlay.addEventListener('click', closePanel);

  document.addEventListener('click', function(e) {
    var btn = e.target.closest('.btn-candidates');
    if (!btn) return;
    currentProductId = btn.dataset.productId;
    openPanel(currentProductId, btn.dataset.productName || 'Product');
  });

  function escapeHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
})();

// ── Slug inline editing ──
(function() {
  var csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

  // Show save button when input changes
  document.querySelectorAll('.slug-input').forEach(function(input) {
    var original = input.value;
    var saveBtn = input.parentElement.querySelector('.slug-save');
    input.addEventListener('input', function() {
      saveBtn.classList.toggle('hidden', input.value === original);
    });
    input.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') { e.preventDefault(); saveBtn.click(); }
    });
  });

  // Save slug via AJAX
  document.querySelectorAll('.slug-save').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var pid = btn.dataset.productId;
      var input = btn.parentElement.querySelector('.slug-input');
      var fd = new FormData();
      fd.append('slug', input.value.trim());
      fd.append('csrf_token', csrf);
      fetch('/api/products/' + pid + '/slug', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd,
      })
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.success) {
          btn.classList.add('hidden');
          showToast('Slug saved');
        } else {
          showToast('Save failed: ' + (data.message || ''), 'error');
        }
      })
      .catch(function(err) { showToast('Error: ' + err, 'error'); });
    });
  });
})();
</script>
{% endblock %}