{% comment %}
The composer's Alpine component.

Its own file for the reason templates/contacts/_filter_bar_script.html is: it is
a hundred lines of JavaScript and the step it belongs to is already a page. It
is included from compose.html's alpine_components block, which base.html renders
before Alpine's own deferred script — the window in which a global x-data
factory has to be defined for x-data to be able to call it, and the reason it is
NOT included from the step partial htmx swaps in.

It knows the *shape* of a send_message config — blocks, buttons, quick replies —
and nothing about which of them a platform allows. Every limit and every
affordance is read out of `config`, which the view fills from
apps/broadcasts/composer.py::composer_config, which reads the capability and
policy tables. Hard-coding "WhatsApp allows three buttons" here would be the
second capability table contract 4 exists to prevent.

It also does not validate. The server does, through the flow schema
(apps/flows/schema), which rejects unknown keys at any depth — so a hand-crafted
POST gets the same treatment as this form, which is the only place validation can
honestly live (SECURITY-BASELINE §7).
{% endcomment %}
<script nonce="{{ request.csp_nonce }}">
  function broadcastComposer(config, savedConfig, savedTag, savedTemplateId, savedVariables) {
    // A stored block -> the editor's working shape, and back. The schema is a
    // tagged union on `type`, so an editor field that does not belong to the
    // block's kind has to be dropped on the way out: every object in the graph
    // is closed (additionalProperties: false), and a stray `caption` on a text
    // block would be refused by the server rather than ignored.
    function packBlock(block) {
      if (block.type === 'text') {
        return block.text ? { type: 'text', text: block.text } : null;
      }
      if (block.type === 'card') {
        if (!block.title) return null;
        var card = { type: 'card', title: block.title };
        if (block.subtitle) card.subtitle = block.subtitle;
        if (block.image) card.image = block.image;
        return card;
      }
      // image / audio / video / file — the schema wants media_id or url, one of
      // the two, so a blank row is dropped rather than sent as an empty string.
      if (!block.media) return null;
      var media = { type: block.type };
      // The same rule apps/flows/engine/nodes/send_message.py::_is_media_id
      // applies: a value that parses as a UUID is a library id, anything else is
      // a URL. Storing a pasted link under media_id makes the send node resolve
      // it against the library, and an id that does not resolve raises rather
      // than falling back — so the whole message is dropped for a link that was
      // perfectly deliverable.
      if (isLibraryId(block.media)) {
        media.media_id = block.media;
      } else {
        media.url = block.media;
      }
      if (block.caption) media.caption = block.caption;
      return media;
    }

    //: UUID in any of the shapes Python's uuid.UUID() accepts a string in.
    var UUID_RE = /^[0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}$/i;

    function isLibraryId(value) {
      return UUID_RE.test(String(value).trim().replace(/^urn:uuid:/i, ""));
    }

    function packButton(button, index) {
      if (!button.label) return null;
      var id = button.id || ('b' + (index + 1));
      if (button.action === 'url') {
        return button.url ? { id: id, label: button.label, action: 'url', url: button.url } : null;
      }
      return { id: id, label: button.label, action: 'postback' };
    }

    return {
      config: config,
      mode: savedTemplateId ? 'template' : 'message',
      blocks: (savedConfig && savedConfig.blocks ? savedConfig.blocks : []).map(function (block) {
        return {
          type: block.type,
          text: block.text || '',
          // One editor field, either stored key — so re-opening a draft shows
          // what was typed rather than an empty box beside a stored url.
          media: block.media_id || block.url || '',
          caption: block.caption || '',
          title: block.title || '',
          subtitle: block.subtitle || '',
          image: block.image || '',
        };
      }),
      buttons: (savedConfig && savedConfig.buttons ? savedConfig.buttons : []).map(function (button) {
        return { id: button.id, label: button.label, action: button.action, url: button.url || '' };
      }),
      tag: savedTag || '',
      templateId: savedTemplateId || '',
      variables: savedVariables && !Array.isArray(savedVariables) ? savedVariables : {},

      addBlock: function (kind) {
        this.blocks.push({ type: kind, text: '', media: '', caption: '', title: '', subtitle: '', image: '' });
      },
      addButton: function () {
        if (this.buttons.length >= this.config.max_buttons) return;
        this.buttons.push({ id: '', label: '', action: 'postback', url: '' });
      },

      get selectedTemplate() {
        var id = this.templateId;
        return this.config.templates.find(function (template) { return template.id === id; }) || null;
      },

      get costHint() {
        var hint = this.config.cost_hint;
        var template = this.selectedTemplate;
        if (!hint || !template) return '';
        if (!hint.configured) {
          return 'No per-message price is set for this workspace yet.';
        }
        // The composer multiplies; apps/channels/segments.py and the cost-hint
        // table both deliberately stop short of a price times a count.
        return 'About ' + hint[template.category] + ' ' + hint.currency + ' per message.';
      },

      // SPEC §6.6's segment-count preview is NOT computed here. The arithmetic
      // lives in apps/channels/segments.py, which is pure and is the only
      // implementation, and L5-D already exposes it as an endpoint written for
      // this composer by name. A JavaScript approximation of GSM-7 versus UCS-2
      // would be a second counter that disagrees with the one the send is
      // costed against — so this only publishes the text and lets the server
      // answer.
      announceText: function () {
        window.broadcastMessageText = function () { return this.messageText; }.bind(this);
        document.body.dispatchEvent(new Event('segments-changed'));
      },
      get messageText() {
        return this.blocks.filter(function (b) { return b.type === 'text'; })
                          .map(function (b) { return b.text || ''; }).join('\n');
      },

      get serialisedConfig() {
        var packed = this.blocks.map(packBlock).filter(function (b) { return b !== null; });
        var out = { blocks: packed };
        var buttons = this.buttons.map(packButton).filter(function (b) { return b !== null; });
        if (buttons.length) out.buttons = buttons;
        return JSON.stringify(out);
      },
      get serialisedVariables() {
        return JSON.stringify(this.variables || {});
      },
    };
  }

  // "Save and exit" in the editor bar. Each step only saves when it is
  // continued past, so a plain link would drop whatever was changed on the
  // step on screen. Instead: if the step's form (the one marked
  // data-wizard-save) differs from what it loaded with, submit it with exit=1
  // and let the server save it and send us to the list — or, if it refuses,
  // re-render the step with the reason, so nobody leaves thinking an edit was
  // kept when it was not. Unchanged, it is just the link.
  function broadcastWizardExit() {
    function saveForm() {
      return document.querySelector('#broadcast-wizard form[data-wizard-save]');
    }
    function stateOf(form) {
      return new URLSearchParams(new FormData(form)).toString();
    }
    function snapshot() {
      // A frame later, so Alpine has bound the step's :value inputs first.
      window.requestAnimationFrame(function () {
        var form = saveForm();
        if (form) form.dataset.loadedState = stateOf(form);
      });
    }
    return {
      init() {
        snapshot();
        document.body.addEventListener('htmx:afterSettle', function (event) {
          if (event.detail.target && event.detail.target.id === 'broadcast-wizard') snapshot();
        });
      },
      leave(event) {
        var form = saveForm();
        if (!form || form.dataset.loadedState === undefined || stateOf(form) === form.dataset.loadedState) return;
        event.preventDefault();
        var flag = document.createElement('input');
        flag.type = 'hidden';
        flag.name = 'exit';
        flag.value = '1';
        form.appendChild(flag);
        form.requestSubmit();
      },
    };
  }
</script>