<aca-page-layout>
  @if (!hasError && agentId) {
    <aca-search-ai-input-container
      class="aca-page-layout-header"
      placeholder="KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.QUERY_INPUT_PLACEHOLDER"
      [agentId]="agentId"
      [usedInAiResultsPage]="true" />
  }

  @if (!hasError) {
    <div class="aca-page-layout-content">
      <div class="aca-search-ai-results-container">
        <div
          class="aca-search-ai-results-container-query"
          data-automation-id="aca-search-ai-results-query">
          {{ searchQuery }}
        </div>
        <div
          class="aca-search-ai-response-container"
          [class.aca-search-ai-response-container-error]="hasAnsweringError">
          @if (!loading) {
            @if (!hasAnsweringError) {
              <div class="aca-search-ai-response-container-body">
                <markdown
                  class="aca-search-ai-response-container-body-response"
                  data-automation-id="aca-search-ai-results-response"
                  [data]="displayedAnswer"
                  (ready)="addSourceCodeTooltips()"
                  mermaid
                  katex />
                <button
                  class="aca-search-ai-response-container-body-response-action aca-search-ai-response-container-body-response-action-regeneration"
                  mat-icon-button
                  (click)="checkUnsavedChangesAndSearch()"
                  data-automation-id="aca-search-ai-results-regeneration-button"
                  [title]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REGENERATION_BUTTON_LABEL' | translate">
                  <mat-icon>cached</mat-icon>
                </button>
                <button
                  class="aca-search-ai-response-container-body-response-action"
                  mat-icon-button
                  (click)="copyResponseToClipboard()"
                  data-automation-id="aca-search-ai-results-copying-button"
                  [title]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.COPY_BUTTON_LABEL' | translate">
                  <mat-icon>copy</mat-icon>
                </button>

                @if (references$ | async; as refs) {
                  @if (refs?.length || hasReferencesLoadingError) {
                    <mat-divider
                      class="aca-search-ai-response-container-body-divider"
                      [class.aca-search-ai-response-container-body-divider-error]="hasReferencesLoadingError"
                      aria-hidden="true"
                    />
                    <div class="aca-search-ai-response-container-body-references-container">
                      <p class="aca-search-ai-response-container-body-references-container-header">
                        {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REFERENCED_DOCUMENTS_HEADER' | translate }}
                      </p>

                      @if (hasReferencesLoadingError) {
                        <div class="aca-search-ai-response-container-body-references-container-loading-error" role="alert">
                          {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.ERRORS.REFERENCES_LOADING_ERROR' | translate }}
                          <button
                            mat-flat-button
                            (click)="loadReferences()"
                            [attr.aria-label]="'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.RELOAD_REFERENCES_BUTTON_LABEL' | translate"
                            class="aca-search-ai-response-container-error-message-regeneration-button"
                            data-automation-id="aca-search-ai-response-container-body-references-container-retry-references-loading-button">
                            <mat-icon class="aca-search-ai-response-container-error-message-regeneration-button-icon">cached</mat-icon>
                            {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.RELOAD_REFERENCES_BUTTON_LABEL' | translate }}
                          </button>
                        </div>
                      } @else {
                        <div class="aca-search-ai-response-container-body-references-container-documents">
                          @for (node of refs; track node.id) {
                            <a
                              class="aca-search-ai-response-container-body-references-container-documents-document"
                              [attr.data-automation-id]="'aca-search-ai-results-' + node.id + '-document'"
                              role="link"
                              (click)="openFile(node.id)"
                              (keyup.enter)="openFile(node.id)"
                              tabindex="0">
                              <mat-icon
                                mat-list-icon
                                class="aca-search-ai-response-container-body-references-container-documents-document-icon">
                                <img [alt]="node.content?.mimeType" [src]="mimeTypeIconsByNodeId[node.id]" />
                              </mat-icon>
                              <div class="aca-search-ai-response-container-body-references-container-documents-document-name">
                                {{ node.name }}
                              </div>
                            </a>
                          }
                        </div>
                      }
                    </div>
                  }
                }
              </div>
            } @else {
              <div class="aca-search-ai-response-container-error-message" role="alert">
                {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.ERRORS.LOADING_ERROR' | translate }}
                <button
                  mat-flat-button
                  (click)="performAiSearch()"
                  class="aca-search-ai-response-container-error-message-regeneration-button"
                  data-automation-id="aca-search-ai-results-error-regeneration-button">
                  <mat-icon class="aca-search-ai-response-container-error-message-regeneration-button-icon">cached</mat-icon>
                  {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REGENERATION_BUTTON_LABEL' | translate }}
                </button>
              </div>
            }
          } @else {
            <div class="adf-skeleton"></div>
            <div class="adf-skeleton"></div>
            <div class="adf-skeleton adf-skeleton-half"></div>
          }
        </div>
      </div>
    </div>
  } @else {
    <adf-empty-content
      class="aca-page-layout-content"
      icon="star"
      title="KNOWLEDGE_RETRIEVAL.SEARCH.ERRORS.PAGE_NOT_AVAILABLE_ERROR" />
  }
</aca-page-layout>
