<main class="builder-overview">
  <a class="builder-overview__back" [routerLink]="['/', 'backoffice', 'dashboard'] | langRoute">
    <span class="pi pi-arrow-left" aria-hidden="true"></span>{{ '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">
        <span class="pi pi-arrow-right-circle" aria-hidden="true"></span>
        <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">
              <span class="pi {{ group.icon }} builder-overview__card-icon" aria-hidden="true"></span>
              <span
                class="pi {{ statusIcon[groupStatus().get(group.id) ?? 'unknown'] }} builder-overview__card-status builder-overview__card-status--{{ groupStatus().get(group.id) ?? 'unknown' }}"
                [attr.aria-label]="statusLabelKey[groupStatus().get(group.id) ?? 'unknown'] | translate"
              ></span>
            </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') { <span class="pi pi-check-circle" aria-hidden="true"></span> }
              @case ('false') { <span class="pi pi-circle" aria-hidden="true"></span> }
              @case ('loading') { <span class="pi pi-spin pi-spinner" aria-hidden="true"></span> }
              @default { <span class="pi pi-question-circle" aria-hidden="true"></span> }
            }
            <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')">
          <span class="pi pi-desktop" aria-hidden="true"></span>{{ 'builder.preview' | translate }}
        </a>
        <a class="builder-overview__quick-link" [routerLink]="groupSectionRoute('general')">
          <span class="pi pi-shop" aria-hidden="true"></span>{{ 'builder.general' | translate }}
        </a>
      </div>
    </section>
  }
</main>
