<section class="configuration-header-section">
  <div class="section-title">{{ mainTitle | translate }}</div>
  <div class="config-selection-container">
    <pa-select
      [formControl]="selectedConfig"
      [options]="configurations"
      (valueChange)="selectConfig($event)"></pa-select>
    @if (canModifyConfig | async) {
      <div
        class="config-status-indicator"
        [class.modified]="isConfigModified"></div>
    }
  </div>
  @if (isConfigModified && (canModifyConfig | async)) {
    <nsi-info-card type="warning">{{ 'search.configuration.modification-warning' | translate }}</nsi-info-card>
  }
  @if (displayWidgetButtonLine) {
    <div class="config-actions">
      @if (canModifyConfig | async) {
        <nsi-button-mini
          icon="widget"
          (click)="triggerCreateWidget()">
          {{ 'search.configuration.action.create-widget' | translate }}
        </nsi-button-mini>
      }
      <nsi-button-mini
        icon="code"
        [disabled]="!lastQuery"
        [paTooltip]="!lastQuery ? 'search.configuration.action.get-code-tooltip' : undefined"
        (click)="showLastRequest()">
        {{ 'search.configuration.action.get-code' | translate }}
      </nsi-button-mini>
      @if (isRagLabAuthorized | async) {
        <nsi-button-mini
          icon="lab"
          routerLink="../rag-lab"
          [disabled]="configurations.length <= 1 || isConfigUnsupported"
          paTooltip="search.configuration.action.rag-lab-tooltip">
          {{ 'search.configuration.action.rag-lab' | translate }}
        </nsi-button-mini>
      }
      @if (!isNucliaConfig && (canModifyConfig | async)) {
        <nsi-button-mini
          icon="trash"
          destructive
          (click)="deleteConfig()"></nsi-button-mini>
      }
    </div>
  }
</section>

<section [style]="bottomSectionStyle">
  @if (isConfigModified || displayWidgetButtonLine) {
    <div class="current-config-title">
      <div class="section-title">
        @if (displayWidgetButtonLine) {
          {{ 'search.configuration.current-config-title' | translate }}
        }
      </div>

      <div class="config-actions">
        <nsi-button-mini
          icon="file-code"
          [disabled]="isConfigUnsupported"
          (click)="switchToJsonMode()"
          [paPopover]="switchHelp"></nsi-button-mini>
        <pa-popover #switchHelp>
          <span [innerHTML]="'search.configuration.action.switch-mode' | translate"></span>
        </pa-popover>
        <nsi-button-mini
          icon="undo"
          [disabled]="!isConfigModified"
          (click)="resetConfig()">
          {{ 'search.configuration.action.reset' | translate }}
        </nsi-button-mini>
        @if (canModifyConfig | async) {
          <div>
            <nsi-button-mini
              icon="download"
              [disabled]="!isConfigModified"
              [paPopup]="isNucliaConfig ? null : saveMenu"
              (click)="isNucliaConfig ? saveConfig() : null">
              {{ 'search.configuration.action.save' | translate }}
            </nsi-button-mini>
            <pa-dropdown #saveMenu>
              <pa-option (selectOption)="saveConfig()">
                {{ 'search.configuration.action.save-as-new' | translate }}
              </pa-option>
              <pa-option (selectOption)="overwriteConfig()">
                {{ 'search.configuration.action.overwrite' | translate }}
              </pa-option>
            </pa-dropdown>
          </div>
        }
      </div>
    </div>
  }

  @if (initialised) {
    @if (isConfigUnsupported) {
      @if (originalJsonConfig !== currentJsonConfig) {
        <nsi-info-card
          type="warning"
          icon="warning">
          {{ 'search.configuration.unsupported-warning' | translate }}
        </nsi-info-card>
      } @else {
        <nsi-info-card icon="info">
          {{ 'search.configuration.unsupported-info' | translate }}
        </nsi-info-card>
      }
      <pa-toggle
        [value]="useGenerativeAnswer"
        (valueChange)="updateGenerativeAnswer($event)">
        {{ 'search.configuration.use-generative-answer' | translate }}
      </pa-toggle>
      <nsi-expandable-textarea
        modalTitle="search.configuration.json-config-modal-title"
        [rows]="12"
        [value]="currentJsonConfig"
        (valueChange)="updateJsonConfig($event)"></nsi-expandable-textarea>
    } @else if ((savedConfig | isTypedConfig) && (currentConfig | isTypedConfig)) {
      <pa-accordion (toggleAccordion)="scrollOnTop()">
        <pa-accordion-item
          #searchBox
          id="search-box"
          [itemTitle]="'search.configuration.search-box.section-title' | translate"
          [description]="'search.configuration.search-box.section-description' | translate"
          (expandedChange)="updateSearchBoxHeight()">
          <pa-accordion-item-body>
            <stf-search-box-form
              [config]="savedConfig?.searchBox"
              [relationsEnabled]="currentConfig?.resultDisplay?.relations || false"
              [semanticModels]="semanticModels"
              (configChanged)="updateSearchBoxConfig($event)"
              (heightChanged)="updateSearchBoxHeight()"></stf-search-box-form>
          </pa-accordion-item-body>
        </pa-accordion-item>
        <pa-accordion-item
          #generativeAnswer
          id="generative-answer"
          [itemTitle]="'search.configuration.generative-answer.section-title' | translate"
          [description]="'search.configuration.generative-answer.section-description' | translate"
          (expandedChange)="updateGenerativeAnswerHeight()">
          <pa-accordion-item-body>
            <stf-generative-answer-form
              [config]="savedConfig?.generativeAnswer"
              [defaultPrompt]="defaultPromptFromSettings"
              [defaultSystemPrompt]="defaultSystemPromptFromSettings"
              [promptInfos]="promptInfos"
              [generativeProviders]="generativeProviders"
              [learningConfigurations]="learningConfigurations"
              [useSearchResults]="currentConfig?.searchBox?.useSearchResults ?? true"
              (configChanged)="updateGenerativeAnswerConfig($event)"
              (heightChanged)="updateGenerativeAnswerHeight()"></stf-generative-answer-form>
          </pa-accordion-item-body>
        </pa-accordion-item>
        <pa-accordion-item
          #results
          id="results"
          [itemTitle]="'search.configuration.result-display.section-title' | translate"
          [description]="'search.configuration.result-display.section-description' | translate"
          (expandedChange)="updateResultsHeight()">
          <pa-accordion-item-body>
            <stf-results-display-form
              [config]="savedConfig?.resultDisplay"
              [useSynonymsEnabled]="currentConfig?.searchBox?.useSynonyms || false"
              [modelNames]="generativeModelNames"
              [generativeModel]="currentConfig?.generativeAnswer?.generativeModel"
              [generateAnswer]="currentConfig?.generativeAnswer?.generateAnswer ?? true"
              [useSearchResults]="currentConfig?.searchBox?.useSearchResults ?? true"
              (configChanged)="updateResultDisplayConfig($event)"
              (heightChanged)="updateResultsHeight()"></stf-results-display-form>
          </pa-accordion-item-body>
        </pa-accordion-item>
        @if (isRoutingEnabled | async) {
          <pa-accordion-item
            #routing
            id="routing"
            [itemTitle]="'search.configuration.routing.section-title' | translate"
            [description]="'search.configuration.routing.section-description' | translate"
            (expandedChange)="updateRoutingHeight()">
            <pa-accordion-item-body>
              <stf-routing-form
                [config]="savedConfig?.routing"
                [kind]="useGenerativeAnswer ? 'ask' : 'find'"
                [generativeProviders]="generativeProviders"
                [learningConfigurations]="learningConfigurations"
                (configChanged)="updateRoutingConfig($event)"
                (heightChanged)="updateRoutingHeight()"></stf-routing-form>
            </pa-accordion-item-body>
          </pa-accordion-item>
        }
      </pa-accordion>
    }
  }
</section>
