<div class="dashboard-page">
  <div class="dashboard-page__grid">

    <!-- Welcome -->
    <section class="dashboard-welcome" aria-labelledby="dashboard-welcome-title">
      <div class="dashboard-welcome__intro">
        <p class="dashboard-welcome__eyebrow">{{ 'dashboard.welcomeEyebrow' | translate }}</p>
        <h2 id="dashboard-welcome-title" class="dashboard-welcome__title">
          {{ (tenantName() ?? ('dashboard.welcomeFallbackTenant' | translate)) }}
        </h2>
        <span
          class="dashboard-welcome__env-badge"
          [class.dashboard-welcome__env-badge--production]="facade.isProductionEnvironment"
          [class.dashboard-welcome__env-badge--development]="!facade.isProductionEnvironment"
        >
          {{ (facade.isProductionEnvironment ? 'dashboard.envProduction' : 'dashboard.envDevelopment') | translate }}
        </span>
      </div>

      <div class="dashboard-welcome__facts">
        <app-dashboard-metric [labelKey]="'dashboard.factCurrentUser'" [value]="facade.currentUserName()" [loading]="!facade.currentUserName()" />
        <app-dashboard-metric [labelKey]="'dashboard.factTenant'" [value]="tenantName()" [loading]="bootstrapLoading()" />
        <app-dashboard-metric [labelKey]="'dashboard.cardLastPublish'" [value]="lastPublishedText() ?? ('dashboard.never' | translate)" [loading]="bootstrapLoading()" />
        <app-dashboard-metric [labelKey]="'dashboard.cardLastDraftSave'" [value]="lastSavedText() ?? ('dashboard.never' | translate)" [loading]="bootstrapLoading()" />
      </div>
    </section>

    <!-- Quick Actions -->
    <app-dashboard-section [titleKey]="'dashboard.quickActionsTitle'" [descriptionKey]="'dashboard.quickActionsDescription'" [span]="'span 12'">
      <div class="dashboard-shortcut-grid">
        @for (action of quickActions(); track action.labelKey) {
          <app-dashboard-shortcut-card
            [icon]="action.icon"
            [labelKey]="action.labelKey"
            [descriptionKey]="action.descriptionKey ?? null"
            [route]="action.route"
            [comingSoon]="action.comingSoon"
          />
        }
      </div>
    </app-dashboard-section>

    <!-- Draft Status -->
    <app-dashboard-card [titleKey]="'dashboard.draftStatusTitle'" [icon]="'edit'" [span]="'span 4'">
      @if (facade.dirty()) {
        <p class="dashboard-draft__lead">{{ 'dashboard.draftStatusHasChanges' | translate }}</p>
        @if (facade.modifiedFieldLabelKeys().length > 0) {
          <ul class="dashboard-draft__fields">
            @for (labelKey of facade.modifiedFieldLabelKeys(); track labelKey) {
              <li class="dashboard-draft__field-chip">{{ labelKey | translate }}</li>
            }
            @if (facade.modifiedFieldsOverflowCount() > 0) {
              <li class="dashboard-draft__field-chip dashboard-draft__field-chip--muted">
                {{ 'dashboard.draftStatusMoreFields' | translate: { count: facade.modifiedFieldsOverflowCount() } }}
              </li>
            }
          </ul>
        }
        <p class="dashboard-draft__saved-at">{{ 'dashboard.cardLastDraftSave' | translate }}: {{ lastSavedText() ?? ('dashboard.never' | translate) }}</p>
        <div class="dashboard-draft__actions">
          <a [routerLink]="['/', 'edit', 'general']">
            <app-button variant="ghost" size="sm">{{ 'dashboard.draftOpenBuilder' | translate }}</app-button>
          </a>
          <app-button variant="primary" size="sm" (click)="publishDraft()">{{ 'dashboard.draftPublish' | translate }}</app-button>
          <app-button variant="danger" size="sm" (click)="discardDraft()">{{ 'dashboard.draftDiscard' | translate }}</app-button>
        </div>
      } @else {
        <p class="dashboard-draft__all-clear">
          <app-icon name="checkCircle" [size]="18" />
          {{ 'dashboard.draftStatusAllPublished' | translate }}
        </p>
      }
    </app-dashboard-card>

    <!-- Marketplace Health -->
    <app-dashboard-card [titleKey]="'dashboard.healthTitle'" [icon]="'heart'" [span]="'span 4'">
      @for (check of facade.homeHealthChecks(); track check.code) {
        <app-dashboard-status-row [labelKey]="check.labelKey" [status]="check.status" [displayValue]="check.displayValue ?? null" />
      }
    </app-dashboard-card>

    <!-- Recent Activity -->
    <app-dashboard-card [titleKey]="'dashboard.activityTitle'" [icon]="'clock'" [span]="'span 4'">
      <app-dashboard-timeline [status]="activityStatus()" [entries]="activityTimelineEntries()" />
    </app-dashboard-card>

    <!-- Shortcuts -->
    <app-dashboard-section [titleKey]="'dashboard.shortcutsTitle'" [descriptionKey]="'dashboard.shortcutsDescription'" [span]="'span 12'">
      <div class="dashboard-shortcut-grid dashboard-shortcut-grid--compact">
        @for (shortcut of shortcuts(); track shortcut.labelKey) {
          <app-dashboard-shortcut-card
            [icon]="shortcut.icon"
            [labelKey]="shortcut.labelKey"
            [route]="shortcut.route"
            [comingSoon]="shortcut.comingSoon"
          />
        }
      </div>
    </app-dashboard-section>

    <!-- Documentation -->
    <app-dashboard-card [titleKey]="'dashboard.docTitle'" [icon]="'help'" [span]="'span 4'">
      <ul class="dashboard-doc-list">
        @for (link of documentationLinks; track link.id) {
          <li>
            <button type="button" class="dashboard-doc-list__item" disabled>
              <app-icon [name]="link.icon" [size]="18" />
              <span>{{ link.labelKey | translate }}</span>
              <span class="dashboard-doc-list__badge">{{ 'adminShell.nav.comingSoonBadge' | translate }}</span>
            </button>
          </li>
        }
      </ul>
    </app-dashboard-card>

  </div>
</div>
