<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-flex-wrap tw-items-center tw-gap-2"
              [bitPopoverAnchorFor]="runReportCoachmark.popover()"
              [popoverOpen]="runReportOpen()"
              [position]="'below-center'"
              [spotlight]="true"
            >
              <bit-icon
                name="bwi-exclamation-triangle"
                class="bwi-lg tw-text-[1.2rem] tw-text-muted"
                aria-hidden="true"
              ></bit-icon>
              @if (dataLastUpdated) {
                <span>{{
                  "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>
            <dirt-ai-coachmark #runReportCoachmark stepId="runReport"></dirt-ai-coachmark>
          </div>

          <div class="tw-flex-1 tw-flex tw-flex-col">
            <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
              <bit-tab
                label="{{ 'activity' | i18n }}"
                [bitPopoverAnchorFor]="activityCoachmark.popover()"
                [popoverOpen]="monitorActivityOpen()"
                [position]="'below-start'"
                [spotlight]="true"
              >
                <dirt-all-activity [organizationId]="this.organizationId"></dirt-all-activity>
              </bit-tab>
              <dirt-ai-coachmark #activityCoachmark stepId="monitorActivity"></dirt-ai-coachmark>
              @if (milestone11Enabled) {
                <bit-tab label="{{ 'applications' | i18n }}">
                  <dirt-applications></dirt-applications>
                </bit-tab>
              } @else {
                <bit-tab label="{{ 'allApplications' | i18n }}" [berryValue]="appsCount">
                  <dirt-all-applications></dirt-all-applications>
                </bit-tab>
                <bit-tab
                  label="{{ 'criticalApplications' | i18n }}"
                  startIcon="bwi-star"
                  [berryValue]="
                    (dataService.criticalReportResults$ | async)?.reportData?.length ?? 0
                  "
                  [bitPopoverAnchorFor]="criticalAppsCoachmark.popover()"
                  [popoverOpen]="criticalApplicationsOpen()"
                  [position]="'below-start'"
                  [spotlight]="true"
                >
                  <dirt-critical-applications></dirt-critical-applications>
                </bit-tab>
                <dirt-ai-coachmark
                  #criticalAppsCoachmark
                  stepId="criticalApplications"
                ></dirt-ai-coachmark>
              }
            </bit-tab-group>
          </div>
        </div>
      }
    }
  }

  @if (isDevMode || adoptionUxImprovementsEnabled) {
    <dirt-dev-menu
      (beginPostImportTour)="beginPostImportTour()"
      (beginNewAdminWelcomeTour)="beginNewAdminWelcomeTour()"
      (beginCoachmarksTour)="beginCoachmarksTour()"
      (importData)="goToImportPage()"
    ></dirt-dev-menu>
  }
</ng-container>
