{% extends "admin/base.html" %}
{% block page_title %}{{ t('support') }}{% endblock %}
{% block content %}
<div class="action-bar">
  <h2 style="font-size:1rem;margin:0">💬 {{ t('support') }}</h2>
  <form method="GET" class="search-box" style="min-width:220px;flex:1;max-width:420px">
    <input type="hidden" name="status" value="{{ request.args.get('status','') }}">
    <input class="input" type="text" name="q" value="{{ search or '' }}" placeholder="🔍 {{ t('search_user') | default('Search user...') }}">
  </form>
  <select class="input" style="width:160px" onchange="if(this.value!==location.search.split('status=')[1]) location='{{ url_for('admin.support_list') }}?q={{ search or '' }}&status='+this.value">
    <option value="">{{ t('all_status') | default('All Status') }}</option>
    <option value="open"{% if request.args.get('status')=='open' %} selected{% endif %}>{{ t('open') }}</option>
    <option value="claimed"{% if request.args.get('status')=='claimed' %} selected{% endif %}>{{ t('in_progress') | default('In Progress') }}</option>
    <option value="resolved"{% if request.args.get('status')=='resolved' %} selected{% endif %}>{{ t('resolved') }}</option>
    <option value="closed"{% if request.args.get('status')=='closed' %} selected{% endif %}>{{ t('closed') | default('Closed') }}</option>
  </select>
  {% if search %}
  <a href="{{ url_for('admin.support_list') }}" class="btn btn-ghost btn-xs">✕ {{ t('clear') | default('Clear') }}</a>
  {% endif %}
</div>

<div class="table-wrap animate-in">
  <table>
    <thead><tr><th>#</th><th>{{ t('user') }}</th><th>{{ t('subject') }}</th><th>{{ t('message') }}</th><th>{{ t('status') }}</th><th>{{ t('admin_assigned') | default('Admin') }}</th><th>{{ t('date') | default('Date') }}</th><th>{{ t('action') }}</th></tr></thead>
    <tbody>
      {% for m in messages %}
      <tr>
        <td style="color:var(--text-muted)">{{ m.id }}</td>
        <td>
          <div style="font-weight:600">{{ m.user.display_name }}</div>
          <div style="font-size:0.72rem;color:var(--text-muted)">@{{ m.user.username or m.user.email }} · #{{ m.user.numeric_id }}</div>
        </td>
        <td style="max-width:200px">
          <div style="font-weight:600;font-size:0.85rem">{{ m.subject or '—' }}</div>
        </td>
        <td style="max-width:320px">
          <div style="font-size:0.75rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ m.message[:90] }}</div>
        </td>
        <td>
          <span class="badge {% if m.status=='open' %}badge-green{% elif m.status=='claimed' %}badge-blue{% elif m.status=='resolved' %}badge-neon{% else %}badge-red{% endif %}">{{ m.status|title }}</span>
        </td>
        <td style="font-size:0.8rem">
          {% if m.claimed_by %}🛡️ {{ m.claimed_by.display_name }}{% else %}<span style="color:var(--text-muted)">—</span>{% endif %}
        </td>
        <td style="font-size:0.78rem;color:var(--text-muted)">{{ m.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
        <td>
          <div class="flex" style="gap:0.3rem">
            {% if m.claimed_by_admin_id %}
            <a href="{{ url_for('admin.support_detail', mid=m.id) }}" class="btn btn-primary btn-xs">💬 {{ t('chat') | default('Chat') }}</a>
            {% else %}
            <form method="POST" action="{{ url_for('admin.support_claim', mid=m.id) }}" style="display:inline">
              <button type="submit" class="btn btn-primary btn-xs">{{ t('claim') | default('Claim') }}</button>
            </form>
            <a href="{{ url_for('admin.support_detail', mid=m.id) }}" class="btn btn-outline btn-xs">👁️</a>
            {% endif %}
            {% if m.status != 'closed' %}
            <a href="{{ url_for('admin.support_close', mid=m.id) }}" class="btn btn-danger btn-xs" title="{{ t('close_ticket') | default('Close ticket') }}">✕</a>
            {% endif %}
          </div>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="8" style="text-align:center;padding:2rem;color:var(--text-muted)">{{ t('no_support_messages') | default('No support messages yet.') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}