<app-header> </app-header>

<ng-container>
  @let status = dataService.reportStatus$ | async;
  @let hasCiphers = dataService.hasCiphers$ | async;
  @if (status == ReportStatusEnum.Initializing || hasCiphers === null) {
    <!-- Show page loading state when initializing risk insights (quick page load) -->
    <dirt-page-loading></dirt-page-loading>
  } @else {
    <!-- Show loading component at top level so it's not destroyed when hasReportData$ changes -->
    <!-- currentProgressStep is non-null when report generation is in progress -->
    @if (currentProgressStep(); as step) {
      <dirt-report-loading [progressStep]="step"></dirt-report-loading>
    } @else {
      <!-- Check final states after initial calls have been completed -->
      @if (!(dataService.hasReportData$ | async)) {
        <!-- Show empty state only when there's no report data -->
        <div @fadeIn class="tw-flex tw-justify-center tw-items-center tw-min-h-[70vh] tw-w-full">
          @if (!hasCiphers) {
            <!-- Show Empty state when there are no applications (no ciphers to make reports on) -->
            <empty-state-card
              [videoSrc]="emptyStateVideoSrc"
              [title]="this.i18nService.t('noDataInOrgTitle')"
              [description]="this.i18nService.t('noDataInOrgDescription')"
              [benefits]="emptyStateBenefits"
              [buttonText]="this.i18nService.t('importData')"
              [buttonIcon]="IMPORT_ICON"
              [buttonAction]="this.goToImportPage"
            ></empty-state-card>
          } @else {
            <!-- Show empty state for no reports run -->
            <empty-state-card
              [videoSrc]="emptyStateVideoSrc"
              [title]="this.i18nService.t('noReportsRunTitle')"
              [description]="this.i18nService.t('noReportsRunDescription')"
              [benefits]="emptyStateBenefits"
              [buttonText]="this.i18nService.t('riskInsightsRunReport')"
              [buttonIcon]=""
              [buttonAction]="this.generateReport.bind(this)"
            ></empty-state-card>
          }
        </div>
      } @else {
        <!-- Show screen when there is report data OR when feature flag is disabled (show tabs even without data) -->
        <div @fadeIn class="tw-min-h-screen tw-flex tw-flex-col">
          <div>
            @if (appsCount > 0) {
              <div class="tw-text-main tw-max-w-4xl tw-mb-2">
                {{ "reviewAccessIntelligence" | i18n }}
              </div>
            }
            <div
              class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
            >
              <i
                class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] tw-text-muted"
                aria-hidden="true"
              ></i>
              @if (dataLastUpdated) {
                <span class="tw-mx-4">{{
                  "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
                }}</span>
              }
              <span class="tw-flex tw-justify-center">
                <button
                  type="button"
                  bitButton
                  buttonType="secondary"
                  class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
                  tabindex="0"
                  [bitAction]="generateReport.bind(this)"
                >
                  {{ "riskInsightsRunReport" | i18n }}
                </button>
              </span>
            </div>
          </div>

          <div class="tw-flex-1 tw-flex tw-flex-col">
            <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
              <bit-tab label="{{ 'activity' | i18n }}">
                <dirt-all-activity [organizationId]="this.organizationId"></dirt-all-activity>
              </bit-tab>
              @if (milestone11Enabled) {
                <bit-tab label="{{ 'applications' | i18n }}">
                  <dirt-applications></dirt-applications>
                </bit-tab>
              } @else {
                <bit-tab label="{{ 'allApplicationsWithCount' | i18n: appsCount }}">
                  <dirt-all-applications></dirt-all-applications>
                </bit-tab>
                <bit-tab>
                  <ng-template bitTabLabel>
                    <i class="bwi bwi-star"></i>
                    {{
                      "criticalApplicationsWithCount"
                        | i18n
                          : (dataService.criticalReportResults$ | async)?.reportData?.length ?? 0
                    }}
                  </ng-template>
                  <dirt-critical-applications></dirt-critical-applications>
                </bit-tab>
              }
            </bit-tab-group>
          </div>
        </div>
      }
    }
  }
</ng-container>
