<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")}}
              <div
                class="ai-custom-prompt"
                {{did-insert this.setupCustomPrompt}}
              >
                <Input
                  @value={{this.customPromptValue}}
                  placeholder={{i18n
                    "discourse_ai.ai_helper.context_menu.custom_prompt.placeholder"
                  }}
                  class="ai-custom-prompt__input"
                  @enter={{action (fn this.updateSelected option)}}
                />

                <DButton
                  @class="ai-custom-prompt__submit btn-primary"
                  @icon="discourse-sparkles"
                  @action={{this.updateSelected}}
                  @actionParam={{option}}
                  @disabled={{not this.customPromptValue.length}}
                />
              </div>
            {{else}}
              <li data-name={{option.translated_name}} data-value={{option.id}}>
                <DButton
                  @icon={{option.icon}}
                  @class="btn-flat"
                  @translatedLabel={{option.translated_name}}
                  @action={{this.updateSelected}}
                  @actionParam={{option}}
                />
              </li>
            {{/if}}
          {{/each}}
        </ul>

      {{else if (eq this.menuState this.CONTEXT_MENU_STATES.loading)}}
        <div class="ai-helper-context-menu__loading">
          <div class="dot-falling"></div>
          <span>
            {{i18n "discourse_ai.ai_helper.context_menu.loading"}}
          </span>
          <DButton
            @icon="times"
            @title="discourse_ai.ai_helper.context_menu.cancel"
            @action={{this.cancelAIAction}}
            class="btn-flat cancel-request"
          />
        </div>

      {{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={{this.updateSelected}}
              @actionParam={{this.lastUsedOption}}
              class="btn-flat"
            />
          </li>
        </ul>
      {{/if}}
    </div>
  {{/if}}
</div>

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