<main class="builder-overview">
  <a class="builder-overview__back" [routerLink]="['/', 'backoffice', 'dashboard'] | langRoute">
    <app-icon name="arrowLeft" [size]="16" />{{ 'adminShell.pages.dashboard.title' | translate }}
  </a>
  <header class="builder-overview__hero">
    <p class="builder-overview__eyebrow">{{ 'builder.appName' | translate }}</p>
    <h1 class="builder-overview__title">{{ 'builder.overviewTitle' | translate }}</h1>
    <p class="builder-overview__subtitle">{{ 'builder.overviewSubtitle' | translate }}</p>

    @if (!bootstrap()) {
      <div class="builder-overview__readiness" aria-hidden="true">
        <div class="builder-overview__readiness-bar"><div class="builder-overview__readiness-fill" style="width: 0%"></div></div>
        <p>{{ 'common.loading' | translate }}</p>
      </div>
    } @else {
      <div class="builder-overview__readiness">
        @if (readinessPercent(); as percent) {
          <div class="builder-overview__readiness-bar">
            <div class="builder-overview__readiness-fill" [style.width.%]="percent"></div>
          </div>
          <p class="builder-overview__readiness-label">{{ 'builder.overviewReadinessLabel' | translate: { percent } }}</p>
          <p class="builder-overview__readiness-hint">{{ 'builder.overviewReadinessHint' | translate }}</p>
        } @else {
          <p class="builder-overview__readiness-label">{{ 'builder.statusUnknown' | translate }}</p>
        }
      </div>

      <div class="builder-overview__next-step">
        <app-icon name="arrowRight" [size]="20" />
        <div>
          <p class="builder-overview__next-step-label">{{ 'builder.overviewNextStepLabel' | translate }}</p>
          @if (nextStepLabelKey(); as labelKey) {
            <a [routerLink]="nextStepRoute()" class="builder-overview__next-step-link">{{ labelKey | translate }}</a>
          } @else {
            <p class="builder-overview__next-step-done">{{ 'builder.overviewNextStepFallback' | translate }}</p>
          }
        </div>
      </div>
    }
  </header>

  @if (bootstrap()) {
    <section class="builder-overview__section" aria-labelledby="builder-overview-sections-title">
      <h2 id="builder-overview-sections-title">{{ 'builder.overviewSectionsTitle' | translate }}</h2>
      <div class="builder-overview__cards">
        @for (group of groups; track group.id) {
          <a class="builder-overview__card" [routerLink]="groupSectionRoute(group.sections[0])">
            <div class="builder-overview__card-header">
              <app-icon [name]="group.icon" [size]="20" class="builder-overview__card-icon" />
              <app-icon
                [name]="statusIcon[groupStatus().get(group.id) ?? 'unknown']"
                [size]="16"
                [ariaLabel]="statusLabelKey[groupStatus().get(group.id) ?? 'unknown'] | translate"
                class="builder-overview__card-status builder-overview__card-status--{{ groupStatus().get(group.id) ?? 'unknown' }}"
              />
            </div>
            <h3 class="builder-overview__card-title">{{ group.labelKey | translate }}</h3>
            <p class="builder-overview__card-description">{{ group.descriptionKey | translate }}</p>
            <span class="builder-overview__card-cta">{{ 'builder.overviewOpenSection' | translate }} →</span>
          </a>
        }
      </div>
    </section>

    <section class="builder-overview__section" aria-labelledby="builder-overview-readiness-title">
      <h2 id="builder-overview-readiness-title">{{ 'builder.overviewReadinessTitle' | translate }}</h2>
      <ul class="builder-overview__checklist">
        @for (check of readinessChecklist(); track check.labelKey) {
          <li class="builder-overview__check builder-overview__check--{{ check.state }}">
            @switch (check.state) {
              @case ('true') { <app-icon name="checkCircle" [size]="16" /> }
              @case ('false') { <app-icon name="circle" [size]="16" /> }
              @case ('loading') { <app-icon name="spinner" [size]="16" class="spin" /> }
              @default { <app-icon name="help" [size]="16" /> }
            }
            <span>{{ check.labelKey | translate }}</span>
          </li>
        }
      </ul>
    </section>

    <section class="builder-overview__section" aria-labelledby="builder-overview-links-title">
      <h2 id="builder-overview-links-title">{{ 'builder.overviewQuickLinksTitle' | translate }}</h2>
      <div class="builder-overview__quick-links">
        <a class="builder-overview__quick-link" [routerLink]="groupSectionRoute('preview')">
          <app-icon name="monitor" [size]="18" />{{ 'builder.preview' | translate }}
        </a>
        <a class="builder-overview__quick-link" [routerLink]="groupSectionRoute('general')">
          <app-icon name="store" [size]="18" />{{ 'builder.general' | translate }}
        </a>
      </div>
    </section>
  }
</main>
