{% set refresh_url = '/conversation?chat=' + (chat | urlencode) if is_group else '/conversation?handle=' + (handle | urlencode) %}
<div hx-on::load="
  const m = document.getElementById('main');
  {% if is_group %}
  m.dataset.chat = '{{ chat }}';
  delete m.dataset.handle;
  {% else %}
  m.dataset.handle = '{{ handle }}';
  delete m.dataset.chat;
  {% endif %}
">
  <header>
    <button type="button" class="back-btn" aria-label="back to conversations"
            onclick="window.__showSidebar && window.__showSidebar()">‹</button>
    <div class="header-text">
      <h2>{{ name }}</h2>
      <small>{{ subtitle }}</small>
    </div>
  </header>

  <div class="messages" id="messages">
    {% for m in msgs %}
    <div class="msg {{ 'me' if m.from_me else 'them' }}{% if m.from_me and m.service == 'SMS' %} sms{% endif %}">
      {% if is_group and not m.from_me and m.sender_name %}
        <div class="sender">{{ m.sender_name }}</div>
      {% endif %}
      {% for a in m.attachments %}
        {% if not a.ready %}
          <div class="attach pending">📎 syncing…</div>
        {% elif a.kind == 'image' %}
          <a class="media" href="/attachment?path={{ a.path | urlencode }}" target="_blank">
            <img src="/attachment?path={{ a.path | urlencode }}&size=thumb" alt="{{ a.name }}" loading="lazy">
          </a>
        {% elif a.kind == 'video' %}
          <video class="media" controls preload="metadata"
                 src="/attachment?path={{ a.path | urlencode }}"
                 onerror="this.outerHTML = '<a class=&quot;bubble file-link&quot; href=&quot;/attachment?path={{ a.path | urlencode }}&quot; target=&quot;_blank&quot;>🎬 {{ a.name }}</a>'"></video>
        {% elif a.kind == 'audio' %}
          <audio class="media" controls preload="none" src="/attachment?path={{ a.path | urlencode }}"></audio>
        {% else %}
          <a class="bubble file-link" href="/attachment?path={{ a.path | urlencode }}" target="_blank">📎 {{ a.name }}</a>
        {% endif %}
      {% endfor %}
      {% if m.text %}<div class="bubble"><div class="text">{{ m.text }}</div></div>{% endif %}
      <div class="ts">
        {{ m.ts }}
        {% if m.from_me and m.status and m.status != 'delivered' %}
          <span class="delivery {{ m.status }}" title="{{ m.hint }}">
            {% if m.status == 'failed' %}⚠️ {{ m.label }}
            {% elif m.status == 'sent' %}✓ sent
            {% else %}⏳ {{ m.label }}{% endif %}
          </span>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <div id="send-banner" class="send-banner" hidden></div>

  <form class="composer"
        hx-post="/send"
        hx-trigger="submit"
        hx-encoding="multipart/form-data"
        hx-swap="none"
        hx-on::before-request="window.__beforeSend(event)"
        hx-on::after-request="window.__handleSendResponse(event, '{{ refresh_url }}')">
    {% if is_group %}
    <input type="hidden" name="chat" value="{{ chat }}">
    {% else %}
    <input type="hidden" name="handle" value="{{ handle }}">
    {% endif %}
    <label id="attach-label" class="attach-btn" for="attach-input" title="attach a file">+</label>
    <button type="button" id="emoji-btn" class="emoji-btn" title="emoji"
            aria-label="insert emoji">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
           stroke="currentColor" stroke-width="1.8"
           stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
        <line x1="9" y1="9" x2="9.01" y2="9"/>
        <line x1="15" y1="9" x2="15.01" y2="9"/>
      </svg>
    </button>
    <span id="attach-name" class="attach-name"></span>
    <input id="attach-input" type="file" name="file" accept="image/*,video/*"
           onchange="document.getElementById('attach-name').textContent = this.files[0] ? this.files[0].name : ''">
    <input type="text" name="body" id="composer-body" placeholder="message {{ name }}…" autofocus>
    <button type="submit">send</button>
    <div id="emoji-popover" hidden>
      <emoji-picker></emoji-picker>
    </div>
  </form>
</div>

<script>
  // Optimistic-send: clear the composer the instant the user hits enter and
  // drop a "ghost" bubble at the bottom of the thread so they see something
  // is moving. The ghost is replaced when the conversation refreshes after
  // the server confirms; on failure we restore the text so they can retry.
  window.__beforeSend = function(event) {
    const form = event.detail.elt;
    const body = form.querySelector('#composer-body');
    const attachName = document.getElementById('attach-name');
    const text = body ? body.value : '';
    const attachLabel = attachName ? attachName.textContent : '';
    form.__pending = { text: text, attach: attachLabel };

    if (body) body.value = '';
    if (attachName) attachName.textContent = '';

    const messages = document.getElementById('messages');
    if (!messages) return;
    const ghost = document.createElement('div');
    ghost.className = 'msg me ghost';
    ghost.id = '__ghost_msg';
    if (attachLabel) {
      const a = document.createElement('div');
      a.className = 'attach pending';
      a.textContent = '📎 ' + attachLabel;
      ghost.appendChild(a);
    }
    if (text) {
      const bubble = document.createElement('div');
      bubble.className = 'bubble';
      const t = document.createElement('div');
      t.className = 'text';
      t.textContent = text;
      bubble.appendChild(t);
      ghost.appendChild(bubble);
    }
    const ts = document.createElement('div');
    ts.className = 'ts';
    const tag = document.createElement('span');
    tag.className = 'delivery ghost-status';
    tag.textContent = 'sending…';
    ts.appendChild(tag);
    ghost.appendChild(ts);
    messages.appendChild(ghost);
    messages.scrollTop = messages.scrollHeight;
  };

  // Shared post-send handler: on success refresh the conversation, on
  // reported-failure keep the composer populated and show a banner so the
  // user sees what went wrong. refreshUrl is the full GET target for the
  // current conversation (1:1 or group).
  window.__handleSendResponse = function(event, refreshUrl) {
    const xhr = event.detail.xhr;
    const banner = document.getElementById('send-banner');
    const form = event.detail.elt;
    const ghost = document.getElementById('__ghost_msg');
    let payload = null;
    try { payload = JSON.parse(xhr.responseText); } catch (_) {}

    const restoreComposer = () => {
      if (!form || !form.__pending) return;
      const body = form.querySelector('#composer-body');
      if (body && !body.value) body.value = form.__pending.text || '';
      const an = document.getElementById('attach-name');
      if (an && !an.textContent) an.textContent = form.__pending.attach || '';
      form.__pending = null;
    };

    if (!event.detail.successful) {
      if (banner) {
        banner.textContent = 'send failed: ' + (payload && payload.detail || xhr.statusText || 'server error');
        banner.classList.remove('info');
        banner.hidden = false;
      }
      if (ghost) ghost.remove();
      restoreComposer();
      return;
    }
    const status = payload && payload.status;
    const hint = payload && payload.hint;
    const fellBack = payload && payload.fell_back_to_sms;
    if (status === 'failed' && banner) {
      banner.textContent = 'Not delivered: ' + (hint || 'unknown error');
      banner.classList.remove('info');
      banner.hidden = false;
      if (ghost) ghost.remove();
      restoreComposer();
      return;
    } else if (fellBack && banner) {
      banner.textContent = 'Sent via SMS — iMessage unavailable for this recipient.';
      banner.classList.add('info');
      banner.hidden = false;
    } else if (banner) {
      banner.classList.remove('info');
      banner.hidden = true;
    }
    if (ghost) {
      const tag = ghost.querySelector('.ghost-status');
      if (tag) tag.textContent = 'sent to server';
    }
    const fileEl = document.getElementById('attach-input');
    if (fileEl) fileEl.value = '';
    if (form) form.__pending = null;
    htmx.ajax('GET', refreshUrl, '#main');
  };

  // Auto-scroll messages to bottom on render + wire up the emoji popover.
  (function() {
    const m = document.getElementById('messages');
    if (m) m.scrollTop = m.scrollHeight;
    const mainEl = document.getElementById('main');
    {% if is_group %}
    mainEl.dataset.chat = '{{ chat }}';
    delete mainEl.dataset.handle;
    {% else %}
    mainEl.dataset.handle = '{{ handle }}';
    delete mainEl.dataset.chat;
    {% endif %}

    const btn = document.getElementById('emoji-btn');
    const pop = document.getElementById('emoji-popover');
    const body = document.getElementById('composer-body');
    if (!btn || !pop || !body) return;

    function insertAtCursor(s) {
      const start = body.selectionStart ?? body.value.length;
      const end = body.selectionEnd ?? body.value.length;
      body.value = body.value.slice(0, start) + s + body.value.slice(end);
      const pos = start + s.length;
      body.setSelectionRange(pos, pos);
      body.focus();
    }

    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      pop.hidden = !pop.hidden;
    });

    const picker = pop.querySelector('emoji-picker');
    picker.addEventListener('emoji-click', (e) => {
      insertAtCursor(e.detail.unicode);
      pop.hidden = true;
    });

    document.addEventListener('click', (e) => {
      if (pop.hidden) return;
      if (pop.contains(e.target) || btn.contains(e.target)) return;
      pop.hidden = true;
    });
  })();
</script>