{% extends "base.html" %}
{% block title %}Inbox{% endblock %}
{% block content %}
<div id="inbox-page" class="p-3 sm:p-6">
  {# ── Header row ── #}
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-5">
    <div class="flex items-center gap-3">
      <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100">Inbox — {% if filters.presale %}Pre Sale Messages{% elif filters.status == 'open' %}Open{% elif filters.status == 'in_progress' %}In Progress{% elif filters.status == 'waiting_customer' %}Waiting{% elif filters.status == 'closed' %}Closed{% else %}All Tickets{% endif %}</h2>
      {% if last_msg_sync %}
      <span class="text-xs text-gray-400 dark:text-gray-500">
        last synced <span data-ts="{{ last_msg_sync }}"></span>
        <a href="#" onclick="inlineSync('messages',this);return false" class="text-brand-500 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 ml-0.5">(sync now)</a>
      </span>
      {% endif %}
    </div>
    <div class="flex items-center gap-4">
      <span class="inbox-count text-sm text-gray-500 dark:text-gray-400">{{ total_count }} ticket{{ 's' if total_count != 1 }}</span>
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400 mr-2">Sort by:</label>
        <select id="sortSelect" onchange="changeSorting()" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
          <option value="default" {% if filters.sort == 'default' or not filters.sort %}selected{% endif %}>Default (Status & Priority)</option>
          <option value="smart_priority" {% if filters.sort == 'smart_priority' %}selected{% endif %}>Smart Priority</option>
          <option value="newest_first" {% if filters.sort == 'newest_first' %}selected{% endif %}>Newest First</option>
          <option value="oldest_first" {% if filters.sort == 'oldest_first' %}selected{% endif %}>Oldest First</option>
          <option value="recently_updated" {% if filters.sort == 'recently_updated' %}selected{% endif %}>Recently Updated</option>
        </select>
      </div>
    </div>
  </div>

  {# ── Filters ── #}
  <form id="inbox-filter-form" method="get" action="{{ url_for('inbox') }}" class="flex flex-wrap items-end gap-3 mb-5">
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</label>
      <select name="status" id="inbox-status-filter" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">All</option>
        <option value="open" {% if filters.status=='open' %}selected{% endif %}>Open</option>
        <option value="in_progress" {% if filters.status=='in_progress' %}selected{% endif %}>In Progress</option>
        <option value="waiting_customer" {% if filters.status=='waiting_customer' %}selected{% endif %}>Waiting</option>
        <option value="closed" {% if filters.status=='closed' %}selected{% endif %}>Closed</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Priority</label>
      <select name="priority" id="inbox-priority-filter" class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
        <option value="">All</option>
        <option value="p1" {% if filters.priority=='p1' %}selected{% endif %}>Critical</option>
        <option value="p2" {% if filters.priority=='p2' %}selected{% endif %}>High</option>
        <option value="p3" {% if filters.priority=='p3' %}selected{% endif %}>Normal</option>
        <option value="p4" {% if filters.priority=='p4' %}selected{% endif %}>Low</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Tag</label>
      <input type="text" name="tag" id="inbox-tag-filter" value="{{ filters.tag or '' }}" placeholder="Tag name"
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-28 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Product</label>
      <select name="product" id="inbox-product-filter"
              class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none max-w-[180px]">
        <option value="">All</option>
      </select>
    </div>
    <div>
      <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Search</label>
      <input type="text" name="search" id="inbox-search-filter" value="{{ filters.search or '' }}" placeholder="Subject or message..."
             class="border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 w-full sm:w-48 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none">
    </div>
    <button type="submit" id="inbox-filter-btn"
            class="inline-flex items-center gap-1 px-4 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
      <span class="material-symbols-outlined text-base">filter_list</span>
      Filter
    </button>
    {% if filters.status or filters.priority or filters.tag or filters.search or filters.product %}
    <a href="{{ url_for('inbox') }}" id="inbox-clear-filters" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 underline">Clear</a>
    {% endif %}
  </form>

  {# ── Ticket table ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden overflow-x-auto">
    <table id="inbox-table" class="w-full text-sm">
      <thead>
        <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          <th class="px-2 py-3 w-12 text-center">Star</th>
          <th class="px-4 py-3 hidden sm:table-cell">ID</th>
          <th class="px-2 py-3 w-10 text-center hidden md:table-cell">Msg</th>
          <th class="px-4 py-3">Subject</th>
          <th class="px-2 py-3 w-10 text-center hidden lg:table-cell">Product</th>
          <th class="px-4 py-3 hidden lg:table-cell">PS</th>
          <th class="px-4 py-3">Status</th>
          <th class="px-4 py-3 hidden sm:table-cell">Priority</th>
          <th class="px-4 py-3 hidden lg:table-cell">Support</th>
          <th class="px-4 py-3 hidden md:table-cell">Last Activity</th>
        </tr>
      </thead>
      <tbody id="inbox-tbody" class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for ticket in tickets %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors {{ 'font-semibold bg-blue-50/70 dark:bg-blue-500/10' if not ticket.is_read else '' }}" data-testid="ticket-row" data-ticket-id="{{ ticket.id }}">
          {# Star toggle #}
          <td class="px-2 py-3 text-center">
            <button onclick="toggleStar({{ ticket.id }}, event)"
                    class="star-btn text-2xl leading-none hover:scale-110 transition-transform cursor-pointer focus:outline-none"
                    data-ticket-id="{{ ticket.id }}"
                    data-starred="{{ 'true' if ticket.is_starred else 'false' }}"
                    title="{% if ticket.is_starred %}Unstar{% else %}Star{% endif %} this ticket">
              <span class="star-icon">{{ '⭐' if ticket.is_starred else '☆' }}</span>
            </button>
          </td>

          {# ID + external link #}
          <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
            <div class="flex items-center gap-1.5">
              <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium">
                #{{ ticket.provider_thread_id or ticket.id }}
              </a>
              {% if ticket.provider_thread_id %}
              <a href="https://addons.prestashop.com/seller-contact.php?ict={{ ticket.provider_thread_id }}"
                 target="_blank" rel="noopener" title="Open in Addons"
                 class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
                <span class="material-symbols-outlined text-sm">open_in_new</span>
              </a>
              {% endif %}
              {% if not ticket.is_read %}
              <span class="inline-block w-2 h-2 rounded-full bg-brand-500 flex-shrink-0" title="Unread"></span>
              {% endif %}
              {% if ticket.has_ai %}
              <span class="material-symbols-outlined text-sm text-purple-400 flex-shrink-0" title="AI suggestion available">psychology</span>
              {% endif %}
              {% if ticket.customer_revenue and ticket.customer_revenue|float > 500 %}
              <span class="inline-flex items-center px-1.5 py-0 rounded text-[10px] font-bold bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 flex-shrink-0" title="VIP Customer (&euro;{{ ticket.customer_revenue }})">VIP</span>
              {% elif ticket.customer_revenue and ticket.customer_revenue|float > 100 %}
              <span class="material-symbols-outlined text-sm text-amber-400 flex-shrink-0" title="Valued Customer (&euro;{{ ticket.customer_revenue }})">military_tech</span>
              {% endif %}
            </div>
          </td>

          {# Last message preview #}
          <td class="px-2 py-3 text-center w-10 hidden md:table-cell">
            {% if ticket.last_msg_direction %}
            <div class="relative group/msg inline-flex">
              {% if ticket.last_msg_direction == 'inbound' %}
              <span class="material-symbols-outlined text-base text-blue-500 cursor-default" title="Last: inbound">call_received</span>
              {% else %}
              <span class="material-symbols-outlined text-base text-green-500 cursor-default" title="Last: outbound">call_made</span>
              {% endif %}
              <div class="hidden group-hover/msg:block absolute left-1/2 -translate-x-1/2 top-full mt-1 z-30 w-72 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 text-left">
                <div class="flex items-center gap-2 mb-1.5">
                  {% if ticket.last_msg_direction == 'inbound' %}
                  <span class="inline-flex items-center gap-1 text-[11px] font-medium text-blue-600 dark:text-blue-400"><span class="material-symbols-outlined" style="font-size:13px">call_received</span>Inbound</span>
                  {% else %}
                  <span class="inline-flex items-center gap-1 text-[11px] font-medium text-green-600 dark:text-green-400"><span class="material-symbols-outlined" style="font-size:13px">call_made</span>Outbound</span>
                  {% endif %}
                  <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ ticket.last_msg_author }}</span>
                  <span class="text-[11px] text-gray-400 dark:text-gray-500 ml-auto">{{ ticket.last_msg_date }}</span>
                </div>
                <p class="text-xs text-gray-600 dark:text-gray-400 whitespace-pre-wrap break-words leading-relaxed">{{ ticket.last_msg_body }}</p>
              </div>
            </div>
            {% else %}
            <span class="text-xs text-gray-300 dark:text-gray-600">-</span>
            {% endif %}
          </td>

          {# Subject + snippet #}
          <td class="px-4 py-3 max-w-xs">
            {# Mobile-only: ID + badges inline above subject #}
            <div class="flex items-center gap-1 sm:hidden mb-0.5 flex-wrap">
              <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="text-brand-600 dark:text-brand-400 text-xs font-medium">#{{ ticket.provider_thread_id or ticket.id }}</a>
              {% if not ticket.is_read %}<span class="inline-block w-2 h-2 rounded-full bg-brand-500 flex-shrink-0" title="Unread"></span>{% endif %}
              {% if ticket.has_ai %}<span class="material-symbols-outlined text-purple-400 flex-shrink-0" style="font-size:11px" title="AI suggestion">psychology</span>{% endif %}
              {% if ticket.customer_revenue and ticket.customer_revenue|float > 500 %}<span class="inline-flex items-center px-1 rounded text-[9px] font-bold bg-amber-100 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300">VIP</span>{% elif ticket.customer_revenue and ticket.customer_revenue|float > 100 %}<span class="material-symbols-outlined text-amber-400 flex-shrink-0" style="font-size:11px">military_tech</span>{% endif %}
            </div>
            <a href="{{ url_for('ticket_get', ticket_id=ticket.id) }}" class="text-gray-900 dark:text-gray-100 hover:text-brand-600 dark:hover:text-brand-400 block truncate">
              {{ ticket.subject }}
            </a>
            {% if ticket.last_snippet %}
            <p class="text-xs text-gray-400 dark:text-gray-500 truncate mt-0.5 font-normal">{{ ticket.last_snippet }}</p>
            {% endif %}
          </td>

          {# Product (icon only, tooltip shows name) #}
          <td class="px-2 py-3 text-gray-600 dark:text-gray-400 w-12 text-center hidden lg:table-cell">
            {% if ticket.product_type == 'business_care' %}
              {% if ticket.id_product %}
              <a href="{{ url_for('inbox', product=ticket.id_product) }}" title="{{ ticket.product_name or '' }}">
                <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 inline-flex" title="{{ ticket.product_name or '' }}">
                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
              </a>
              {% else %}
              <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 inline-flex" title="{{ ticket.product_name or '' }}">
                <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
              </div>
              {% endif %}
            {% elif ticket.pico_url %}
              {% if ticket.id_product %}
              <a href="{{ url_for('inbox', product=ticket.id_product) }}" title="{{ ticket.product_name or '' }}">
                <img src="{{ ticket.pico_url }}" alt="{{ ticket.product_name or '' }}" class="w-8 h-8 rounded-lg inline-block"
                     loading="lazy" onerror="this.style.display='none'" title="{{ ticket.product_name or '' }}">
              </a>
              {% else %}
              <img src="{{ ticket.pico_url }}" alt="{{ ticket.product_name or '' }}" class="w-8 h-8 rounded-lg inline-block"
                   loading="lazy" onerror="this.style.display='none'" title="{{ ticket.product_name or '' }}">
              {% endif %}
            {% else %}
              <span class="text-xs text-gray-400 dark:text-gray-500" title="{{ ticket.product_name or '' }}">-</span>
            {% endif %}
          </td>

          {# PS Version #}
          <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap hidden lg:table-cell">{{ ticket.ps_version or '-' }}</td>

          {# Status badge #}
          <td class="px-4 py-3 whitespace-nowrap">
            {% if ticket.status == 'open' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">Open</span>
            {% elif ticket.status == 'in_progress' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-400">In Progress</span>
            {% elif ticket.status == 'waiting_customer' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">Waiting</span>
            {% elif ticket.status == 'closed' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-400">Closed</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">{{ ticket.status }}</span>
            {% endif %}
          </td>

          {# Priority badge #}
          <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
            {% if ticket.priority == 'p1' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/10 text-red-800 dark:text-red-400">Critical</span>
            {% elif ticket.priority == 'p2' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-400">High</span>
            {% elif ticket.priority == 'p3' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-400">Normal</span>
            {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">Low</span>
            {% endif %}
          </td>

          {# Support status #}
          <td class="px-4 py-3 whitespace-nowrap hidden lg:table-cell">
            {% if ticket.is_support_expired %}
              <span class="inline-flex items-center gap-1 text-xs 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 text-green-600 dark:text-green-400">
                <span class="material-symbols-outlined text-sm">check_circle</span>Active
              </span>
            {% endif %}
          </td>

          {# Last activity #}
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs hidden md:table-cell">
            {{ ticket.last_activity_at.strftime('%Y-%m-%d %H:%M') if ticket.last_activity_at else '-' }}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="10" class="px-4 py-12 text-center">
            <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-2 block">inbox</span>
            <p class="text-sm text-gray-500 dark:text-gray-400">No tickets found.</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Try adjusting your filters or sync new messages.</p>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {# ── Pagination ── #}
  {% if total_pages > 1 %}
  <div id="inbox-pagination" class="flex flex-col sm:flex-row items-center sm:justify-between gap-3 mt-4">
    <p class="text-xs text-gray-500 dark:text-gray-400">
      Page {{ page }} of {{ total_pages }}
    </p>
    <div class="flex items-center gap-1">
      {% if page > 1 %}
      <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=page-1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-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-base">chevron_left</span>
      </a>
      {% endif %}

      {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
        <span class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg">{{ p }}</span>
        {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=p) }}"
           class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">{{ p }}</a>
        {% elif p == 2 or p == total_pages - 1 %}
        <span class="px-1 text-gray-400 dark:text-gray-500">&hellip;</span>
        {% endif %}
      {% endfor %}

      {% if page < total_pages %}
      <a href="{{ url_for('inbox', status=filters.status, priority=filters.priority, tag=filters.tag, search=filters.search, product=filters.product, sort=filters.sort, page=page+1) }}"
         class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-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-base">chevron_right</span>
      </a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}