{% extends "base.html" %}
{% block title %}Ticket #{{ provider_thread_id or ticket.id }}{% endblock %}
{% block content %}
<script>
  window._ticketId = {{ ticket.id }};
  window._preferredLanguage = '{{ preferred_language }}';
  window._knownLanguages = {{ known_languages | tojson }};
  window._customerLanguage = '{{ customer_language or "" }}';
  window._ticketProductId = '{{ id_product or "" }}';
  window._replySignature = {{ reply_signature | tojson }};
  window._segmentData = {{ segments | tojson }};
</script>
<div id="ticket-page" class="flex h-[calc(100vh-3.5rem)]" data-ticket-id="{{ ticket.id }}">

  {# ============== Left: conversation column ============== #}
  <div class="flex-1 flex flex-col min-w-0">

    {# -- Sticky header -- #}
    <div id="ticket-header" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-3 flex-shrink-0">
      {# Row 1: back, subject, ID, external link … refresh #}
      <div class="flex items-center gap-2">
        <a href="{{ url_for('inbox') }}" id="back-to-inbox" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0" title="Back to Inbox">
          <span class="material-symbols-outlined text-lg">arrow_back</span>
        </a>
        <script>
          (function() {
            var saved = sessionStorage.getItem('inboxReturnUrl');
            if (saved) document.getElementById('back-to-inbox').href = saved;
          })();
        </script>
        <h1 id="ticket-subject" class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate min-w-0" title="{{ ticket.thread.subject }}">{{ ticket.thread.subject }}</h1>
        <div class="h-4 w-px bg-gray-200 dark:bg-gray-700 flex-shrink-0"></div>
        <span id="ticket-id" class="text-xs font-medium text-gray-500 dark:text-gray-400 flex-shrink-0">#{{ provider_thread_id or ticket.id }}</span>
        {% if provider_thread_id %}
        <a href="https://addons.prestashop.com/seller-contact.php?ict={{ provider_thread_id }}"
           target="_blank" rel="noopener" title="Open in Addons Marketplace"
           id="ticket-external-link" data-testid="external-link" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0">
          <span class="material-symbols-outlined text-base">open_in_new</span>
        </a>
        {% endif %}
        <div class="flex-1"></div>
        <button id="refresh-btn" type="button" onclick="refreshMessages()"
                title="Fetch latest messages from Addons"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm" id="refresh-icon">refresh</span>
          Refresh
        </button>
      </div>

      {# Row 1b: product icon + name + customer website #}
      {% if ticket.thread.product_name or ticket.thread.customer_website %}
      <div id="ticket-product-info" class="flex items-center gap-2 mt-1 ml-8">
        {% if product and product.product_type == 'business_care' %}
        <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0"
             title="{{ ticket.thread.product_name or '' }}">
          <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
        </div>
        {% elif product and product.pico_url %}
        <img src="{{ product.pico_url }}" alt="" class="w-8 h-8 rounded-lg flex-shrink-0"
             title="{{ ticket.thread.product_name or '' }}" onerror="this.style.display='none'">
        {% endif %}
        {% if ticket.thread.product_name %}
        <span class="text-xs font-medium text-gray-600 dark:text-gray-400 truncate" title="{{ ticket.thread.product_name }}">{{ ticket.thread.product_name }}</span>
        {% endif %}
        {% if ticket.thread.customer_website %}
        {% set ws_href = ticket.thread.customer_website if ticket.thread.customer_website.startswith('http') else 'https://' + ticket.thread.customer_website %}
        {% if site_check and site_check.is_online == true %}
          {% set tip = 'Online' %}
          {% if site_check.error_message %}{% set tip = 'Online (' ~ site_check.http_status ~ ' — ' ~ site_check.error_message ~ ')' %}
          {% elif site_check.http_status %}{% set tip = 'Online (' ~ site_check.http_status ~ ', ' ~ (site_check.response_time_ms or '?') ~ 'ms)' %}{% endif %}
          <span class="inline-block w-2 h-2 rounded-full bg-green-500" title="{{ tip }}"></span>
        {% elif site_check and site_check.is_online == false %}
          {% set tip = 'Offline' %}
          {% if site_check.error_message %}{% set tip = 'Offline — ' ~ site_check.error_message %}{% endif %}
          <span class="inline-block w-2 h-2 rounded-full bg-red-500" title="{{ tip }}"></span>{% endif %}
        <a href="{{ ws_href }}" target="_blank" rel="noopener"
           class="text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 truncate max-w-[200px]" title="{{ ticket.thread.customer_website }}">
          {{ ticket.thread.customer_website | truncate(32) }}
        </a>
        {% endif %}
      </div>
      {% endif %}

      {# -- Second row: controls + info -- #}
      <div id="ticket-controls" class="flex items-center gap-3 mt-2 flex-wrap">

        <label class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
          Status:
          <select id="status-select" onchange="updateStatus(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 font-medium text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="open" {% if ticket.status == 'open' %}selected{% endif %}>Open</option>
            <option value="in_progress" {% if ticket.status == 'in_progress' %}selected{% endif %}>In Progress</option>
            <option value="waiting_customer" {% if ticket.status == 'waiting_customer' %}selected{% endif %}>Waiting</option>
            <option value="closed" {% if ticket.status == 'closed' %}selected{% endif %}>Closed</option>
          </select>
        </label>

        <label class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
          Priority:
          <select id="priority-select" onchange="updatePriority(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 font-medium text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="p1" {% if ticket.priority == 'p1' %}selected{% endif %}>Critical</option>
            <option value="p2" {% if ticket.priority == 'p2' %}selected{% endif %}>High</option>
            <option value="p3" {% if ticket.priority == 'p3' %}selected{% endif %}>Normal</option>
            <option value="p4" {% if ticket.priority == 'p4' %}selected{% endif %}>Low</option>
          </select>
        </label>

        {# Support contract status #}
        {% if ticket.thread.is_support_expired %}
        <span data-testid="support-status" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-500/30">
          <span class="material-symbols-outlined" style="font-size:11px">error</span>
          Support Expired
        </span>
        {% elif ticket.thread.is_support_expired is not none %}
        <span data-testid="support-status" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-500/30">
          <span class="material-symbols-outlined" style="font-size:11px">check_circle</span>
          Support Active
        </span>
        {% endif %}

        {# Intent / sentiment badge from latest AI classification #}
        {% if suggestions %}
          {% set _latest_s = suggestions|sort(attribute='created_at', reverse=True)|first %}
          {% set _intent = (_latest_s.classification_json|fromjson).get('intent_category', '') %}
          {% if _intent %}
            {% set _intent_map = {
              'angry': ['red', 'sentiment_very_dissatisfied'],
              'escalation': ['red', 'priority_high'],
              'complaint': ['orange', 'feedback'],
              'refund': ['orange', 'currency_exchange'],
              'bug': ['amber', 'bug_report'],
              'question': ['blue', 'help'],
              'config': ['blue', 'settings'],
              'help': ['blue', 'support_agent'],
              'feature_request': ['purple', 'lightbulb'],
              'thanks_solved': ['green', 'check_circle']
            } %}
            {% set _style = _intent_map.get(_intent, ['gray', 'label']) %}
        <span data-testid="intent-badge" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium
          bg-{{ _style[0] }}-50 text-{{ _style[0] }}-700 border border-{{ _style[0] }}-200
          dark:bg-{{ _style[0] }}-500/10 dark:text-{{ _style[0] }}-300 dark:border-{{ _style[0] }}-500/30">
          <span class="material-symbols-outlined" style="font-size:11px">{{ _style[1] }}</span>
          {{ _intent | replace('_', ' ') | title }}
        </span>
          {% endif %}
        {% endif %}

        {# Customer language — manual override (any language, not limited to what support knows) #}
        <div class="h-3 w-px bg-gray-200 dark:bg-gray-700"></div>
        <label class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
          <span class="material-symbols-outlined" style="font-size:13px">translate</span>
          <select id="customer-lang-select" onchange="setCustomerLanguage(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-1.5 py-0.5 bg-white dark:bg-gray-700 font-medium text-blue-700 dark:text-blue-400 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">Auto</option>
            <option value="ar" {% if customer_language == 'ar' %}selected{% endif %}>AR — Arabic</option>
            <option value="ca" {% if customer_language == 'ca' %}selected{% endif %}>CA — Catalan</option>
            <option value="cs" {% if customer_language == 'cs' %}selected{% endif %}>CS — Czech</option>
            <option value="da" {% if customer_language == 'da' %}selected{% endif %}>DA — Danish</option>
            <option value="de" {% if customer_language == 'de' %}selected{% endif %}>DE — German</option>
            <option value="el" {% if customer_language == 'el' %}selected{% endif %}>EL — Greek</option>
            <option value="en" {% if customer_language == 'en' %}selected{% endif %}>EN — English</option>
            <option value="es" {% if customer_language == 'es' %}selected{% endif %}>ES — Spanish</option>
            <option value="fi" {% if customer_language == 'fi' %}selected{% endif %}>FI — Finnish</option>
            <option value="fr" {% if customer_language == 'fr' %}selected{% endif %}>FR — French</option>
            <option value="he" {% if customer_language == 'he' %}selected{% endif %}>HE — Hebrew</option>
            <option value="hr" {% if customer_language == 'hr' %}selected{% endif %}>HR — Croatian</option>
            <option value="hu" {% if customer_language == 'hu' %}selected{% endif %}>HU — Hungarian</option>
            <option value="id" {% if customer_language == 'id' %}selected{% endif %}>ID — Indonesian</option>
            <option value="it" {% if customer_language == 'it' %}selected{% endif %}>IT — Italian</option>
            <option value="ja" {% if customer_language == 'ja' %}selected{% endif %}>JA — Japanese</option>
            <option value="ko" {% if customer_language == 'ko' %}selected{% endif %}>KO — Korean</option>
            <option value="nl" {% if customer_language == 'nl' %}selected{% endif %}>NL — Dutch</option>
            <option value="no" {% if customer_language == 'no' %}selected{% endif %}>NO — Norwegian</option>
            <option value="pl" {% if customer_language == 'pl' %}selected{% endif %}>PL — Polish</option>
            <option value="pt" {% if customer_language == 'pt' %}selected{% endif %}>PT — Portuguese</option>
            <option value="ro" {% if customer_language == 'ro' %}selected{% endif %}>RO — Romanian</option>
            <option value="ru" {% if customer_language == 'ru' %}selected{% endif %}>RU — Russian</option>
            <option value="sk" {% if customer_language == 'sk' %}selected{% endif %}>SK — Slovak</option>
            <option value="sv" {% if customer_language == 'sv' %}selected{% endif %}>SV — Swedish</option>
            <option value="tr" {% if customer_language == 'tr' %}selected{% endif %}>TR — Turkish</option>
            <option value="uk" {% if customer_language == 'uk' %}selected{% endif %}>UK — Ukrainian</option>
            <option value="zh" {% if customer_language == 'zh' %}selected{% endif %}>ZH — Chinese</option>
          </select>
        </label>

        <div class="flex-1"></div>

        {% if not ticket.is_read %}
        <button id="mark-as-read-btn" onclick="markAsRead()" title="Mark as read"
                class="inline-flex items-center gap-1 px-2.5 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-600 transition-colors">
          <span class="material-symbols-outlined text-sm">mark_email_read</span>
          Mark as Read
        </button>
        {% endif %}
        {% if not ticket.first_response_at %}
        <button id="answered-outside-btn" onclick="answeredOutside()"
                title="Record that this ticket was answered outside SupportHub"
                class="inline-flex items-center gap-1 px-2.5 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-600 transition-colors">
          <span class="material-symbols-outlined text-sm">done_all</span>
          Mark as Replied Externally
        </button>
        {% endif %}
      </div>
    </div>

    {# -- Thread Summary / TL;DR -- shown when no segments, otherwise integrated into topic overlay #}
    {% if thread_summary and segments|length <= 1 %}
    <details id="thread-summary" data-testid="thread-summary" class="mx-6 mt-3 mb-0 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
      <summary class="px-4 py-2.5 cursor-pointer text-xs font-semibold text-blue-700 dark:text-blue-400 flex items-center gap-1.5 select-none">
        <span class="material-symbols-outlined text-sm">summarize</span>
        Thread Summary
      </summary>
      <div class="px-4 pb-3 text-xs text-blue-800 dark:text-blue-200 leading-relaxed">{{ thread_summary }}</div>
    </details>
    {% endif %}

    {# -- Review request banner -- #}
    {% if is_review_request and ticket.status == 'closed' and not ticket.is_read %}
    <div id="review-request-banner" class="mx-6 mt-3 mb-0 rounded-lg border border-green-200 dark:border-green-500/30 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-500/10 dark:to-emerald-500/10 px-5 py-4">
      <div class="flex items-start gap-3">
        <span class="material-symbols-outlined text-green-600 dark:text-green-400 text-2xl flex-shrink-0 mt-0.5">sentiment_very_satisfied</span>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold text-green-800 dark:text-green-200">Happy customer — time for a review request!</h3>
          <p class="text-xs text-green-700 dark:text-green-400 mt-1 leading-relaxed">
            This customer sent a thank-you on a closed ticket. Reply to
            <strong>clear the Addons "unanswered" counter</strong> and
            <strong>earn a positive rating</strong>.
          </p>
          <div class="flex items-center gap-2 mt-3">
            <button type="button" id="load-review-template-btn" onclick="loadReviewRequest()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
              <span class="material-symbols-outlined text-sm">rate_review</span>
              Load Review Request
            </button>
            <button type="button" onclick="markReviewSent()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-400 bg-white dark:bg-gray-700 border border-green-300 dark:border-green-500/30 rounded-lg hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors">
              <span class="material-symbols-outlined text-sm">check_circle</span>
              Already Sent
            </button>
            <button type="button" id="dismiss-review-btn" onclick="dismissReviewBanner()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
              <span class="material-symbols-outlined text-sm">close</span>
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {# -- Conversation thread -- #}
    <div id="message-thread" class="flex-1 overflow-y-auto px-6 py-3 space-y-4 relative">
      {# Floating topic overlay — single pill, updated via JS #}
      {% if segments|length > 1 %}
      <div id="topic-overlay" class="sticky top-0 z-20 flex flex-col items-center pointer-events-none transition-opacity duration-200"
           style="opacity:0; margin-bottom:-0.375rem;">
        <div class="flex justify-center py-1.5">
          <button id="topic-overlay-pill" type="button"
                  class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium cursor-pointer
                         bg-purple-100/95 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30 shadow-sm backdrop-blur-sm pointer-events-auto
                         hover:bg-purple-200/95 dark:hover:bg-purple-500/30 transition-colors focus:outline-none focus:ring-2 focus:ring-purple-300"
                  aria-expanded="false" aria-controls="topic-summary-panel">
            <span class="material-symbols-outlined text-sm">topic</span>
            <span id="topic-overlay-text"></span>
            <span class="material-symbols-outlined text-sm transition-transform duration-200" id="topic-overlay-chevron" style="font-size:14px">expand_more</span>
          </button>
        </div>
        {# Expandable per-topic summary panel under the pill #}
        <div id="topic-summary-panel" class="hidden pointer-events-auto max-w-lg w-full mx-auto px-4 pb-2">
          <div class="bg-purple-50/95 dark:bg-purple-500/15 backdrop-blur-sm border border-purple-200 dark:border-purple-500/30 rounded-lg px-4 py-3 shadow-md">
            <p id="topic-summary-text" class="text-xs text-purple-800 dark:text-purple-200 leading-relaxed"></p>
          </div>
        </div>
      </div>
      {% endif %}

      {% set ns = namespace(prev_seg=-1) %}
      {% for msg in messages %}
      {% set cur_seg = message_segment_map.get(msg.id, -1) %}
      {% if cur_seg != ns.prev_seg and cur_seg >= 0 %}
      {# Inline topic marker (not sticky — observed by JS) #}
      <div class="segment-marker flex justify-center py-1.5" id="segment-{{ cur_seg }}" data-seg-index="{{ cur_seg }}"
           data-seg-label="{{ segments[cur_seg].label if cur_seg < segments|length else 'Topic ' ~ (cur_seg + 1) }}">
        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium
                     bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30 shadow-sm">
          <span class="material-symbols-outlined text-sm">topic</span>
          {{ segments[cur_seg].label if cur_seg < segments|length else 'Topic' }}
        </span>
      </div>
      {% set ns.prev_seg = cur_seg %}
      {% endif %}
      {% if scroll_to_message_id and msg.id == scroll_to_message_id %}
      <div class="flex items-center gap-3 py-2" id="unread-marker">
        <div class="flex-1 border-t border-blue-300 dark:border-blue-500/50"></div>
        <span class="text-xs text-blue-500 dark:text-blue-400 font-medium whitespace-nowrap">Your last reply</span>
        <div class="flex-1 border-t border-blue-300 dark:border-blue-500/50"></div>
      </div>
      {% endif %}
      {% set outbound = msg.direction == 'outbound' %}
      <div class="flex items-start gap-3 group {{ 'flex-row-reverse' if outbound }}" data-message-id="{{ msg.id }}">
        {# Avatar #}
        <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center text-xs font-semibold
                    {{ 'bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400' if not outbound else 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400' }}">
          {{ 'C' if not outbound else 'A' }}
        </div>
        {# Bubble + hover actions #}
        <div class="flex items-center gap-1 {{ 'flex-row-reverse' if outbound }}">
          {# Bubble #}
          <div class="max-w-[75%] rounded-xl px-4 py-3 text-sm
                      {{ 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700' if not outbound else 'bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30' }}">
            <div class="flex items-center gap-2 mb-1.5 {{ 'flex-row-reverse' if outbound }}">
              <span class="font-semibold text-gray-900 dark:text-gray-100 text-xs">{{ msg.author_display }}</span>
              <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ msg.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="message-body text-gray-700 dark:text-gray-300 break-words whitespace-pre-wrap [&>p]:mb-2 [&>ul]:my-2 [&>ol]:my-2 [&>li]:ml-4 [&>strong]:font-bold [&>em]:italic [&>u]:underline">
              {% if msg.body_raw %}{{ msg.body_raw | safe }}{% else %}{{ msg.body_text | e | replace('\n', '<br>') | safe }}{% endif %}
            </div>
            {# Translation result area — pre-populated from cache when available #}
            {% set cached_tr = cached_translations.get(msg.id) %}
            <div class="translated-content {{ '' if cached_tr else 'hidden' }} mt-2 pt-2 border-t border-blue-100 dark:border-blue-500/30 text-xs text-blue-800 dark:text-blue-200 break-words [&>p]:mb-2 [&>ul]:my-2 [&>ol]:my-2 [&>li]:ml-4 [&>strong]:font-bold [&>em]:italic [&>u]:underline"
                 {% if cached_tr %}data-lang="{{ preferred_language }}"{% endif %}>
              {% if cached_tr %}{{ cached_tr | safe }}{% endif %}
            </div>
            {# Attachments #}
            {% if msg.attachments %}
            <div class="mt-2 pt-2 border-t border-gray-100 dark:border-gray-700 flex flex-wrap gap-2">
              {% for att in msg.attachments %}
              {% set ext = att.filename.rsplit('.', 1)[-1].lower() if '.' in att.filename else '' %}
              {% if ext in ('jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg') %}
                {% set att_icon = 'image' %}
                {% set att_color = 'bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:hover:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30' %}
                {% set att_label = 'Image' %}
              {% elif ext == 'pdf' %}
                {% set att_icon = 'picture_as_pdf' %}
                {% set att_color = 'bg-red-50 hover:bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:hover:bg-red-500/20 dark:text-red-400 dark:border-red-500/30' %}
                {% set att_label = 'PDF' %}
              {% elif ext in ('zip', 'rar', '7z', 'tar', 'gz') %}
                {% set att_icon = 'folder_zip' %}
                {% set att_color = 'bg-amber-50 hover:bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:hover:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30' %}
                {% set att_label = ext.upper() %}
              {% elif ext in ('doc', 'docx', 'odt', 'txt') %}
                {% set att_icon = 'description' %}
                {% set att_color = 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-500/10 dark:hover:bg-indigo-500/20 dark:text-indigo-400 dark:border-indigo-500/30' %}
                {% set att_label = ext.upper() %}
              {% else %}
                {% set att_icon = 'attach_file' %}
                {% set att_color = 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 dark:border-gray-600' %}
                {% set att_label = ext.upper() if ext else 'File' %}
              {% endif %}
              <a href="{{ url_for('attachment_view', attachment_id=att.id) }}"
                 target="_blank" rel="noopener"
                 class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors {{ att_color }}"
                 title="{{ att.filename }}">
                <span class="material-symbols-outlined text-base leading-none">{{ att_icon }}</span>
                <span>{{ att_label }}</span>
                <span class="opacity-60">.{{ ext }}</span>
              </a>
              {% endfor %}
            </div>
            {% endif %}
          </div>

          {# Hover action bar #}
          <div class="flex flex-col gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
            <button type="button"
                    title="Translate to {{ preferred_language | upper }}"
                    onclick="translateMessage(this, {{ msg.id }}, '{{ preferred_language }}')"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 shadow-sm transition-colors">
              <span class="material-symbols-outlined text-sm" style="font-size:16px">translate</span>
            </button>
            {% if known_languages | length > 1 %}
            <div class="relative">
              <button type="button" onclick="toggleTranslateLangMenu(this)"
                      class="w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 shadow-sm transition-colors">
                <span class="material-symbols-outlined text-sm" style="font-size:16px">expand_more</span>
              </button>
              <div class="translate-lang-menu hidden absolute {{ 'right-0' if outbound else 'left-0' }} top-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10 py-1 min-w-[80px]">
                {% for lang in known_languages %}
                {% if lang != preferred_language %}
                <button type="button"
                        class="w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                        onclick="translateMessage(this.closest('.relative').previousElementSibling, {{ msg.id }}, '{{ lang }}'); this.closest('.translate-lang-menu').classList.add('hidden')">
                  {{ lang | upper }}
                </button>
                {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    {# -- Reply bar -- #}
    <div id="reply-bar" class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-6 py-3 flex-shrink-0 relative minimized" style="transition:none">
      {# Minimize/expand toggle #}
      <button type="button" id="reply-bar-toggle" onclick="toggleReplyBarMinimize()"
              class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 flex items-center justify-center bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-full shadow-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors z-10"
              title="Minimize reply area">
        <span class="material-symbols-outlined reply-toggle-icon transition-transform duration-150" style="font-size:16px">expand_more</span>
      </button>
      <span id="draft-word-count" class="hidden absolute -top-3 left-1/2 translate-x-5 text-[10px] text-brand-500 dark:text-brand-400 font-medium bg-white dark:bg-gray-700 px-1.5 py-0.5 rounded-full border border-brand-200 dark:border-brand-500/30 shadow-sm z-10"></span>

      {# Tool strip — compact icon buttons that expand panels on click #}
      <div class="reply-bar-tools flex items-center gap-1 mb-2">
        {% if id_product %}
        <button type="button" onclick="toggleReplyTool('quick-reply-container')"
                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors"
                title="Quick Reply">
          <span class="material-symbols-outlined text-sm">quickreply</span>
          <span class="hidden sm:inline">Quick Reply</span>
        </button>
        {% endif %}
        <button type="button" onclick="toggleReplyTool('link-builder-container')"
                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors"
                title="Insert Product Link">
          <span class="material-symbols-outlined text-sm">link</span>
          <span class="hidden sm:inline">Product Link</span>
        </button>
      </div>

      {# Collapsible: Quick Reply panel #}
      {% if id_product %}
      <div class="hidden mb-2" id="quick-reply-container">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">quickreply</span>
          <select id="quick-reply-select"
                  class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">-- Quick Reply --</option>
          </select>
        </div>
      </div>
      {% endif %}

      {# Collapsible: Product URL builder panel #}
      <div class="hidden mb-2" id="link-builder-container">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">link</span>
          <select id="link-product-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none max-w-[220px]">
            <option value="">Loading products…</option>
          </select>
          <select id="link-lang-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none w-16">
            {% set _link_langs = ['en','es','fr','de','it','pt','nl','pl','ru','ar','ca','cs','da','el','fi','he','hr','hu','id','ja','ko','no','ro','sk','sv','tr','uk','zh'] %}
            {% for lang in _link_langs %}
            <option value="{{ lang }}" {% if lang == (customer_language or 'en') %}selected{% endif %}>{{ lang | upper }}</option>
            {% endfor %}
          </select>
          <select id="link-platform-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="addons" selected>Addons</option>
            <option value="website" disabled>Website (soon)</option>
          </select>
          <button type="button" onclick="insertProductLink()"
                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
            <span class="material-symbols-outlined text-sm">add_link</span>
            Insert
          </button>
        </div>
      </div>

      {# Editor — full width #}
      <div class="w-full">
        <input type="file" id="reply-attachment" class="hidden"
               accept="image/*,.pdf,.doc,.docx,.zip,.txt"
               onchange="onAttachmentSelected(this)">
        <div id="reply-editor"></div>
        <div id="attachment-chip" class="hidden items-center gap-2 mt-2 px-3 py-1.5 rounded-lg bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 text-xs text-blue-700 dark:text-blue-400 w-fit">
          <span class="material-symbols-outlined text-sm">attach_file</span>
          <span id="attachment-chip-name" class="max-w-[220px] truncate font-medium"></span>
          <span id="attachment-chip-size" class="text-blue-500 dark:text-blue-400 opacity-75"></span>
          <button type="button" onclick="clearAttachment()"
                  class="ml-1 text-blue-400 dark:text-blue-500 hover:text-blue-700 dark:hover:text-blue-300 leading-none" title="Remove attachment">
            <span class="material-symbols-outlined text-sm">close</span>
          </button>
        </div>

        {# Draft translation result panel #}
        <div id="draft-translate-panel" class="hidden mt-2 pt-2 border-t border-gray-100 dark:border-gray-700 space-y-2">
          <input type="hidden" id="draft-target-lang" value="{{ customer_language or preferred_language }}">
          <div id="draft-translation-result" class="hidden">
            <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-3 text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap" id="draft-translation-text"></div>
            <div class="flex items-center gap-2 mt-1.5">
              <button type="button" onclick="useDraftTranslation()"
                      class="inline-flex items-center gap-1 text-xs font-medium text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">arrow_upward</span>
                Use translation
              </button>
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="useDualLanguage()"
                      title="Insert translated text + separator + original text into editor"
                      class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">translate</span>
                Dual language
              </button>
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="copyToClipboard(document.getElementById('draft-translation-text').innerText)"
                      class="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">content_copy</span>
                Copy
              </button>
            </div>
          </div>
        </div>
      </div>

      {# Action bar — horizontal below editor #}
      {% set _translate_lang = customer_language or preferred_language %}
      <div class="reply-bar-actions flex items-center gap-2 mt-2">
        {# Attach #}
        <button type="button" onclick="document.getElementById('reply-attachment').click()"
                title="Attach a file (image, PDF, doc, zip — max 10 MB)"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
          <span class="material-symbols-outlined text-sm">attach_file</span>
          Attach
        </button>

        {# Translate — with dropdown #}
        <div class="flex rounded-lg border border-blue-200 dark:border-blue-500/30 overflow-visible">
          <button type="button"
                  onclick="translateDraftTo(document.getElementById('draft-target-lang').value)"
                  title="Translate draft to customer language"
                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
            <span class="material-symbols-outlined text-sm">translate</span>
            <span id="translate-badge" class="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30">{{ _translate_lang | upper }}</span>
          </button>
          {% set _all_common_langs = ['ar','ca','cs','da','de','el','en','es','fi','fr','he','hr','hu','id','it','ja','ko','nl','no','pl','pt','ro','ru','sk','sv','tr','uk','zh'] %}
          <div class="relative border-l border-blue-200 dark:border-blue-500/30">
            <button type="button" onclick="toggleDraftLangMenu(this)"
                    class="h-full px-1.5 text-blue-500 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors flex items-center">
              <span class="material-symbols-outlined text-sm" style="font-size:16px">expand_more</span>
            </button>
            <div class="draft-lang-menu hidden absolute right-0 bottom-full mb-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-20 py-1 min-w-[80px] max-h-52 overflow-y-auto">
              {% for lang in _all_common_langs %}
              <button type="button"
                      class="w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                      onclick="translateDraftTo('{{ lang }}'); this.closest('.draft-lang-menu').classList.add('hidden')">
                {{ lang | upper }}
              </button>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="flex-1"></div>

        {# Send — right-aligned #}
        <button type="button" id="send-reply-btn" onclick="sendReply(window._quill)"
                title="Send reply (Ctrl+Enter)"
                class="inline-flex items-center gap-1.5 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">send</span>
          Send Reply
        </button>
      </div>

      {# Quill.js WYSIWYG Editor #}
      <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
      <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
      <style>
        #reply-editor .ql-editor { min-height: 80px; max-height: 200px; overflow-y: auto; transition: min-height 0.15s ease, max-height 0.15s ease; }
        #reply-editor .ql-editor .sig-line { color: #9ca3af; }
        /* Minimized state — compact but readable (~3 lines visible) */
        #reply-bar.minimized .ql-toolbar.ql-snow { display: none; }
        #reply-bar.minimized #reply-editor .ql-editor { min-height: 60px; max-height: 72px; overflow: hidden; cursor: text; }
        #reply-bar.minimized .reply-bar-tools,
        #reply-bar.minimized .reply-bar-actions,
        #reply-bar.minimized #attachment-chip,
        #reply-bar.minimized #draft-translate-panel,
        #reply-bar.minimized #quick-reply-container,
        #reply-bar.minimized #link-builder-container { display: none; }
        #reply-bar.minimized { padding-top: 4px; padding-bottom: 4px; }
        #reply-bar.minimized .reply-toggle-icon { transform: rotate(180deg); }
        /* Draft indicator when minimized */
        #reply-bar.minimized.has-draft { border-top-color: #6366f1; border-top-width: 2px; }
        .dark #reply-bar.minimized.has-draft { border-top-color: #818cf8; }
      </style>
      <script>
        window._quill = new Quill('#reply-editor', {
          theme: 'snow',
          placeholder: 'Write your reply...',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['clean']
            ],
            clipboard: { matchers: [] }
          }
        });

        // Block Quill from ever inserting images — strip them via clipboard matcher
        window._quill.clipboard.addMatcher('IMG', function() {
          var Delta = Quill.import('delta');
          return new Delta();
        });

        // Guard: prevent selection-change from expanding during init
        window._replyBarReady = false;

        // Expand reply bar on focus — only after init is complete
        window._quill.on('selection-change', function(range) {
          if (!window._replyBarReady) return;
          var replyBar = document.getElementById('reply-bar');
          if (!replyBar) return;
          if (range) {
            replyBar.classList.remove('minimized');
            updateDraftWordCount();
          }
        });

        // Style signature + update draft word count on every text change
        window._quill.on('text-change', function() {
          if (typeof styleSignature === 'function') styleSignature();
          updateDraftWordCount();
        });

        // Ctrl+Enter to send
        window._quill.keyboard.addBinding({ key: 'Enter', ctrlKey: true }, function() {
          sendReply(window._quill);
          return false;
        });

        // Insert signature on load — poll until app.js has loaded initSignature
        (function waitForAppJs() {
          if (typeof initSignature === 'function') {
            initSignature();
            window._quill.root.scrollTop = 0;
            // Enable transitions after paint (reply-bar starts minimized via HTML class)
            setTimeout(function() {
              document.getElementById('reply-bar').style.transition = '';
              window._replyBarReady = true;
            }, 200);
          } else {
            setTimeout(waitForAppJs, 50);
          }
        })();

        // Toggle collapsible tool panels (Quick Reply, Link Builder)
        function toggleReplyTool(containerId) {
          var el = document.getElementById(containerId);
          if (!el) return;
          var isHidden = el.classList.contains('hidden');
          // Close all tool panels first
          ['quick-reply-container', 'link-builder-container'].forEach(function(id) {
            var panel = document.getElementById(id);
            if (panel) panel.classList.add('hidden');
          });
          // Toggle the requested one
          if (isHidden) el.classList.remove('hidden');
        }

        // --- Reply bar minimize/expand logic ---
        (function() {
          var replyBar = document.getElementById('reply-bar');
          var thread = document.getElementById('message-thread');
          var editor = document.getElementById('reply-editor');
          if (!replyBar || !thread || !editor) return;

          function minimizeReply() {
            if (window._quill) window._quill.blur();
            replyBar.classList.add('minimized');
            // Draft indicator
            var hasDraft = typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim();
            replyBar.classList.toggle('has-draft', !!hasDraft);
            updateDraftWordCount();
          }

          function expandReply() {
            replyBar.classList.remove('minimized');
            var countEl = document.getElementById('draft-word-count');
            if (countEl) countEl.classList.add('hidden');
          }

          // Minimize when user clicks on the message thread
          thread.addEventListener('mousedown', function(e) {
            if (e.target.closest('button, a, select, input')) return;
            minimizeReply();
          });

          // Minimize on sustained scroll of message thread
          var scrollTimer = null;
          thread.addEventListener('scroll', function() {
            if (window._quill && window._quill.hasFocus()) return;
            if (!replyBar.classList.contains('minimized')) {
              if (scrollTimer) clearTimeout(scrollTimer);
              scrollTimer = setTimeout(minimizeReply, 300);
            }
          }, { passive: true });

          // Expand when clicking editor area
          editor.addEventListener('mousedown', function() { expandReply(); });

          // Expand when clicking any reply-bar interactive element
          replyBar.addEventListener('click', function(e) {
            if (e.target.closest('button, select, input, .ql-toolbar') && e.target.id !== 'reply-bar-toggle') {
              expandReply();
            }
          });
        })();

        // Manual toggle
        function toggleReplyBarMinimize() {
          var replyBar = document.getElementById('reply-bar');
          if (!replyBar) return;
          if (replyBar.classList.contains('minimized')) {
            replyBar.classList.remove('minimized');
            document.getElementById('draft-word-count')?.classList.add('hidden');
            if (window._quill) window._quill.focus();
          } else {
            replyBar.classList.add('minimized');
            if (window._quill) window._quill.blur();
            var hasDraft = typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim();
            replyBar.classList.toggle('has-draft', !!hasDraft);
            updateDraftWordCount();
          }
        }

        // Draft word count badge (visible only when minimized with draft)
        function updateDraftWordCount() {
          var countEl = document.getElementById('draft-word-count');
          var replyBar = document.getElementById('reply-bar');
          if (!countEl || !replyBar) return;
          var body = typeof getBodyWithoutSignature === 'function' ? getBodyWithoutSignature().trim() : '';
          if (body && replyBar.classList.contains('minimized')) {
            var words = body.split(/\s+/).filter(Boolean).length;
            countEl.textContent = 'Draft: ' + words + ' word' + (words !== 1 ? 's' : '');
            countEl.classList.remove('hidden');
          } else {
            countEl.classList.add('hidden');
          }
        }

        // Warn before navigating away with unsent draft
        window.addEventListener('beforeunload', function(e) {
          if (typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim()) {
            e.preventDefault();
            e.returnValue = '';
          }
        });

        // Paste image detection — capture on document to fire before ANY Quill handler
        document.addEventListener('paste', function(e) {
          // Only act when focus is inside the reply editor
          var editor = document.querySelector('#reply-editor');
          if (!editor || !editor.contains(e.target)) return;
          var items = (e.clipboardData || {}).items;
          if (!items) return;
          for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image/') === 0) {
              e.preventDefault();
              e.stopImmediatePropagation();
              var file = items[i].getAsFile();
              if (!file) return;
              showPasteImageDialog(file);
              return;
            }
          }
        }, true);

        // Quick reply integration - populate Quill editor
        const quickReplySelect = document.getElementById('quick-reply-select');
        if (quickReplySelect) {
          quickReplySelect.addEventListener('change', function(e) {
            const messageId = e.target.value;
            if (!messageId) return;
            fetch(`/api/predefined-messages/${messageId}`)
              .then(res => res.json())
              .then(data => {
                window._quill.root.innerHTML = data.body + buildSignatureHtml();
                styleSignature();
                document.getElementById('reply-bar')?.classList.remove('minimized');
                e.target.value = '';
              })
              .catch(err => console.error('Failed to load predefined message:', err));
          });
        }
      </script>

      {# Paste image confirmation dialog #}
      <div id="paste-image-dialog" class="hidden fixed inset-0 z-[200] flex items-center justify-center">
        <div class="absolute inset-0 bg-black/40" onclick="closePasteImageDialog()"></div>
        <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-[340px] overflow-hidden">
          <div class="px-5 py-4">
            <div class="flex items-center gap-2 mb-3">
              <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">image</span>
              <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Image Preview</h3>
            </div>
            <div class="flex justify-center mb-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 p-2">
              <img id="paste-image-preview" src="" alt="Pasted image" class="max-h-48 max-w-full rounded object-contain">
            </div>
            <p class="text-xs text-gray-600 dark:text-gray-400 text-center">Do you want to add this image as an attachment?</p>
          </div>
          <div class="flex border-t border-gray-200 dark:border-gray-700">
            <button type="button" onclick="closePasteImageDialog()"
                    class="flex-1 px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-r border-gray-200 dark:border-gray-700">
              Cancel
            </button>
            <button type="button" onclick="confirmPasteImage()"
                    class="flex-1 px-4 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors">
              Add it
            </button>
          </div>
        </div>
      </div>
      <script>
        var _pastedImageFile = null;

        function showPasteImageDialog(file) {
          _pastedImageFile = file;
          var reader = new FileReader();
          reader.onload = function(e) {
            document.getElementById('paste-image-preview').src = e.target.result;
            document.getElementById('paste-image-dialog').classList.remove('hidden');
          };
          reader.readAsDataURL(file);
        }

        function closePasteImageDialog() {
          document.getElementById('paste-image-dialog').classList.add('hidden');
          document.getElementById('paste-image-preview').src = '';
          _pastedImageFile = null;
        }

        function confirmPasteImage() {
          if (!_pastedImageFile) { closePasteImageDialog(); return; }
          // Create a DataTransfer to inject the file into the hidden file input
          var dt = new DataTransfer();
          // Give it a meaningful filename
          var ext = _pastedImageFile.type.split('/')[1] || 'png';
          if (ext === 'jpeg') ext = 'jpg';
          var namedFile = new File([_pastedImageFile], 'pasted-image.' + ext, { type: _pastedImageFile.type });
          dt.items.add(namedFile);
          var input = document.getElementById('reply-attachment');
          input.files = dt.files;
          onAttachmentSelected(input);
          closePasteImageDialog();
        }

        // Close on Escape
        document.addEventListener('keydown', function(e) {
          if (e.key === 'Escape' && !document.getElementById('paste-image-dialog').classList.contains('hidden')) {
            closePasteImageDialog();
          }
        });
      </script>
    </div>
  </div>

  {# ============== Right sidebar ============== #}
  <aside id="ticket-sidebar" class="w-80 border-l border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-shrink-0 overflow-y-auto">

    {# -- Missing Info Checklist -- #}
    {% if suggestions %}
      {% set latest = suggestions|sort(attribute='created_at', reverse=True)|first %}
      {% set latest_cls = latest.classification_json|fromjson %}
      {% if latest_cls.missing_info and latest_cls.missing_info|length > 0 %}
    <div id="missing-info" data-testid="missing-info" class="p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-1.5 mb-2">
        <span class="material-symbols-outlined text-sm text-amber-500">warning</span>
        <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Missing Info</h3>
      </div>
      <div class="flex flex-wrap gap-1.5">
        {% for item in latest_cls.missing_info %}
        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-500/30">{{ item }}</span>
        {% endfor %}
      </div>
    </div>
      {% endif %}
    {% endif %}

    {# -- AI Assistant -- #}
    <div id="ai-assistant" class="p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-1.5 mb-3">
        <span class="material-symbols-outlined text-sm text-purple-500 dark:text-purple-400">psychology</span>
        <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">AI Assistant</h3>
      </div>
      <button id="generate-ai-btn" type="button" onclick="generateAI()"
              class="w-full inline-flex items-center justify-center gap-2 px-3 py-2 mb-3 text-xs font-semibold text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors">
        <span class="material-symbols-outlined text-sm">auto_awesome</span>
        Generate Suggestion
      </button>

      <div id="ai-suggestions">
        {% if suggestions %}
          {% for s in suggestions|sort(attribute='created_at', reverse=True) %}
          {% set cls = s.classification_json|fromjson %}
          <div class="bg-white dark:bg-gray-800 border border-purple-200 dark:border-purple-500/30 rounded-xl p-4 mb-3 {{ 'ring-2 ring-purple-200 dark:ring-purple-500/30' if loop.first }}" data-testid="ai-suggestion" data-suggestion-id="{{ s.id }}">
            <p class="text-[11px] text-gray-400 dark:text-gray-500 mb-2">{{ s.created_at.strftime('%Y-%m-%d %H:%M') }} &middot; {{ s.model_used }}</p>
            <p class="text-xs text-gray-700 dark:text-gray-300 mb-2"><span class="font-semibold">Summary:</span> {{ s.summary }}</p>
            <details class="mb-2">
              <summary class="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">Classification</summary>
              <pre class="text-[11px] text-gray-600 dark:text-gray-400 mt-1 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-x-auto">{{ s.classification_json }}</pre>
            </details>
            {% if s.draft_reply %}
            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 text-xs text-gray-700 dark:text-gray-300 mb-2 whitespace-pre-wrap">{{ s.draft_reply }}</div>
            {% else %}
            <div class="mb-2">
              <button type="button" onclick="generateDraft({{ s.id }}, this)"
                      class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-semibold text-purple-700 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10 border border-purple-200 dark:border-purple-500/30 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-500/20 transition-colors">
                <span class="material-symbols-outlined text-sm">edit_note</span>
                Generate Draft Reply
              </button>
            </div>
            {% endif %}
            <div class="flex items-center gap-2 flex-wrap">
              {% if s.draft_reply %}
              <button type="button" onclick="useAsReply(this)"
                      class="inline-flex items-center gap-1 text-xs font-medium text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 transition-colors">
                <span class="material-symbols-outlined text-sm">reply</span>
                Use as Reply
              </button>
              {% endif %}
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="copyToClipboard(this.closest('[data-testid=ai-suggestion]').querySelector('.bg-gray-50').innerText)"
                      class="inline-flex items-center gap-1 text-xs font-medium text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 transition-colors">
                <span class="material-symbols-outlined text-sm">content_copy</span>
                Copy Reply
              </button>
              {% if cls.is_template_candidate %}
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="saveAsTemplate({{ s.id }}, this)"
                      class="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 transition-colors">
                <span class="material-symbols-outlined text-sm">bookmark_add</span>
                Save as Quick Reply
              </button>
              {% endif %}
              {% if cls.could_be_guide %}
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="generateGuide({{ s.id }}, this)"
                      class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
                <span class="material-symbols-outlined text-sm">menu_book</span>
                Generate Guide
              </button>
              {% endif %}
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="sendFeedback({{ s.id }}, 'thumbs_up', this)"
                      class="inline-flex items-center gap-0.5 text-xs text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors feedback-btn"
                      data-suggestion-id="{{ s.id }}" data-type="thumbs_up" title="Good suggestion">
                <span class="material-symbols-outlined text-sm">thumb_up</span>
              </button>
              <button type="button" onclick="sendFeedback({{ s.id }}, 'thumbs_down', this)"
                      class="inline-flex items-center gap-0.5 text-xs text-gray-400 dark:text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors feedback-btn"
                      data-suggestion-id="{{ s.id }}" data-type="thumbs_down" title="Bad suggestion">
                <span class="material-symbols-outlined text-sm">thumb_down</span>
              </button>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <p class="text-xs text-gray-400 dark:text-gray-500 no-suggestions">No suggestions yet. Click Generate to create one.</p>
        {% endif %}
      </div>
    </div>

    {# -- Topics (collapsible, closed by default) -- #}
    {% if segments|length > 1 %}
    <details id="topics-section" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 group">
      <summary class="p-4 cursor-pointer list-none flex items-center gap-1.5
                      [&::-webkit-details-marker]:hidden hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-sm text-purple-500 dark:text-purple-400">topic</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">Topics</span>
        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-bold bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400">{{ segments|length }}</span>
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform">expand_more</span>
      </summary>
      <div class="px-4 pb-3 space-y-1.5">
        {% for seg in segments %}
        <button type="button" data-seg-btn="{{ seg.index }}"
                onclick="document.getElementById('segment-{{ seg.index }}').scrollIntoView({behavior:'smooth', block:'center'})"
                class="seg-sidebar-btn w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors group/topic">
          <span class="flex-shrink-0 w-5 h-5 rounded-full bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 flex items-center justify-center text-[10px] font-bold">{{ seg.index + 1 }}</span>
          <span class="flex-1 text-xs text-gray-700 dark:text-gray-300 truncate group-hover/topic:text-purple-700 dark:group-hover/topic:text-purple-300">{{ seg.label }}</span>
          <span class="text-[10px] text-gray-400 dark:text-gray-500">{{ seg.message_count }} msg</span>
        </button>
        {% endfor %}
      </div>
    </details>
    {% endif %}

    {# -- Tags -- #}
    <div id="tags-section" class="p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Tags</h3>
      <div id="tags-display" class="flex flex-wrap gap-1.5 mb-3">
        {% for t in tags %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium">{{ t }}</span>
        {% else %}
          <span class="text-xs text-gray-400 dark:text-gray-500">No tags</span>
        {% endfor %}
      </div>
      <div class="flex gap-1.5">
        <input id="tags-input" type="text" value="{{ tags|join(', ') if tags else '' }}" placeholder="bug, urgent, ..."
               class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        <button type="button" onclick="saveTags(document.getElementById('tags-input'))"
                class="px-2.5 py-1.5 text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
          Save
        </button>
      </div>
    </div>

    {# -- Properties (collapsible) -- #}
    <details id="properties-section" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 group" open>
      <summary class="p-4 cursor-pointer list-none flex items-center justify-between
                      text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider
                      hover:text-gray-700 dark:hover:text-gray-300 [&::-webkit-details-marker]:hidden">
        Properties
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform">
          expand_more
        </span>
      </summary>
      <div class="px-4 pb-4">

        {# Customer group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5 mt-0">Customer</p>
        <dl class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Website</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5">
              {% set ws_href = ticket.thread.customer_website | normalize_url %}
              {% if ws_href %}
              {% if site_check and site_check.is_online == true %}
                {% set tip = 'Online' %}
                {% if site_check.error_message %}{% set tip = 'Online (' ~ site_check.http_status ~ ' — ' ~ site_check.error_message ~ ')' %}
                {% elif site_check.http_status %}{% set tip = 'Online (' ~ site_check.http_status ~ ', ' ~ (site_check.response_time_ms or '?') ~ 'ms)' %}{% endif %}
                <span class="inline-block w-2 h-2 rounded-full bg-green-500" title="{{ tip }}"></span>
              {% elif site_check and site_check.is_online == false %}
                {% set tip = 'Offline' %}
                {% if site_check.error_message %}{% set tip = 'Offline — ' ~ site_check.error_message %}{% endif %}
                <span class="inline-block w-2 h-2 rounded-full bg-red-500" title="{{ tip }}"></span>{% endif %}
              <a href="{{ ws_href }}" target="_blank" rel="noopener" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 underline">
                {{ ticket.thread.customer_website | truncate(30) }}
              </a>
              {% else %}-{% endif %}
            </dd>
          </div>
          {% if ticket.thread.product_quantity is not none %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Quantity Purchased</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">
              {{ ticket.thread.product_quantity }}
              {% if ticket.thread.product_quantity_refunded %}
                <span class="text-red-500 dark:text-red-400 text-xs">({{ ticket.thread.product_quantity_refunded }} refunded)</span>
              {% endif %}
            </dd>
          </div>
          {% endif %}
          {% if customer_language %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Customer Language</dt>
            <dd>
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-500/30">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">translate</span>
                {{ customer_language | upper }}
              </span>
            </dd>
          </div>
          {% endif %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">First Seen</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.first_seen_at.strftime('%Y-%m-%d %H:%M') }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Last Activity</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.last_activity_at.strftime('%Y-%m-%d %H:%M') }}</dd>
          </div>
        </dl>

        {# Customer Value group #}
        {% if customer_profile %}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Customer Value</p>
        <dl data-testid="customer-value" class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Total Revenue</dt>
            <dd class="font-medium text-emerald-700 dark:text-emerald-400">&euro;{{ customer_profile.total_revenue or '0' }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Total Orders</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.total_orders }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Products Purchased</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.total_products_purchased }}</dd>
          </div>
          {% if customer_profile.first_order_date %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Customer Since</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ customer_profile.first_order_date.strftime('%Y-%m-%d') }}</dd>
          </div>
          {% endif %}
          {% if customer_profile.country_code %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Country</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.country_code | upper }}</dd>
          </div>
          {% endif %}
        </dl>

        {% if customer_orders %}
        <details class="mb-4">
          <summary class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-600 dark:hover:text-gray-300">
            Order History ({{ customer_orders|length }})
          </summary>
          <div class="mt-2 space-y-1.5">
            {% for o in customer_orders %}
            <div class="flex items-center justify-between text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1.5">
              <div class="truncate flex-1 mr-2">
                <span class="font-medium text-gray-900 dark:text-gray-100">{{ o.product_name }}</span>
                {% if o.quantity and o.quantity > 1 %}<span class="text-gray-400 dark:text-gray-500">x{{ o.quantity }}</span>{% endif %}
              </div>
              <div class="text-right whitespace-nowrap">
                <span class="font-medium text-emerald-700 dark:text-emerald-400">&euro;{{ o.amount or '0' }}</span>
                {% if o.order_date %}
                <span class="text-gray-400 dark:text-gray-500 ml-1">{{ o.order_date.strftime('%Y-%m-%d') }}</span>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>
        </details>
        {% endif %}
        {% endif %}

        {# Product group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Product</p>
        <dl class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Name</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">
              <span class="inline-flex items-center gap-1.5">
                {% if product and product.product_type == 'business_care' %}
                <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0">
                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
                {% elif product and product.pico_url %}
                <img src="{{ product.pico_url }}" alt="" class="w-8 h-8 rounded-lg flex-shrink-0" onerror="this.style.display='none'">
                {% endif %}
                {{ ticket.thread.product_name or '-' }}
              </span>
            </dd>
          </div>
          {% if id_product %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">View on Addons</dt>
            <dd>
              <a href="https://addons.prestashop.com/en/product.php?id_product={{ id_product }}"
                 target="_blank" rel="noopener"
                 class="inline-flex items-center gap-1 text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                <span class="material-symbols-outlined" style="font-size:14px">open_in_new</span>
                Product page
              </a>
            </dd>
          </div>
          {% endif %}
          {% if product and product.current_version %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Module Version</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ product.current_version }}</dd>
          </div>
          {% endif %}
          {% if product and product.avg_rating %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Rating</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ product.avg_rating }} / 5{% if product.total_ratings %} <span class="text-xs text-gray-400 dark:text-gray-500">({{ product.total_ratings }} ratings)</span>{% endif %}</dd>
          </div>
          {% endif %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">PrestaShop Version</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ ticket.thread.ps_version or '-' }}</dd>
          </div>
          {% if ticket.thread.qualification %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Qualification</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 capitalize">{{ ticket.thread.qualification }}</dd>
          </div>
          {% endif %}
        </dl>

        {# Support / SLA group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Support &amp; SLA</p>
        <dl class="space-y-2 text-sm">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Status</dt>
            <dd>
              {% if ticket.thread.is_support_expired %}
                <span class="inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
                  <span class="material-symbols-outlined text-sm">error</span>Expired
                </span>
              {% else %}
                <span class="inline-flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
                  <span class="material-symbols-outlined text-sm">check_circle</span>Active
                </span>
              {% endif %}
            </dd>
          </div>
          {% if ticket.thread.support_type %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Support Type</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ ticket.thread.support_type }}</dd>
          </div>
          {% endif %}
          {% if ticket.thread.zen_nb_days_left is not none %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Days Left</dt>
            <dd class="font-medium {% if ticket.thread.zen_nb_days_left < 7 %}text-red-600 dark:text-red-400{% elif ticket.thread.zen_nb_days_left < 30 %}text-amber-600 dark:text-amber-400{% else %}text-gray-900 dark:text-gray-100{% endif %}">
              {{ ticket.thread.zen_nb_days_left }} days
            </dd>
          </div>
          {% endif %}
          {% if ticket.thread.zen_purchase_date %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Purchase Date</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.thread.zen_purchase_date.strftime('%Y-%m-%d') }}</dd>
          </div>
          {% endif %}
        </dl>

      </div>
    </details>

  </aside>
</div>

{% if id_product %}
<script>
(function() {
  fetch('/api/predefined-messages/for-product/{{ id_product }}')
    .then(function(r) { return r.json(); })
    .then(function(msgs) {
      var select = document.getElementById('quick-reply-select');
      if (!select) return;
      msgs.forEach(function(m) {
        var opt = document.createElement('option');
        opt.value = m.id;
        opt.textContent = m.title + (m.is_global ? ' (Global)' : '');
        select.appendChild(opt);
      });
    })
    .catch(function() {});
})();
</script>
{% endif %}

<script>
(function() {
  // Auto-scroll to unread marker
  var marker = document.getElementById('unread-marker');
  if (marker) marker.scrollIntoView({behavior: 'smooth', block: 'center'});

  // Topic overlay: single sticky pill that crossfades between segments
  var overlay = document.getElementById('topic-overlay');
  var overlayText = document.getElementById('topic-overlay-text');
  var summaryText = document.getElementById('topic-summary-text');
  var container = document.getElementById('message-thread');
  if (!overlay || !overlayText || !container) return;

  var markers = container.querySelectorAll('.segment-marker');
  if (markers.length < 2) return;

  // Build label + summary maps from window._segmentData
  var segLabels = {};
  var segSummaries = {};
  (window._segmentData || []).forEach(function(seg) {
    segLabels[seg.index] = seg.label || ('Topic ' + (seg.index + 1));
    segSummaries[seg.index] = seg.summary || '';
  });

  var currentSeg = -1;
  var summaryPanel = document.getElementById('topic-summary-panel');
  var chevron = document.getElementById('topic-overlay-chevron');
  var pillBtn = document.getElementById('topic-overlay-pill');
  var sidebarBtns = document.querySelectorAll('.seg-sidebar-btn');

  function closeSummary() {
    if (summaryPanel) summaryPanel.classList.add('hidden');
    if (chevron) chevron.style.transform = '';
    if (pillBtn) pillBtn.setAttribute('aria-expanded', 'false');
  }

  function highlightSidebarTopic(idx) {
    sidebarBtns.forEach(function(btn) {
      var btnIdx = parseInt(btn.dataset.segBtn, 10);
      if (btnIdx === idx) {
        btn.classList.add('bg-purple-50', 'ring-1', 'ring-purple-200');
      } else {
        btn.classList.remove('bg-purple-50', 'ring-1', 'ring-purple-200');
      }
    });
  }

  // Toggle summary panel on pill click
  if (pillBtn && summaryPanel) {
    pillBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      if (summaryText && currentSeg >= 0) {
        var txt = segSummaries[currentSeg] || '';
        if (!txt) return;
        summaryText.textContent = txt;
      }
      var isHidden = summaryPanel.classList.contains('hidden');
      if (isHidden) {
        summaryPanel.classList.remove('hidden');
        if (chevron) chevron.style.transform = 'rotate(180deg)';
        pillBtn.setAttribute('aria-expanded', 'true');
      } else {
        closeSummary();
      }
    });
  }

  // Escape key dismisses summary panel
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && summaryPanel && !summaryPanel.classList.contains('hidden')) {
      closeSummary();
    }
  });

  // Click outside overlay dismisses summary panel
  document.addEventListener('click', function(e) {
    if (summaryPanel && !summaryPanel.classList.contains('hidden') && overlay && !overlay.contains(e.target)) {
      closeSummary();
    }
  });

  function updateOverlay() {
    var bestIdx = -1;
    var cRect = container.getBoundingClientRect();

    markers.forEach(function(m) {
      var idx = parseInt(m.dataset.segIndex, 10);
      var rect = m.getBoundingClientRect();
      if (rect.top <= cRect.top + 40) {
        bestIdx = idx;
      }
    });

    if (bestIdx < 0) {
      overlay.style.opacity = '0';
      closeSummary();
      highlightSidebarTopic(-1);
      currentSeg = -1;
      return;
    }

    // Check if the inline marker for bestIdx is still visible
    var activeMarker = document.getElementById('segment-' + bestIdx);
    if (activeMarker) {
      var mRect = activeMarker.getBoundingClientRect();
      if (mRect.top >= cRect.top && mRect.bottom <= cRect.bottom) {
        overlay.style.opacity = '0';
        closeSummary();
        // Still highlight sidebar even when inline marker is visible
        highlightSidebarTopic(bestIdx);
        currentSeg = -1;
        return;
      }
    }

    if (bestIdx !== currentSeg) {
      overlay.style.opacity = '0';
      closeSummary();
      setTimeout(function() {
        overlayText.textContent = segLabels[bestIdx] || '';
        if (summaryText) summaryText.textContent = segSummaries[bestIdx] || '';
        overlay.style.opacity = '1';
      }, 150);
      currentSeg = bestIdx;
      highlightSidebarTopic(bestIdx);
    } else {
      overlay.style.opacity = '1';
    }
  }

  container.addEventListener('scroll', updateOverlay, {passive: true});
  setTimeout(updateOverlay, 100);
})();
</script>

<script>
// Reply draft persistence — save Quill content to sessionStorage on every change
(function() {
  var ticketId = window._ticketId;
  if (!ticketId) return;
  var storageKey = 'reply_draft_' + ticketId;

  function waitForQuill() {
    if (!window._quill) { setTimeout(waitForQuill, 100); return; }
    var quill = window._quill;

    // Restore saved draft (only if editor still has just the signature or is empty)
    var saved = sessionStorage.getItem(storageKey);
    if (saved) {
      try {
        var draft = JSON.parse(saved);
        // Only restore if the current content is just the signature
        var currentText = quill.getText().trim();
        var sigText = (window._replySignature || '').trim();
        var isJustSignature = !currentText || currentText === sigText || currentText.replace(/\n-+\n/g, '\n').trim() === sigText.replace(/\n/g, '\n').trim();
        if (isJustSignature && draft.html) {
          quill.root.innerHTML = draft.html;
          if (typeof styleSignature === 'function') styleSignature();
          var replyBar = document.getElementById('reply-bar');
          if (replyBar) {
            replyBar.classList.add('has-draft');
            updateDraftWordCount();
          }
        }
      } catch(e) {}
    }

    // Save on every text change
    quill.on('text-change', function() {
      var html = quill.root.innerHTML;
      var text = quill.getText().trim();
      var sigText = (window._replySignature || '').trim();
      // Don't persist if only the signature remains
      var isJustSignature = !text || text === sigText || text.replace(/\n-+\n/g, '\n').trim() === sigText.replace(/\n/g, '\n').trim();
      if (isJustSignature) {
        sessionStorage.removeItem(storageKey);
      } else {
        sessionStorage.setItem(storageKey, JSON.stringify({html: html, ts: Date.now()}));
      }
    });

    // Clear draft after successful send
    var origSendReply = window.sendReply;
    if (origSendReply) {
      window.sendReply = function() {
        var result = origSendReply.apply(this, arguments);
        // Clear after a short delay to let the send complete
        setTimeout(function() { sessionStorage.removeItem(storageKey); }, 500);
        return result;
      };
    }
  }
  waitForQuill();
})();
</script>

<script>
function refreshMessages() {
  const btn = document.getElementById('refresh-btn');
  const icon = document.getElementById('refresh-icon');
  btn.disabled = true;
  icon.classList.add('animate-spin');

  const fd = new FormData();
  fd.append('csrf_token', getCsrf());

  fetch('/ticket/{{ ticket.id }}/refresh', {
    method: 'POST',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    body: fd,
    credentials: 'same-origin',
  })
  .then(r => r.json())
  .then(data => {
    if (data.new_messages && data.new_messages.length > 0) {
      data.new_messages.forEach(msg => appendMessage(msg));
      showToast(data.new_count + ' new message' + (data.new_count !== 1 ? 's' : '') + ' loaded', 'success');
    } else {
      showToast('No new messages');
    }
  })
  .catch(err => {
    console.error('Refresh failed:', err);
    showToast('Refresh failed', 'error');
  })
  .finally(() => {
    btn.disabled = false;
    icon.classList.remove('animate-spin');
  });
}

/* ── Review request banner actions ── */
function loadReviewRequest() {
  var lang = window._customerLanguage || 'en';
  var productId = window._ticketProductId || '';
  var url = '/api/review-request-template?lang=' + encodeURIComponent(lang) + '&product_id=' + encodeURIComponent(productId);
  var btn = document.getElementById('load-review-template-btn');
  if (btn) btn.disabled = true;

  fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.found && data.body && window._quill) {
      window._quill.root.innerHTML = '<p>' + data.body.replace(/\n/g, '</p><p>') + '</p>';
      showToast('Review template loaded — personalize and send!', 'success');
    } else {
      showToast('No review template found. Create one in Quick Replies with [Review] prefix.', 'error');
    }
  })
  .catch(function(err) {
    console.error('Failed to load review template:', err);
    showToast('Failed to load review template', 'error');
  })
  .finally(function() {
    if (btn) btn.disabled = false;
  });
}

function markReviewSent() {
  var banner = document.getElementById('review-request-banner');
  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  var fd = new FormData();
  fd.append('action', 'dismiss_review_request');
  fd.append('csrf_token', csrfToken);
  fetch('/ticket/' + window._ticketId, {
    method: 'POST',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    body: fd
  })
  .then(function(resp) { return resp.json(); })
  .then(function(data) {
    if (data.success) {
      if (banner) {
        banner.style.opacity = '0';
        banner.style.transition = 'opacity 0.3s';
        setTimeout(function() { banner.remove(); }, 300);
      }
      // Hide mark-as-read button too
      var readBtn = document.getElementById('mark-as-read-btn');
      if (readBtn) readBtn.style.display = 'none';
      // Update sidebar badge
      var reviewBadge = document.getElementById('sidebar-review-request');
      if (reviewBadge) {
        var count = parseInt(reviewBadge.textContent) || 0;
        if (count <= 1) { reviewBadge.remove(); }
        else { reviewBadge.textContent = count - 1; }
      }
      showToast('Review request marked as sent', 'success');
    }
  })
  .catch(function(err) { console.error('Mark review sent failed:', err); });
}

function dismissReviewBanner() {
  var banner = document.getElementById('review-request-banner');
  // Mark as read via AJAX
  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  var fd = new FormData();
  fd.append('action', 'mark_as_read');
  fd.append('csrf_token', csrfToken);
  fetch('/ticket/' + window._ticketId, {
    method: 'POST',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    body: fd
  })
  .then(function() {
    if (banner) {
      banner.style.opacity = '0';
      banner.style.transition = 'opacity 0.3s';
      setTimeout(function() { banner.remove(); }, 300);
    }
    // Also hide the Mark as Read button
    var readBtn = document.getElementById('mark-as-read-btn');
    if (readBtn) readBtn.style.display = 'none';
  })
  .catch(function(err) { console.error('Dismiss failed:', err); });
}
</script>
{% endblock %}