{% extends "base.html" %}
{% block content %}
<div class="container" style="max-width:980px;margin:0 auto;padding:16px;">
  <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;">
    <h2 style="margin:6px 0 14px 0;">Support Thread #{{ thread.id }}</h2>
    <a class="native-btn" href="{% url 'portal:staff_support_inbox' %}">Back</a>
  </div>

  <div class="native-card" style="padding:12px;">
    <div style="opacity:.9;font-size:13px;">
      {% if thread.user %}
        User: <b>{{ thread.user.username }}</b>
      {% else %}
        Guest Session: <b>{{ thread.session_key|default:"-" }}</b>
      {% endif %}
      • Status: <b>{{ thread.status }}</b>
    </div>
  </div>

  <div style="height:12px;"></div>

  <!-- Reuse ET-chat widget styles, but render a dedicated staff chat box -->
  <div class="native-card" style="padding:0;overflow:hidden;">
    <div class="et-chat-head">
      <div class="et-chat-dot"></div>
      <div class="et-chat-meta">
        <div class="et-chat-name">ET Chat • Staff Reply</div>
        <div class="et-chat-status">Live WebSocket</div>
      </div>
    </div>

    <div class="et-chat-body" id="staffChatBody"></div>
        <div class="et-typing" id="staffTyping" style="display:none;padding:0 12px 8px 12px;">
          <span>User typing</span>
          <span class="et-dots"><span class="et-dot"></span><span class="et-dot"></span><span class="et-dot"></span></span>
        </div>

    <form class="et-chat-form" id="staffChatForm" autocomplete="off">
      <input class="et-chat-input" id="staffChatInput" type="text" placeholder="Reply to user…" />
      <button class="et-chat-send" type="submit">➤</button>
    </form>
  </div>
</div>

<script>
  (function(){
    const body = document.getElementById("staffChatBody");
    const form = document.getElementById("staffChatForm");
    const input = document.getElementById("staffChatInput");
    const threadId = "{{ thread.id }}";

    function escapeHtml(s){ return (s||"").replace(/[&<>"']/g, c => ({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" }[c])); }
    function push(role, text){
      const wrap=document.createElement("div");
      wrap.className="et-msg " + role;
      const bub=document.createElement("div");
      bub.className="et-bub";
      bub.innerHTML = escapeHtml(text).replace(/\n/g,"<br/>");
      wrap.appendChild(bub);
      body.appendChild(wrap);
      body.scrollTop = body.scrollHeight;
    }

    // preload server-rendered history
    {% for m in messages %}
      push("{% if m.sender_label == 'staff' %}bot{% else %}user{% endif %}", "{{ m.text|escapejs }}");
    {% endfor %}

    const proto = (window.location.protocol === "https:") ? "wss://" : "ws://";
    fetch(`/chat/support/${threadId}/mark_read/`, {method:'POST'}).catch(()=>{});

        const ws = new WebSocket(proto + window.location.host + `/ws/support/${threadId}/`);

    let tmr=null;
        input.addEventListener('input', () => {
          if (tmr) clearTimeout(tmr);
          try{ ws.send(JSON.stringify({type:'typing', is_typing:true})); }catch(e){}
          tmr=setTimeout(()=>{ try{ ws.send(JSON.stringify({type:'typing', is_typing:false})); }catch(e){} }, 900);
        });

        ws.onmessage = (ev) => {
      try{
        const m = JSON.parse(ev.data);
            if (m.type === 'typing'){
              const el=document.getElementById('staffTyping');
              if (el && m.sender_label !== 'staff') el.style.display = m.is_typing ? 'flex' : 'none';
              return;
            }
        if (m.sender_label === "staff") return; // prevent echo duplicates (we already show our own)
        push("user", m.text);
      }catch(e){}
    };

    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const t=(input.value||"").trim();
      if(!t) return;
      input.value="";
      push("bot", t);
      try{ ws.send(JSON.stringify({text:t})); }catch(e){}
    });
  })();
</script>
{% endblock %}

<!-- STAFF_TYPING_V1 -->