{% extends "base.html" %}
{% comment %}
The inbox (issue #14): conversation list, thread, contact panel.

SPEC §14 mandates HTMX polling rather than SSE, "every 3 s on list and open
thread (ETag/304 to keep payloads near-zero when unchanged)". Two things in the
inline script at the bottom of this file make that work, and both are
non-obvious enough to be worth reading before editing:

  1. htmx does not send If-None-Match. Without it the server has nothing to
     compare against and every poll is a full render.
  2. htmx 2's default responseHandling swaps on 304 — its rule for 2xx is the
     regex [23].. , which "304" matches — so an unchanged poll would swap an
     empty body over the pane and blank it.

Everything platform-specific about what may be sent is decided server-side by
apps/messaging/compliance.py and arrives here as a sentence. There is no
per-platform branching anywhere in these templates, on purpose.

No inline event handlers: the CSP allows 'unsafe-eval' for Alpine's x-*
expressions but NOT 'unsafe-inline', so an onclick= attribute is silently
inert.
{% endcomment %}
{% load common_extras %}

{% block title %}Inbox · DemandTrail Messaging{% endblock %}

{% block page_header %}
  <div class="page-header mb-4">
    <div class="page-header-text">
      <h1 class="page-title">Inbox</h1>
      <p class="page-lede">Every conversation across your connected channels.</p>
    </div>
    {% comment %}
      The keyboard shortcuts, said out loud (HANDOFF §2.4). They have worked
      since the inbox shipped and nothing on the page admitted they existed.
      Hidden on a phone, where there is no keyboard to press them on.
    {% endcomment %}
    <p class="ib-shortcuts hidden md:flex" aria-label="Keyboard shortcuts">
      <span><kbd>j</kbd> <kbd>k</kbd> navigate</span>
      <span><kbd>e</kbd> done</span>
      <span><kbd>r</kbd> reply</span>
    </p>
  </div>
{% endblock %}

{% block content %}
{% comment %}
  $nextTick in reload() is load bearing, same as on the flow list: the filter
  popover assigns to the model and calls reload() in one click handler, but
  Alpine renders the hidden inputs on the next tick — dispatching immediately
  serialises the form one pick behind.

  The shortcut handler ignores events from a field, so typing "j" into a reply
  does not jump to the next conversation.
{% endcomment %}
<div class="flex flex-col flex-1 min-h-0"
     x-data="{
        state: '{{ state|escapejs }}',
        assignee: '{{ assignee|escapejs }}',
        q: '{{ q|escapejs }}',
        filters: {{ filters|json_attr }},
        {% comment %}
          The contact panel's toggle (the square button at the end of the
          thread header). Where there is room beside the thread it is open by
          default and the choice is remembered per browser; below `lg` it is an
          overlay over the thread, so it always starts closed there and a choice
          made there is not stored — an overlay that reopened itself over every
          conversation would be in the way. Reading storage can throw in a
          private window, which just means the default.
        {% endcomment %}
        info: (() => { if (!window.matchMedia('(min-width: 1024px)').matches) return false; try { const v = localStorage.getItem('bb.inbox.info'); if (v !== null) return v === '1'; } catch (e) {} return true; })(),
        toggleInfo() { this.info = !this.info; if (!window.matchMedia('(min-width: 1024px)').matches) return; try { localStorage.setItem('bb.inbox.info', this.info ? '1' : '0'); } catch (e) {} },
        openFirstUnread() {
          const row = document.querySelector('#inbox-list .ib-row.is-unread') || document.querySelector('#inbox-list .ib-row');
          if (row) { row.click(); row.scrollIntoView({ block: 'nearest' }); }
        },
        {% comment %}
          By id rather than $refs: the form sits inside the rail's own x-data
          (inboxSelection), and a ref registers with the closest component, not
          with this one.
        {% endcomment %}
        reload() { this.$nextTick(() => document.getElementById('inbox-filters').dispatchEvent(new Event('filters-changed'))); },
        move(step) {
          const rows = Array.from(document.querySelectorAll('#inbox-list [data-conversation]'));
          if (!rows.length) return;
          const at = rows.findIndex(r => r.getAttribute('aria-current') === 'true');
          const next = rows[Math.min(Math.max(at + step, 0), rows.length - 1)];
          if (next) { next.click(); next.scrollIntoView({ block: 'nearest' }); }
        },
        shortcut(e) {
          const tag = (e.target.tagName || '').toLowerCase();
          if (tag === 'input' || tag === 'textarea' || tag === 'select' || e.target.isContentEditable) return;
          if (e.metaKey || e.ctrlKey || e.altKey) return;
          if (e.key === 'j') { e.preventDefault(); this.move(1); }
          else if (e.key === 'k') { e.preventDefault(); this.move(-1); }
          else if (e.key === 'e') { e.preventDefault(); document.querySelector('[data-shortcut=done]')?.click(); }
          else if (e.key === 'r') { e.preventDefault(); document.querySelector('[data-shortcut=reply]')?.focus(); }
        }
     }"
     @keydown.window="shortcut($event)">

  <div class="ib-shell">
    {# ── Conversation list ───────────────────────────────────────── #}
    {% comment %}
      The poller is the list itself rather than a sibling element: unlike the
      notification bell, there is only one target here, so a second element
      would just be a second request. data-poll is what the If-None-Match
      listener keys on, which is how a mutation's request never carries a tag.
    {% endcomment %}
    <section class="ib-rail" aria-label="Conversations"
             x-data="inboxSelection()"
             :class="count && 'is-selecting'"
             x-on:inbox-list-changed.camel.window="clear()">
      {% comment %}
        The list's controls live at the top of the list they control (HANDOFF
        §3, Inbox): the views as underline tabs with their counts, then search
        and the Filter popover. One form, so the poll's hx-include carries all
        of it.
      {% endcomment %}
      <form id="inbox-filters"
            class="ib-filters"
            hx-get="{% url 'inbox:rows' workspace_id=request.workspace.id %}"
            hx-target="#inbox-list"
            hx-swap="innerHTML"
            hx-trigger="filters-changed, input changed delay:300ms from:#inbox-search"
            @submit.prevent>
        <input type="hidden" name="state" x-model="state">
        <input type="hidden" name="assignee" x-model="assignee">
        <input type="hidden" name="open" value="{{ open_conversation_id }}">
        {% comment %}
          Four dropdowns became four views, and the views are underline tabs:
          they are the one true "which slice am I looking at" control on this
          page (HANDOFF §2.2 allows one). Between them they answer "everything
          / nothing claimed yet / mine / done" — the two parameters
          conversations_for already takes, asked as the questions instead of as
          the fields. Channel and label, the genuinely long lists, are in the
          Filter popover below, several of each at once.
        {% endcomment %}
        <div class="tabs tabs-inline ib-tabs" role="tablist" aria-label="Views">
          {% for view in views %}
          <button type="button" role="tab" class="tab" aria-controls="inbox-list"
                  :aria-selected="(state === '{{ view.state|escapejs }}' && assignee === '{{ view.assignee|escapejs }}') ? 'true' : 'false'"
                  @click="state = '{{ view.state|escapejs }}'; assignee = '{{ view.assignee|escapejs }}'; reload()">
            {{ view.label }} <span class="tab-count">{{ view.count }}</span>
          </button>
          {% endfor %}
        </div>
        <div class="ib-toolbar">
          <label class="search-field flex-1 min-w-0">
            {% include "partials/_nav_icon.html" with name="search" icon_size=16 %}
            <input type="search" id="inbox-search" name="q" x-model="q" class="search-input"
                   placeholder="Search conversations" aria-label="Search conversations" maxlength="100">
          </label>
          {% filter_popover groups=filter_groups onchange="reload()" noun="conversation" icon_only=True %}
        </div>
        <div class="ib-chips">{% filter_chips groups=filter_groups onchange="reload()" %}</div>
      </form>
      {% comment %}
        The bulk bar. Outside #inbox-list so the three-second poll cannot swap it
        away mid-action, and hidden until something is selected.
      {% endcomment %}
      {% if can_reply and label_options %}
        <form class="ib-bulk" x-show="count" x-cloak
              hx-post="{% url 'inbox:bulk_label' workspace_id=request.workspace.id %}"
              hx-swap="none"
              x-on:htmx:after-request.camel="clear()">
          {% csrf_token %}
          <template x-for="id in ids" :key="id">
            <input type="hidden" name="conversation" :value="id">
          </template>
          <span class="text-xs" x-text="count + (count === 1 ? ' selected' : ' selected')"></span>
          <label class="sr-only" for="bulk-label">Label</label>
          <select id="bulk-label" class="bb-select" name="label" required>
            <option value="">Choose a label…</option>
            {% for option in label_options %}<option value="{{ option.value }}">{{ option.label }}</option>{% endfor %}
          </select>
          <button type="submit" class="btn-outline btn-inline" name="action" value="add">Add</button>
          <button type="submit" class="btn-outline btn-inline" name="action" value="remove">Remove</button>
          <button type="button" class="btn-link btn-inline" @click="clear()">Clear</button>
        </form>
      {% endif %}
      <div id="inbox-list" class="ib-rail-scroll"
           data-poll
           hx-get="{% url 'inbox:rows' workspace_id=request.workspace.id %}"
           hx-trigger="every 3s, inboxListChanged from:body"
           hx-target="this"
           hx-swap="innerHTML"
           hx-include="#inbox-filters">
        {% include "inbox/_conversation_rows.html" %}
      </div>
    </section>

    {# ── Thread and contact panel ────────────────────────────────── #}
    {% comment %}
      One swap target for both, because they are one conversation: a reply that
      changes the thread can also change the contact's window status, and two
      targets would mean the row that opens a thread has to fill both.
    {% endcomment %}
    <section id="inbox-thread" class="ib-main" aria-label="Conversation" aria-live="polite">
      {% if conversation %}
        {% include "inbox/_thread.html" %}
      {% else %}
        {% comment %}
          Nothing open yet (HANDOFF §3, Inbox): say how much is waiting, how to
          move through it, and offer the first thing that needs a reply rather
          than a blank pane.
        {% endcomment %}
        <div class="ib-thread ib-thread-empty">
          <div class="ib-empty-state">
            <span class="ib-empty-icon" aria-hidden="true">{% include "partials/_nav_icon.html" with name="inbox" icon_size=26 %}</span>
            <p class="ib-empty-title">Select a conversation</p>
            <p class="ib-empty-body">
              {% if unread_count %}{{ unread_count }} conversation{{ unread_count|pluralize }} need{{ unread_count|pluralize:"s," }} a reply.{% else %}You are all caught up.{% endif %}
              Use <b>j</b> and <b>k</b> to move through the list.
            </p>
            {% if conversations %}
              <button type="button" class="ib-empty-action" @click="openFirstUnread()">
                {% if unread_count %}Open first unread{% else %}Open the newest{% endif %}
              </button>
            {% endif %}
          </div>
        </div>
      {% endif %}
    </section>
  </div>
</div>
{% endblock %}

{% block alpine_components %}
<script nonce="{{ request.csp_nonce }}">
  (function () {
    // SPEC §14's 304s, client half. See the comment at the top of this file.
    //
    // Prepended, not appended: responseHandling is first-match-wins and the
    // stock 2xx rule already matches "304", so a rule added after it would
    // never be reached.
    htmx.config.responseHandling.unshift({ code: '304', swap: false });

    // Keyed on the polled element rather than on the URL. Two renders of the
    // same element under different filters produce different ETags, so a
    // carried-over tag simply misses and the server answers 200 — whereas
    // keying on the path would need the query string reassembled here to avoid
    // exactly that, for no benefit.
    var tags = new Map();
    var polled = function (elt) { return elt && elt.hasAttribute && elt.hasAttribute('data-poll') && elt.id; };

    document.body.addEventListener('htmx:configRequest', function (evt) {
      // Only the polled regions revalidate. A mutation must never carry a tag:
      // it would invite a 304 on a request whose whole purpose is to change
      // something.
      var elt = evt.detail.elt;
      if (!polled(elt)) return;
      var tag = tags.get(elt.id);
      if (tag) evt.detail.headers['If-None-Match'] = tag;
    });

    document.body.addEventListener('htmx:afterRequest', function (evt) {
      var elt = evt.detail.elt;
      if (!polled(elt) || !evt.detail.xhr) return;
      // A 304 carries no ETag of its own and the stored one is still current,
      // so only a real response replaces it.
      var tag = evt.detail.xhr.getResponseHeader('ETag');
      if (tag) tags.set(elt.id, tag);
    });

    // Which conversation is open is part of the list's markup — it is the row
    // that draws as current — so the poll has to be told, or the highlight
    // would stay on whatever was open when the page loaded and the j/k cursor
    // would count from there. The hidden field travels with every poll through
    // hx-include; the class is moved here as well so the highlight lands on
    // the click rather than up to three seconds later.
    document.body.addEventListener('click', function (evt) {
      var row = evt.target.closest && evt.target.closest('#inbox-list [data-conversation]');
      if (!row) return;
      // Leave the modified clicks alone: ctrl/cmd/middle-click means "new tab",
      // and the row is a real link precisely so that works.
      if (evt.defaultPrevented || evt.metaKey || evt.ctrlKey || evt.shiftKey || evt.button !== 0) return;
      evt.preventDefault();

      var field = document.querySelector('#inbox-filters [name="open"]');
      if (field) field.value = row.getAttribute('data-conversation') || '';
      document.querySelectorAll('#inbox-list [data-conversation]').forEach(function (other) {
        other.classList.toggle('is-current', other === row);
        other.setAttribute('aria-current', other === row ? 'true' : 'false');
      });

      // Issued from here rather than from the row, so a poll replacing the
      // list mid-flight cannot cost the navigation — see the comment in
      // inbox/_conversation_rows.html.
      htmx.ajax('GET', row.getAttribute('href'), { target: '#inbox-thread', swap: 'innerHTML' });
    });

    // A thread opens at its newest message, and a poll that brings one in
    // follows it down — but only if the reader was already at the bottom, or
    // every three seconds would yank them out of the history they scrolled up
    // to read. Capture-phase, because `scroll` does not bubble.
    var atBottom = true;
    var toBottom = function () {
      var el = document.getElementById('inbox-thread-scroll');
      if (!el) return;
      el.scrollTop = el.scrollHeight;
      atBottom = true;
    };

    document.body.addEventListener('scroll', function (evt) {
      var el = evt.target;
      if (!el || el.id !== 'inbox-thread-scroll') return;
      atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
    }, true);

    document.body.addEventListener('htmx:afterSwap', function (evt) {
      var id = evt.target && evt.target.id;
      // A different conversation: always start at the newest message, whatever
      // the reader had scrolled to in the last one.
      if (id === 'inbox-thread') return toBottom();
      if (id === 'inbox-thread-body' && atBottom) toBottom();
    });

    // And the first render, which no swap covers — a deep link to a thread
    // would otherwise open on the oldest message in its history.
    toBottom();
  })();
</script>

<script nonce="{{ request.csp_nonce }}">
  // The compose box's issue-#24 affordances: attachments, the library picker,
  // and "send later".
  //
  // Defined here rather than in inbox/_composer.html because that partial is
  // re-fetched after every send, and a script inside it would be re-evaluated
  // each time. Alpine needs the x-data factory to already exist when the swapped
  // markup arrives, which this block — rendered before Alpine's own deferred
  // tag — is exactly the window for.
  // Bulk selection for the conversation list. Its state lives out here, not in
  // the rows, because the rows are replaced every three seconds — binding the
  // checkboxes to this restores them on every swap instead of losing a
  // half-made selection to the poll.
  function inboxSelection() {
    return {
      ids: [],
      get count() { return this.ids.length; },
      isSelected(id) { return this.ids.indexOf(id) !== -1; },
      toggle(id, on) {
        if (on) {
          if (!this.isSelected(id)) this.ids.push(id);
        } else {
          this.ids = this.ids.filter((value) => value !== id);
        }
      },
      clear() { this.ids = []; },
    };
  }

  function inboxComposer(config) {
    return {
      conversationId: config.conversationId,
      // Reply or Internal note — which tab the compose box is on.
      mode: 'reply',
      items: [],
      picker: { open: false, loading: false, error: '', term: '', results: [] },

      drop(id) {
        this.items = this.items.filter((item) => item.id !== id);
      },

      togglePicker() {
        this.picker.open = !this.picker.open;
        if (this.picker.open && !this.picker.results.length) this.loadPicker();
      },

      closePicker() {
        this.picker.open = false;
      },

      // One page from apps/media_library/picker.py. `platform` populates
      // platform_warnings and never filters, so the kind filter is ours: the
      // list only offers what this channel can actually carry, which is the
      // same table apps/inbox/views.py reads server-side.
      loadPicker() {
        const url = new URL(config.pickerUrl, window.location.origin);
        url.searchParams.set('platform', config.platform);
        if (this.picker.term) url.searchParams.set('q', this.picker.term);
        this.picker.loading = true;
        this.picker.error = '';
        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'same-origin' })
          .then((response) => {
            if (!response.ok) throw new Error('unavailable');
            return response.json();
          })
          .then((payload) => {
            this.picker.results = (payload.results || []).filter(
              (asset) => config.kinds.indexOf(asset.kind) !== -1
            );
          })
          .catch(() => {
            this.picker.error = 'The media library could not be reached.';
            this.picker.results = [];
          })
          .finally(() => {
            this.picker.loading = false;
          });
      },

      // Store the id, never the url — the picker's contract is explicit that the
      // url is minted per request, and the view resolves the id to a fresh
      // signed one at send time.
      attach(asset) {
        if (this.items.length >= config.max) {
          this.picker.error = 'That is as many attachments as one message can carry.';
          return;
        }
        if (!this.items.some((item) => item.id === asset.id)) {
          this.items.push({ id: asset.id, name: asset.title || asset.filename });
        }
        this.closePicker();
      },
    };
  }
</script>
{% endblock %}