{% 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 %}
">
  {% set contact_url = '/contact?chat=' + (chat | urlencode) if is_group else '/contact?handle=' + (handle | urlencode) %}
  <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>
    <a class="header-info" aria-label="contact info" title="contact info"
       href="#"
       hx-get="{{ contact_url }}"
       hx-target="#main"
       hx-swap="innerHTML">
      <sl-icon name="info-circle"></sl-icon>
    </a>
  </header>

  <div class="messages" id="messages">
    {% if has_more %}
    <div class="load-older"
         hx-get="{{ next_url }}"
         hx-trigger="intersect once"
         hx-swap="outerHTML">
      <sl-spinner></sl-spinner>
    </div>
    {% endif %}
    {% include "_messages.html" %}
  </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 : ''">
    <sl-input type="text" name="body" id="composer-body" placeholder="message {{ name }}…" autofocus pill></sl-input>
    <sl-button type="submit" variant="primary" pill>send</sl-button>
    <div id="emoji-popover" hidden>
      <emoji-picker></emoji-picker>
    </div>
  </form>

  <sl-dialog id="media-dialog" no-header class="media-dialog" label="photo viewer">
    <img id="media-dialog-img" alt="">
    <sl-icon-button name="chevron-left" class="media-prev" label="previous photo"></sl-icon-button>
    <sl-icon-button name="chevron-right" class="media-next" label="next photo"></sl-icon-button>
    <sl-icon-button name="x-lg" class="media-close" label="close"></sl-icon-button>
  </sl-dialog>
</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('sl-badge');
    tag.className = 'delivery ghost-status';
    tag.setAttribute('variant', 'neutral');
    tag.setAttribute('pill', '');
    tag.setAttribute('pulse', '');
    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;

    // Scroll-anchor preservation around load-older swaps. When the trigger
    // is replaced with a page of older bubbles + a fresh trigger, content
    // grows above the user's view; we capture distance-from-bottom before
    // the swap and restore it after so the user stays anchored on the
    // message they were reading instead of being kicked to the new top.
    if (m) {
      let anchor = null;
      m.addEventListener('htmx:beforeSwap', (e) => {
        const t = e.detail && e.detail.target;
        if (!t || !t.classList || !t.classList.contains('load-older')) return;
        anchor = m.scrollHeight - m.scrollTop;
      });
      m.addEventListener('htmx:afterSwap', () => {
        if (anchor === null) return;
        m.scrollTop = m.scrollHeight - anchor;
        anchor = null;
      });
    }

    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;
    });
  })();

  // Inline media viewer: clicking a photo opens an sl-dialog overlay with
  // prev/next navigation across all photos in the current thread, instead of
  // opening a new browser tab. Videos and audio are unaffected (their native
  // controls play in place). Re-runs on every htmx swap; the previous
  // dialog/handlers are discarded with the old DOM.
  (function() {
    const dialog = document.getElementById('media-dialog');
    const dialogImg = document.getElementById('media-dialog-img');
    const messagesEl = document.getElementById('messages');
    if (!dialog || !dialogImg || !messagesEl) return;

    let mediaList = [];
    let currentIndex = -1;

    function refresh() {
      mediaList = Array.from(messagesEl.querySelectorAll('a.media'));
    }
    function updateNav() {
      const prev = dialog.querySelector('.media-prev');
      const next = dialog.querySelector('.media-next');
      if (prev) prev.style.visibility = currentIndex > 0 ? 'visible' : 'hidden';
      if (next) next.style.visibility = currentIndex < mediaList.length - 1 ? 'visible' : 'hidden';
    }
    function openAt(index) {
      if (index < 0 || index >= mediaList.length) return;
      currentIndex = index;
      const link = mediaList[index];
      dialogImg.src = link.getAttribute('href');
      const inner = link.querySelector('img');
      dialogImg.alt = inner ? (inner.alt || '') : '';
      updateNav();
      if (!dialog.open) dialog.show();
    }

    messagesEl.addEventListener('click', (e) => {
      const link = e.target.closest('a.media');
      if (!link || !messagesEl.contains(link)) return;
      e.preventDefault();
      refresh();
      const idx = mediaList.indexOf(link);
      if (idx >= 0) openAt(idx);
    });

    const prevBtn = dialog.querySelector('.media-prev');
    const nextBtn = dialog.querySelector('.media-next');
    const closeBtn = dialog.querySelector('.media-close');
    if (prevBtn) prevBtn.addEventListener('click', (e) => { e.stopPropagation(); openAt(currentIndex - 1); });
    if (nextBtn) nextBtn.addEventListener('click', (e) => { e.stopPropagation(); openAt(currentIndex + 1); });
    if (closeBtn) closeBtn.addEventListener('click', () => dialog.hide());

    document.addEventListener('keydown', (e) => {
      if (!dialog.open) return;
      if (e.key === 'ArrowLeft') { e.preventDefault(); openAt(currentIndex - 1); }
      else if (e.key === 'ArrowRight') { e.preventDefault(); openAt(currentIndex + 1); }
    });
  })();
</script>