{% extends "webapp/base.html" %}
{% block title %}{{ t('support') }} — FIGHTSKILL{% endblock %}
{% block content %}
<div class="sup-wrap">

  <h1 style="font-size:1.5rem;margin-bottom:1.25rem"><span style="color:var(--neon)">💬</span> {{ t('support') | default('Support') }}</h1>

  <div class="card sup-card">
    <div class="sup-head">
      <div style="display:flex;align-items:center;gap:0.6rem">
        <div class="sup-admin-avatar">🛡️</div>
        <div>
          <div style="font-weight:700;font-size:0.95rem">{{ t('support_team') | default('Support Team') }}</div>
          <div style="font-size:0.72rem;color:var(--text-muted)">
            <span id="supClaimInfo">{{ t('support_desc') | default('Your message goes directly to all admins') }}</span>
          </div>
        </div>
      </div>
      <span class="badge badge-green" id="supStatusBadge" style="font-size:0.62rem">{{ t('online') | default('Online') }}</span>
    </div>

    <div class="sup-chat" id="supChat">
      <div style="text-align:center;color:var(--text-muted);font-size:0.8rem;padding:1.5rem">
        {{ t('no_messages') | default('No messages yet. Send us a message!') }}
      </div>
    </div>

    <form id="supportForm" class="sup-form">
      <div class="sup-subject-row">
        <input class="input" type="text" id="subjectInput" placeholder="{{ t('subject') | default('Subject (optional)') }}" autocomplete="off">
      </div>
      <div class="sup-input-row">
        <textarea class="input" id="messageInput" rows="2" placeholder="{{ t('type_message') | default('Type your message...') }}"></textarea>
        <button type="submit" class="btn btn-primary sup-send-btn" title="{{ t('send_message') | default('Send') }}">➤</button>
      </div>
      <div id="sendStatus" style="margin-top:0.4rem;font-size:0.78rem;display:none"></div>
    </form>
  </div>

  <!-- Older threads -->
  {% if threads|length > 1 %}
  <h2 style="font-size:1rem;margin:1.5rem 0 0.75rem;color:var(--text-muted)">🗂️ {{ t('message_history') | default('Message History') }} ({{ threads|length }})</h2>
  <div style="display:grid;gap:0.6rem">
    {% for th in threads %}
    <button type="button" class="card sup-thread" data-thread="{{ th.id }}" style="text-align:start;padding:0.85rem 1rem;cursor:pointer">
      <div style="display:flex;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;align-items:center">
        <strong style="font-size:0.88rem;color:var(--text)">📄 {{ th.subject or (th.message[:60]) }}{% if th.subject %} <span style="color:var(--text-muted);font-weight:400">{{ th.message[:50] }}</span>{% endif %}</strong>
        <span style="font-size:0.68rem;color:var(--text-muted)">{{ th.created_at.strftime('%m/%d %H:%M') }}</span>
      </div>
      <div style="margin-top:0.25rem;font-size:0.75rem;color:var(--text-muted)">
        {% if th.status == 'open' %}<span class="badge badge-green" style="font-size:0.55rem">⏳ {{ t('open') | default('Open') }}</span>
        {% elif th.status == 'claimed' %}<span class="badge badge-blue" style="font-size:0.55rem">🛡️ {{ th.claimed_by.display_name if th.claimed_by else 'Admin' }}</span>
        {% elif th.status == 'resolved' %}<span class="badge badge-neon" style="font-size:0.55rem">✓ {{ t('resolved') | default('Resolved') }}</span>
        {% else %}<span class="badge badge-red" style="font-size:0.55rem">{{ th.status }}</span>{% endif %}
      </div>
    </button>
    {% endfor %}
  </div>
  {% endif %}
</div>

<style>
  .sup-card { display:flex; flex-direction:column; }
  .sup-head {
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;
    padding-bottom:0.85rem; border-bottom:1px solid var(--border); margin-bottom:0.5rem;
  }
  .sup-admin-avatar {
    width:40px; height:40px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  }
  /* Chat area — stretches down so all names/messages are visible */
  .sup-chat {
    flex:1; min-height:340px; max-height:60vh; overflow-y:auto; overscroll-behavior:contain;
    display:flex; flex-direction:column; gap:0.75rem; padding:1rem 0.25rem;
    scroll-behavior:smooth;
  }
  .sup-msg { max-width:78%; display:flex; flex-direction:column; gap:0.15rem; animation:supIn .3s var(--ease); }
  .sup-msg.admin { align-self:flex-start; }
  .sup-msg.me { align-self:flex-end; align-items:flex-end; }
  .sup-bubble {
    padding:0.6rem 0.95rem; border-radius:16px; font-size:0.9rem; line-height:1.55;
    word-break:break-word; white-space:pre-wrap;
  }
  .sup-msg.me .sup-bubble {
    background:linear-gradient(135deg,rgba(140,100,235,0.16),rgba(120,90,220,0.10));
    border:1px solid rgba(140,100,235,0.25); border-bottom-right-radius:4px;
  }
  .sup-msg.admin .sup-bubble {
    background:var(--surface2); border:1px solid var(--border-bright); border-bottom-left-radius:4px;
  }
  .sup-meta { font-size:0.66rem; color:var(--text-muted); padding:0 0.35rem; }
  .sup-meta b { color:var(--neon); font-weight:600; }
  .sup-msg.admin .sup-meta b { color:var(--blue); }
  @keyframes supIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .sup-form { display:flex; gap:0.5rem; padding-top:0.85rem; border-top:1px solid var(--border); }
  .sup-subject-row { margin-bottom:0.6rem; }
  .sup-input-row { display:flex; gap:0.5rem; align-items:stretch; }
  .sup-input-row textarea { flex:1; min-height:52px; max-height:120px; resize:none; border-radius:14px; }
  .sup-send { border-radius:14px; padding:0 1.1rem; flex-shrink:0; font-size:1.1rem; }
  .sup-thread { transition:var(--t); }
  .sup-thread:hover { transform:translateY(-2px); }
  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.25rem; }
  @media (max-width:640px) {
    .sup-msg { max-width:88%; }
    .sup-chat { min-height:280px; }
  }
</style>

<script>
let pollTimer = null;
let currentThread = null;
let lastCount = -1;

function esc(s) {
  const d = document.createElement('div');
  d.textContent = s == null ? '' : String(s);
  return d.innerHTML;
}

function bubbleHTML(m) {
  const cls = m.from_admin ? 'admin' : 'me';
  const who = m.from_admin ? ('🛡️ ' + esc(m.admin_name || 'Support')) : ('👤 ' + {{ user.display_name|tojson }});
  const time = new Date(m.created_at).toLocaleString();
  return '<div class="sup-msg ' + cls + '" data-mid="' + m.id + '">' +
    '<div class="sup-bubble">' + esc(m.message) + '</div>' +
    '<div class="sup-meta"><b>' + esc(who) + '</b> · ' + time +
      (m.status && m.status !== 'open' ? ' · <span style="color:var(--text-muted)">' + esc(m.status) + '</span>' : '') +
    '</div></div>';
}

function loadMessages(threadId) {
  currentThread = threadId || null;
  const url = '/api/support/messages' + (threadId ? ('?thread_id=' + threadId) : '');
  fetch(url).then(r => r.json()).then(d => {
    if (!d.ok) return;
    const el = document.getElementById('supChat');
    const msgs = d.messages || [];
    lastCount = msgs.length;
    if (!msgs.length) return;
    el.innerHTML = msgs.map(bubbleHTML).join('');
    el.scrollTop = el.scrollHeight;
  }).catch(() => {});
}

function pollStatus() {
  fetch('/api/support/status').then(r => r.json()).then(d => {
    if (lastCount >= 0 && d.count !== lastCount) loadMessages(); // new activity -> refresh full view
    if (d.count !== undefined) refreshList();
  }).catch(() => {});
}

function refreshList() {
  fetch('/api/support/messages').then(r => r.json()).then(d => {
    const msgs = d.messages || [];
    const el = document.getElementById('supChat');
    if (!msgs.length) return;
    // group by thread; default = show everything chronologically
    el.innerHTML = msgs.map(bubbleHTML).join('');
    el.scrollTop = el.scrollHeight;
    // update thread list statuses
    document.querySelectorAll('.sup-thread').forEach(b => {
      const tid = parseInt(b.dataset.thread);
      const th = msgs.filter(m => (m.thread_id === tid));
      if (!th.length) return;
      const st = th[th.length - 1].status;
      /* statuses arrive per-message; server supplies thread status on roots */
    });
  }).catch(() => {});
}

document.getElementById('supportForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const subject = document.getElementById('subjectInput').value.trim();
  const message = document.getElementById('messageInput').value.trim();
  if (!message) return;
  fetch('/api/support/send', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({subject, message})
  }).then(r => r.json()).then(d => {
    const s = document.getElementById('sendStatus');
    if (d.ok) {
      s.style.color = 'var(--neon)'; s.textContent = '✓ {{ t("message_sent") | default("Message sent!") }}'; s.style.display = 'block';
      document.getElementById('messageInput').value = '';
      document.getElementById('subjectInput').value = '';
      lastCount = -1; loadMessages(null);
    } else {
      s.style.color = '#ef4444'; s.textContent = '❌ ' + d.error; s.style.display = 'block';
    }
  }).catch(e2 => {
    const s = document.getElementById('sendStatus');
    s.style.color = '#ef4444'; s.textContent = '❌ ' + e2; s.style.display = 'block';
  });
});

document.querySelectorAll('.sup-thread').forEach(b => {
  b.addEventListener('click', () => loadMessages(parseInt(b.dataset.thread)));
});

/* Poll for new admin replies every 5s */
pollTimer = setInterval(pollStatus, 5000);
document.addEventListener('DOMContentLoaded', () => loadMessages());
</script>
{% endblock %}