<form [formGroup]="form">
  <div class="config-form-field">
    <pa-toggle
      formControlName="generateAnswer"
      withBackground
      spaceBetweenLabelAndToggle
      (valueChange)="heightChanged.emit()">
      <span class="toggle-label">
        {{ 'search.configuration.generative-answer.generate-answer.toggle-label' | translate }}
      </span>
    </pa-toggle>
    <div class="config-form-help">
      {{ 'search.configuration.generative-answer.generate-answer.toggle-description' | translate }}
    </div>
  </div>
  @if (generateAnswerEnabled) {
    <div class="config-form-field">
      <div class="title-xs">{{ 'search.configuration.generative-answer.generative-model.title' | translate }}</div>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.generative-model.description' | translate }}
      </div>
      <div class="extra-fields visible">
        <stf-model-selector
          formControlName="generativeModel"
          [providers]="generativeProviders"
          [learningConfigurations]="learningConfigurations"
          (heightChanged)="heightChanged.emit()"></stf-model-selector>
      </div>
    </div>

    <div class="config-form-field">
      <pa-toggle
        formControlName="usePrompt"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.prompt.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.prompt.toggle-description' | translate }}
      </div>
      @if (!!defaultPrompt) {
        <blockquote [class.overridden]="userPromptOverridden">
          {{ defaultPrompt }}
        </blockquote>
      }
      <div
        class="extra-fields"
        [class.visible]="usePromptEnabled">
        @if (userPromptInfo) {
          <nsi-info-card>{{ userPromptInfo }}</nsi-info-card>
        }
        <nsi-expandable-textarea
          formControlName="prompt"
          resizable
          rows="4"
          help="search.configuration.generative-answer.prompt.textarea-help"
          modalTitle="search.configuration.generative-answer.prompt.textarea-label"
          (resizing)="heightChanged.emit()">
          {{ 'search.configuration.generative-answer.prompt.textarea-label' | translate }}
        </nsi-expandable-textarea>
      </div>
    </div>
    <div class="config-form-field">
      <pa-toggle
        formControlName="useSystemPrompt"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.system-prompt.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.system-prompt.toggle-description' | translate }}
      </div>
      @if (!!defaultSystemPrompt) {
        <blockquote [class.overridden]="systemPromptOverridden">
          {{ defaultSystemPrompt }}
        </blockquote>
      }
      <div
        class="extra-fields"
        [class.visible]="useSystemPromptEnabled">
        <nsi-expandable-textarea
          formControlName="systemPrompt"
          resizable
          rows="4"
          help="search.configuration.generative-answer.prompt.textarea-help"
          modalTitle="search.configuration.generative-answer.system-prompt.textarea-label"
          (resizing)="heightChanged.emit()">
          {{ 'search.configuration.generative-answer.system-prompt.textarea-label' | translate }}
        </nsi-expandable-textarea>
      </div>
    </div>
    @if (useSearchResults) {
      <div class="config-form-field">
        <pa-toggle
          formControlName="askSpecificResource"
          withBackground
          spaceBetweenLabelAndToggle
          (valueChange)="heightChanged.emit()">
          <span class="toggle-label">
            {{ 'search.configuration.generative-answer.ask-resource.toggle-label' | translate }}
          </span>
        </pa-toggle>
        <div class="config-form-help">
          {{ 'search.configuration.generative-answer.ask-resource.toggle-description' | translate }}
        </div>
        <div
          class="extra-fields"
          [class.visible]="askSpecificResourceEnabled">
          <pa-input
            formControlName="specificResourceSlug"
            pattern="[\w-]+"
            [errorMessages]="{
              pattern: 'search.configuration.generative-answer.ask-resource.pattern-error'
            }">
            {{ 'search.configuration.generative-answer.ask-resource.input-label' | translate }}
          </pa-input>
          <pa-button
            class="align-on-right"
            (click)="searchResource()">
            {{ 'search.configuration.generative-answer.ask-resource.assistant-button-label' | translate }}
          </pa-button>
        </div>
      </div>
    }
    <div class="config-form-field">
      <pa-toggle
        formControlName="showReasoning"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.reasoning.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.reasoning.toggle-description' | translate }}
      </div>
      <div
        class="extra-fields"
        [class.visible]="showReasoningEnabled">
        <pa-select
          formControlName="reasoningEffort"
          [label]="'search.configuration.generative-answer.reasoning.effort-label' | translate"
          [help]="'search.configuration.generative-answer.reasoning.effort-help' | translate">
          <pa-option value="low">
            {{ 'search.configuration.generative-answer.reasoning.effort-low' | translate }}
          </pa-option>
          <pa-option value="medium">
            {{ 'search.configuration.generative-answer.reasoning.effort-medium' | translate }}
          </pa-option>
          <pa-option value="high">
            {{ 'search.configuration.generative-answer.reasoning.effort-high' | translate }}
          </pa-option>
        </pa-select>
      </div>
      <div
        class="extra-fields"
        [class.visible]="showReasoningEnabled">
        <pa-input
          formControlName="reasoningBudget"
          type="number"
          [help]="'search.configuration.generative-answer.reasoning.budget-help' | translate">
          {{ 'search.configuration.generative-answer.reasoning.budget-label' | translate }}
        </pa-input>
      </div>
    </div>
    <div class="config-form-field">
      <pa-toggle
        formControlName="limitTokenConsumption"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.limit-token.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.limit-token.toggle-description' | translate }}
      </div>
      <div
        class="extra-fields"
        [class.visible]="limitTokenConsumptionEnabled">
        <pa-input
          formControlName="tokenConsumptionLimit"
          type="number">
          {{ 'search.configuration.generative-answer.limit-token.max-input' | translate }}
        </pa-input>
      </div>
      <div
        class="extra-fields"
        [class.visible]="limitTokenConsumptionEnabled">
        <pa-input
          formControlName="outputTokenConsumptionLimit"
          type="number">
          {{ 'search.configuration.generative-answer.limit-token.max-output' | translate }}
        </pa-input>
      </div>
    </div>
    <div class="config-form-field">
      <pa-toggle
        formControlName="preferMarkdown"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.prefer-markdown.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.prefer-markdown.toggle-description' | translate }}
      </div>
    </div>
    <div class="config-form-field">
      <pa-toggle
        formControlName="useImages"
        withBackground
        spaceBetweenLabelAndToggle
        (valueChange)="heightChanged.emit()">
        <span class="toggle-label">
          {{ 'search.configuration.generative-answer.images-in-question.toggle-label' | translate }}
        </span>
      </pa-toggle>
      <div class="config-form-help">
        {{ 'search.configuration.generative-answer.images-in-question.toggle-description' | translate }}
        <div
          class="extra-fields"
          [class.visible]="useImages">
          <pa-radio-group formControlName="imageUsage">
            <pa-radio
              value="query"
              help="search.configuration.generative-answer.images-in-question.as-query-help">
              {{ 'search.configuration.generative-answer.images-in-question.as-query' | translate }}
            </pa-radio>
            <pa-radio
              value="context"
              help="search.configuration.generative-answer.images-in-question.as-context-help">
              {{ 'search.configuration.generative-answer.images-in-question.as-context' | translate }}
            </pa-radio>
          </pa-radio-group>
        </div>
      </div>
    </div>
    @if (useSearchResults) {
      <ng-container formGroupName="ragStrategies">
        <div class="subsection-title">
          {{ 'search.configuration.generative-answer.rag-strategies.title' | translate }}
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="includeTextualHierarchy"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.rag-strategies.textual-hierarchy.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{
              'search.configuration.generative-answer.rag-strategies.textual-hierarchy.toggle-description' | translate
            }}
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="includeNeighbouringParagraphs"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{
                'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.toggle-label' | translate
              }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{
              'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.toggle-description'
                | translate
            }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="includeNeighbouringParagraphsEnabled">
            <div>
              <label
                for="before"
                class="extra-label">
                {{
                  'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.preceding' | translate
                }}
              </label>
              <pa-input
                id="before"
                formControlName="precedingParagraphs"
                type="number"
                externalLabel></pa-input>
            </div>
            <div>
              <label
                for="after"
                class="extra-label">
                {{
                  'search.configuration.generative-answer.rag-strategies.neighbouring-paragraphs.succeeding' | translate
                }}
              </label>
              <pa-input
                id="after"
                formControlName="succeedingParagraphs"
                type="number"
                externalLabel></pa-input>
            </div>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="entireResourceAsContext"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="entireResourceAsContextEnabled">
            <div class="extra-label">
              {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.limit-resources' | translate }}
            </div>
            <pa-input
              formControlName="maxNumberOfResources"
              type="number">
              {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.input-label' | translate }}
            </pa-input>
          </div>
          <div
            class="extra-fields"
            [class.visible]="entireResourceAsContextEnabled">
            <pa-toggle
              formControlName="includeRemaining"
              spaceBetweenLabelAndToggle>
              <span class="toggle-label">
                {{
                  'search.configuration.generative-answer.rag-strategies.entire-resource.include-remaining-label'
                    | translate
                }}
              </span>
            </pa-toggle>
          </div>
          <div
            class="extra-fields"
            [class.visible]="entireResourceAsContextEnabled">
            <div class="extra-label">
              {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.exclude' | translate }}
            </div>
            <pa-input formControlName="excludeFilter">
              {{ 'search.configuration.generative-answer.rag-strategies.entire-resource.exclude-label' | translate }}
            </pa-input>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="metadatasRagStrategy"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.rag-strategies.metadatas.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.generative-answer.rag-strategies.metadatas.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="metadatasEnabled"
            formGroupName="metadatas">
            @for (metadata of metadataIds; track metadata) {
              <pa-checkbox [formControlName]="metadata">
                <code>{{ metadata }}</code>
              </pa-checkbox>
            }
          </div>
        </div>
        @if (isGraphSearchEnabled | async) {
          <div class="config-form-field">
            <pa-toggle
              formControlName="graphRagStrategy"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="heightChanged.emit()">
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.rag-strategies.graph.toggle-label' | translate }}
                <nsi-badge kind="tertiary">BETA</nsi-badge>
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.generative-answer.rag-strategies.graph.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="graphEnabled"
              formGroupName="graph">
              <pa-input
                formControlName="hops"
                type="number"
                [help]="'search.configuration.generative-answer.rag-strategies.graph.hops-description' | translate">
                {{ 'search.configuration.generative-answer.rag-strategies.graph.hops' | translate }}
              </pa-input>
              <pa-input
                formControlName="top_k"
                type="number"
                [help]="'search.configuration.generative-answer.rag-strategies.graph.top_k-description' | translate">
                {{ 'search.configuration.generative-answer.rag-strategies.graph.top_k' | translate }}
              </pa-input>
              <pa-checkbox
                formControlName="exclude_processor_relations"
                [help]="
                  'search.configuration.generative-answer.rag-strategies.graph.exclude_processor_relations_help'
                    | translate
                ">
                {{
                  'search.configuration.generative-answer.rag-strategies.graph.exclude_processor_relations' | translate
                }}
              </pa-checkbox>
              <pa-checkbox
                formControlName="relation_text_as_paragraphs"
                [help]="
                  'search.configuration.generative-answer.rag-strategies.graph.relation_text_as_paragraphs_help'
                    | translate
                ">
                {{
                  'search.configuration.generative-answer.rag-strategies.graph.relation_text_as_paragraphs' | translate
                }}
              </pa-checkbox>
              <pa-checkbox
                formControlName="generative_relation_ranking"
                [help]="
                  'search.configuration.generative-answer.rag-strategies.graph.generative_relation_ranking_help'
                    | translate
                ">
                {{
                  'search.configuration.generative-answer.rag-strategies.graph.generative_relation_ranking' | translate
                }}
              </pa-checkbox>
              <pa-checkbox
                formControlName="suggest_query_entity_detection"
                [help]="
                  'search.configuration.generative-answer.rag-strategies.graph.suggest_query_entity_detection_help'
                    | translate
                ">
                {{
                  'search.configuration.generative-answer.rag-strategies.graph.suggest_query_entity_detection'
                    | translate
                }}
              </pa-checkbox>
            </div>
          </div>
        }
        <div class="config-form-field">
          <pa-toggle
            formControlName="fieldsAsContext"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.rag-strategies.specific-fields.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.generative-answer.rag-strategies.specific-fields.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="fieldsAsContextEnabled">
            <nsi-expandable-textarea
              formControlName="fieldIds"
              resizable
              rows="4"
              modalTitle="search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.textarea-label"
              (resizing)="heightChanged.emit()">
              {{
                'search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.textarea-label'
                  | translate
              }}
            </nsi-expandable-textarea>
            <nsi-info-card>
              {{
                'search.configuration.generative-answer.rag-strategies.specific-fields.field-ids.info-box' | translate
              }}
            </nsi-info-card>
            <nsi-expandable-textarea
              formControlName="dataAugmentationFieldPrefixes"
              resizable
              rows="4"
              modalTitle="search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.textarea-label"
              (resizing)="heightChanged.emit()">
              {{
                'search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.textarea-label'
                  | translate
              }}
            </nsi-expandable-textarea>
            <nsi-info-card>
              {{
                'search.configuration.generative-answer.rag-strategies.specific-fields.field-prefixes.info-box'
                  | translate
              }}
            </nsi-info-card>
          </div>
        </div>
        <div class="config-form-field">
          <pa-toggle
            formControlName="conversationalRagStrategy"
            withBackground
            spaceBetweenLabelAndToggle
            (valueChange)="heightChanged.emit()">
            <span class="toggle-label">
              {{ 'search.configuration.generative-answer.rag-strategies.conversational.toggle-label' | translate }}
            </span>
          </pa-toggle>
          <div class="config-form-help">
            {{ 'search.configuration.generative-answer.rag-strategies.conversational.toggle-description' | translate }}
          </div>
          <div
            class="extra-fields"
            [class.visible]="conversationalStrategyEnabled"
            formGroupName="conversationOptions">
            <pa-checkbox formControlName="attachmentsText">
              {{
                'search.configuration.generative-answer.rag-strategies.conversational.option.attachments_text'
                  | translate
              }}
            </pa-checkbox>
            <pa-checkbox formControlName="attachmentsImages">
              {{
                'search.configuration.generative-answer.rag-strategies.conversational.option.attachments_images'
                  | translate
              }}
            </pa-checkbox>
            <pa-checkbox formControlName="full">
              {{ 'search.configuration.generative-answer.rag-strategies.conversational.option.full' | translate }}
            </pa-checkbox>
          </div>
          <div
            class="extra-fields"
            [class.visible]="conversationalStrategyEnabled && !fullMessagesEnabled">
            <div class="extra-label">
              {{ 'search.configuration.generative-answer.rag-strategies.conversational.max-messages' | translate }}
            </div>
            <pa-input
              formControlName="maxMessages"
              type="number">
              {{ 'search.configuration.generative-answer.rag-strategies.conversational.input-label' | translate }}
            </pa-input>
          </div>
          <div></div>
        </div>
        @if (isRagImagesEnabled | async) {
          <div class="config-form-field">
            <pa-toggle
              formControlName="includePageImages"
              withBackground
              spaceBetweenLabelAndToggle
              (valueChange)="heightChanged.emit()">
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.rag-strategies.page-images.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{ 'search.configuration.generative-answer.rag-strategies.page-images.toggle-description' | translate }}
            </div>
            <div
              class="extra-fields"
              [class.visible]="includePageImagesEnabled">
              <div class="extra-label">
                {{ 'search.configuration.generative-answer.rag-strategies.page-images.limit-images' | translate }}
              </div>
              <pa-input
                formControlName="maxNumberOfImages"
                type="number">
                {{ 'search.configuration.generative-answer.rag-strategies.page-images.input-label' | translate }}
              </pa-input>
            </div>
          </div>
          <div class="config-form-field">
            <pa-toggle
              formControlName="includeParagraphImages"
              withBackground
              spaceBetweenLabelAndToggle>
              <span class="toggle-label">
                {{ 'search.configuration.generative-answer.rag-strategies.paragraph-images.toggle-label' | translate }}
              </span>
            </pa-toggle>
            <div class="config-form-help">
              {{
                'search.configuration.generative-answer.rag-strategies.paragraph-images.toggle-description' | translate
              }}
            </div>
          </div>
        }
      </ng-container>
    }
  }
</form>
