{% extends "admin/base.html" %}
{% block page_title %}💬 {{ t('chat_with') | default('Chat') }} — {{ msg.user.display_name }}{% endblock %}
{% block content %}
<div class="action-bar">
  <div style="display:flex;align-items:center;gap:0.75rem">
    <a href="{{ url_for('admin.support_list') }}" class="btn btn-ghost btn-sm">← {{ t('back') }}</a>
    <h2 style="font-size:1rem;margin:0">💬 {{ msg.subject or t('support_message') | default('Support Message') }}</h2>
  </div>
  <div style="display:flex;gap:0.4rem;align-items:center">
    {% if msg.claimed_by %}
    <span class="badge badge-blue" style="font-size:0.68rem">🛡️ {{ msg.claimed_by.display_name }}</span>
    {% endif %}
    {% if msg.status != 'closed' %}
    <a href="{{ url_for('admin.support_close', mid=msg.id) }}" class="btn btn-danger btn-sm"
       onclick="return confirm('{{ t('confirm_close_ticket') | default('Close this ticket?') }}')">{{ t('close_ticket') | default('Close') }}</a>
    {% endif %}
  </div>
</div>

<div class="sup-admin-chat">
  <div class="sup-info-card card animate-in">
    <div style="display:flex;align-items:center;gap:0.85rem">
      {% if msg.user.avatar %}
      <img src="{{ url_for('static', filename='uploads/'+msg.user.avatar) }}" style="width:42px;height:42px;border-radius:50%;object-fit:cover">
      {% else %}
      <div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;font-size:0.95rem">{{ msg.user.display_name[0]|upper }}</div>
      {% endif %}
      <div style="flex:1">
        <div style="font-weight:700;font-size:0.98rem">{{ msg.user.display_name }}</div>
        <div style="font-size:0.72rem;color:var(--text-muted)">@{{ msg.user.username or msg.user.email }} · #{{ msg.user.numeric_id }}</div>
      </div>
      <span class="badge {% if msg.status=='open' %}badge-green{% elif msg.status=='claimed' %}badge-blue{% elif msg.status=='resolved' %}badge-neon{% else %}badge-red{% endif %}">{{ msg.status|title }}</span>
    </div>
  </div>

  <div id="chatBox" class="sup-chat-box">
    <!-- Original message -->
    <div class="sup-msg user" data-mid="{{ msg.id }}">
      <div class="sup-bubble">{{ msg.message }}</div>
      <div class="sup-meta"><b>👤 {{ msg.user.display_name }}</b> · {{ msg.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
    </div>
    <!-- Replies -->
    {% for r in replies %}
    <div class="sup-msg admin" data-mid="{{ r.id }}">
      <div class="sup-bubble">{{ r.message }}</div>
      <div class="sup-meta"><b>🛡️ {{ r.admin.display_name if r.admin else t('support') }}</b> · {{ r.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
    </div>
    {% endfor %}
  </div>

  <div class="card sup-reply-form animate-in">
    <h3 style="font-size:0.95rem;margin-bottom:0.75rem">✍️ {{ t('reply_to') | default('Reply') }} {{ msg.user.display_name }}</h3>
    <form id="replyForm">
      <textarea name="message" id="replyText" class="input" rows="3" placeholder="{{ t('type_reply') | default('Type your reply...') }}" required style="margin-bottom:0.75rem;width:100%"></textarea>
      <button type="submit" class="btn btn-primary">📤 {{ t('send_reply') | default('Send Reply') }}</button>
      <span id="replyStatus" style="margin-left:0.75rem;font-size:0.8rem"></span>
    </form>
  </div>
</div>

<style>
.sup-admin-chat { max-width:900px; display:flex; flex-direction:column; gap:1rem; }
.sup-info-card { padding:1rem 1.25rem; }
.sup-chat-box {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.5rem 1.25rem; min-height:360px; max-height:60vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:0.85rem; scroll-behavior:smooth;
}
.sup-msg { max-width:75%; display:flex; flex-direction:column; gap:0.2rem; animation:supIn 0.3s var(--ease); }
.sup-msg.user { align-self:flex-start; }
.sup-msg.admin { align-self:flex-end; align-items:flex-end; }
.sup-bubble {
  padding:0.7rem 1.05rem; border-radius:16px; font-size:0.92rem; line-height:1.6;
  word-break:break-word; white-space:pre-wrap;
}
.sup-msg.user .sup-bubble {
  background:var(--surface2); border:1px solid var(--border-bright); border-bottom-left-radius:4px;
}
.sup-msg.admin .sup-bubble {
  background:linear-gradient(135deg,rgba(59,130,246,0.16),rgba(37,99,235,0.10));
  border:1px solid rgba(59,130,246,0.3); border-bottom-right-radius:4px;
}
.sup-meta { font-size:0.68rem; color:var(--text-muted); padding:0 0.4rem; }
.sup-meta b { font-weight:600; }
.sup-msg.user .sup-meta b { color:var(--neon); }
.sup-msg.admin .sup-meta b { color:var(--blue); }
@keyframes supIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.sup-reply-form { padding:1.25rem; }
@media (max-width:768px) {
  .sup-msg { max-width:88%; }
  .sup-chat-box { min-height:300px; }
}
</style>

<script>
let pollTimer = null;
let lastReplyId = {{ replies[-1].id if replies else msg.id }};

function scrollToBottom() {
  const box = document.getElementById('chatBox');
  box.scrollTop = box.scrollHeight;
}

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

function pollReplies() {
  fetch('{{ url_for('admin.support_detail', mid=msg.id) }}').then(r => r.text()).then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const newBox = doc.getElementById('chatBox');
    if (!newBox) return;
    const newMsgs = newBox.querySelectorAll('.sup-msg[data-mid]');
    const lastNew = newMsgs.length ? parseInt(newMsgs[newMsgs.length - 1].dataset.mid) : 0;
    if (lastNew > lastReplyId) {
      document.getElementById('chatBox').innerHTML = newBox.innerHTML;
      lastReplyId = lastNew;
      scrollToBottom();
    }
  }).catch(() => {});
}

document.getElementById('replyForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const msg = document.getElementById('replyText').value.trim();
  if (!msg) return;
  const st = document.getElementById('replyStatus');
  st.textContent = '⏳ ارسال...';
  st.style.color = 'var(--text-muted)';
  
  const fd = new FormData();
  fd.append('message', msg);
  fd.append('ajax', '1');
  fetch('{{ url_for('admin.support_reply', mid=msg.id) }}', {
    method: 'POST', body: fd
  }).then(r => r.json()).then(d => {
    if (d.ok) {
      st.textContent = '✓ ارسال شد';
      st.style.color = 'var(--neon)';
      document.getElementById('replyText').value = '';
      setTimeout(() => { st.textContent = ''; pollReplies(); }, 800);
    } else {
      st.textContent = '❌ خطا';
      st.style.color = '#ef4444';
    }
  }).catch(e2 => {
    st.textContent = '❌ ' + e2;
    st.style.color = '#ef4444';
  });
});

pollTimer = setInterval(pollReplies, 4000);
document.addEventListener('DOMContentLoaded', scrollToBottom);
</script>
{% endblock %}