{% extends "base.html" %}
{% block title %}{{ _("Generated Guides") }}{% endblock %}
{% block content %}
<div id="guides-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">menu_book</span>
      {{ _("Generated Documentation Guides") }}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wide bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400" title="{{ _("This feature is in beta — we're still polishing it.") }}">{{ _("beta") }}</span>
    </h2>
    {% set n_guides = guides|length %}
    <span class="text-sm text-gray-500 dark:text-gray-400">{% trans count=n_guides %}{{ count }} guide{% pluralize %}{{ count }} guides{% endtrans %}</span>
  </div>

  {% if product_filter %}
  <div class="mb-4 flex items-center gap-2">
    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-500/10 text-brand-700 dark:text-brand-400 border border-brand-200 dark:border-brand-500/30">
      <span class="material-symbols-outlined text-sm">filter_list</span>
      {% set filtered_product_name = (guides | selectattr('product_name') | map(attribute='product_name') | first) or product_filter %}
      {% trans %}Filtered by product: {{ filtered_product_name }}{% endtrans %}
      <a href="{{ url_for('guides_list') }}" class="ml-1 hover:text-brand-900 dark:hover:text-brand-200" title="{{ _("Clear filter") }}">&#x2715;</a>
    </span>
  </div>
  {% endif %}

  {% if guides %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <table id="guides-table" class="w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <tr>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Title") }}</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide hidden md:table-cell">{{ _("Product") }}</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Ticket") }}</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _("Created") }}</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">
        {% for g in guides %}
        {# Hidden textarea holding raw markdown for clipboard copy #}
        <textarea id="guide-md-{{ g.id }}" hidden readonly>{{ g.content_md or '' }}</textarea>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <td class="px-4 py-3">
            <p class="font-medium text-gray-900 dark:text-gray-100">{{ g.title }}</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 font-mono mt-0.5">{{ g.slug }}</p>
          </td>
          <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 hidden md:table-cell">
            {{ g.product_name if g.product_name else '—' }}
          </td>
          <td class="px-4 py-3">
            {% if g.ticket_id %}
            <a href="{{ url_for('ticket_get', ticket_id=g.ticket_id) }}"
               class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 transition-colors">
              #{{ g.ticket_id }}{% if g.ticket_subject %} — {{ g.ticket_subject[:50] }}{% if g.ticket_subject|length > 50 %}…{% endif %}{% endif %}
            </a>
            {% else %}
            <span class="text-gray-400 dark:text-gray-500">—</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">{{ g.created_at|localdt('%Y-%m-%d %H:%M') }}</td>
          <td class="px-4 py-3 text-right">
            <div class="inline-flex items-center gap-2">
              <button type="button" onclick="toggleGuidePreview({{ g.id }}, this)"
                      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">
                <span class="material-symbols-outlined text-sm guide-view-icon">visibility</span>
                <span class="guide-view-label">{{ _("View") }}</span>
              </button>
              <button type="button" id="copy-btn-{{ g.id }}" onclick="copyGuideMarkdown({{ g.id }})"
                      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">
                <span class="material-symbols-outlined text-sm">content_copy</span>
                {{ _("Copy Markdown") }}
              </button>
            </div>
          </td>
        </tr>
        <tr id="guide-preview-{{ g.id }}" class="hidden bg-gray-50 dark:bg-gray-900/40">
          <td colspan="5" class="px-4 py-3">
            <pre class="whitespace-pre-wrap text-xs text-gray-700 dark:text-gray-300 font-mono bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 overflow-x-auto max-h-96">{{ g.content_md or '(no content)' }}</pre>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </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">menu_book</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _("No guides generated yet.") }}</p>
    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">{{ _('When an AI suggestion qualifies as a guide, click "Generate Guide" on the ticket to create one.') }}</p>
  </div>
  {% endif %}
</div>

<script>
function copyGuideMarkdown(id) {
  var ta = document.getElementById('guide-md-' + id);
  if (!ta) return;
  var text = ta.value;
  var btn = document.getElementById('copy-btn-' + id);
  navigator.clipboard.writeText(text).then(function() {
    if (btn) {
      var orig = btn.innerHTML;
      btn.innerHTML = '<span class="material-symbols-outlined text-sm text-green-600 dark:text-green-400">check</span> ' + {{ _("Copied!")|tojson }};
      setTimeout(function() { btn.innerHTML = orig; }, 1800);
    }
  }).catch(function() {
    // Fallback for older browsers
    ta.removeAttribute('hidden');
    ta.select();
    document.execCommand('copy');
    ta.setAttribute('hidden', '');
    if (btn) {
      var orig = btn.innerHTML;
      btn.innerHTML = '<span class="material-symbols-outlined text-sm text-green-600 dark:text-green-400">check</span> ' + {{ _("Copied!")|tojson }};
      setTimeout(function() { btn.innerHTML = orig; }, 1800);
    }
  });
}

function toggleGuidePreview(id, btn) {
  var row = document.getElementById('guide-preview-' + id);
  if (!row) return;
  var nowHidden = row.classList.toggle('hidden');
  var icon = btn.querySelector('.guide-view-icon');
  var label = btn.querySelector('.guide-view-label');
  if (icon) icon.textContent = nowHidden ? 'visibility' : 'visibility_off';
  if (label) label.textContent = nowHidden ? {{ _("View")|tojson }} : {{ _("Hide")|tojson }};
}
</script>
{% endblock %}