<div {{did-insert this.setupContextMenu}}>
  {{#if this.showContextMenu}}
    <div class="ai-helper-context-menu">
      {{#if (eq this.menuState this.CONTEXT_MENU_STATES.triggers)}}
        <ul class="ai-helper-context-menu__trigger">
          <li>
            <DButton
              @icon="discourse-sparkles"
              @action={{this.toggleAiHelperOptions}}
              @label="discourse_ai.ai_helper.context_menu.trigger"
              class="btn-flat"
            />
          </li>
        </ul>

      {{else if (eq this.menuState this.CONTEXT_MENU_STATES.options)}}
        <ul class="ai-helper-context-menu__options">
          {{#each this.helperOptions as |option|}}
            {{#if (eq option.name "custom_prompt")}}
              <AiHelperCustomPrompt
                @value={{this.customPromptValue}}
                @promptArgs={{option}}
                @submit={{this.updateSelected}}
              />
            {{else}}
              <li data-name={{option.translated_name}} data-value={{option.id}}>
                <DButton
                  @icon={{option.icon}}
                  @translatedLabel={{option.translated_name}}
                  @action={{fn this.updateSelected option}}
                  class="btn-flat"
                />
              </li>
            {{/if}}
          {{/each}}
        </ul>

      {{else if (eq this.menuState this.CONTEXT_MENU_STATES.loading)}}
        <AiHelperLoading @cancel={{this.cancelAIAction}} />

      {{else if (eq this.menuState this.CONTEXT_MENU_STATES.review)}}
        <ul class="ai-helper-context-menu__review">
          <li>
            <DButton
              @icon="exchange-alt"
              @label="discourse_ai.ai_helper.context_menu.view_changes"
              @action={{this.viewChanges}}
              class="btn-flat view-changes"
            />
          </li>
          <li>
            <DButton
              @icon="undo"
              @label="discourse_ai.ai_helper.context_menu.revert"
              @action={{this.undoAIAction}}
              class="btn-flat revert"
            />
          </li>
          <li>
            <DButton
              @icon="check"
              @label="discourse_ai.ai_helper.context_menu.confirm"
              @action={{this.confirmChanges}}
              class="btn-flat confirm"
            />
          </li>
        </ul>

      {{else if (eq this.menuState this.CONTEXT_MENU_STATES.resets)}}
        <ul class="ai-helper-context-menu__resets">
          <li>
            <DButton
              @icon="undo"
              @label="discourse_ai.ai_helper.context_menu.undo"
              @action={{this.undoAIAction}}
              class="btn-flat undo"
            />
          </li>
          <li>
            <DButton
              @icon="discourse-sparkles"
              @label="discourse_ai.ai_helper.context_menu.regen"
              @action={{fn this.updateSelected this.lastUsedOption}}
              class="btn-flat"
            />
          </li>
        </ul>
      {{/if}}
    </div>
  {{/if}}
</div>

{{#if this.showDiffModal}}
  <Modal::DiffModal
    @confirm={{this.confirmChanges}}
    @diff={{this.diff}}
    @oldValue={{this.initialValue}}
    @newValue={{this.newSelectedText}}
    @revert={{this.undoAIAction}}
    @closeModal={{fn (mut this.showDiffModal) false}}
  />
{{/if}}

{{#if this.showThumbnailModal}}
  <Modal::ThumbnailSuggestions
    @thumbnails={{this.thumbnailSuggestions}}
    @closeModal={{fn (mut this.showThumbnailModal) false}}
  />
{{/if}}