<app-admin-layout>
  <section class="dashboard">
    <div class="dashboard-container">

      <!-- Header with Greeting -->
      <header class="dashboard-header">
        <div class="greeting">
          <h1>{{ getGreeting() }} 👋</h1>
          <p class="date-time">
            <span class="date">{{ formatDate(currentTime) }}</span>
            <span class="separator">·</span>
            <span class="time">{{ formatTime(currentTime) }} Uhr</span>
          </p>
        </div>
        <button class="refresh-btn" (click)="loadDashboardData()" [disabled]="loading">
          <app-icon icon="refresh" [class.spin]="loading"></app-icon>
          <span>Aktualisieren</span>
        </button>
      </header>

      <!-- Loading State -->
      <div *ngIf="loading" class="loading-state">
        <div class="spinner"></div>
        <p>Dashboard wird geladen...</p>
      </div>

      <!-- Error State -->
      <div *ngIf="error && !loading" class="error-state">
        <app-icon icon="error" size="48px"></app-icon>
        <h3>Fehler aufgetreten</h3>
        <p>{{ error }}</p>
        <button class="btn btn--primary" (click)="loadDashboardData()">Nochmal versuchen</button>
      </div>

      <!-- Main Content -->
      <div *ngIf="!loading && !error" class="dashboard-content">

        <!-- Stats Cards -->
        <div class="stats-grid">
          <a *ngFor="let card of cards" 
             class="stat-card" 
             [class]="'stat-card--' + card.color"
             [routerLink]="card.route">
            <div class="stat-card__icon">
              <app-icon [icon]="card.icon" size="28px"></app-icon>
            </div>
            <div class="stat-card__content">
              <span class="stat-card__value">{{ card.value }}</span>
              <span class="stat-card__title">{{ card.title }}</span>
              <span class="stat-card__subtitle">{{ card.subtitle }}</span>
            </div>
            <div class="stat-card__arrow">
              <app-icon icon="arrow_forward" size="20px"></app-icon>
            </div>
          </a>
        </div>

        <!-- Two Column Layout -->
        <div class="dashboard-grid">

          <!-- Quick Actions -->
          <div class="dashboard-section">
            <div class="section-header">
              <h2>
                <app-icon icon="bolt" size="24px"></app-icon>
                Schnellzugriff
              </h2>
            </div>
            <div class="quick-actions-grid">
              <a *ngFor="let action of quickActions; trackBy: trackByRoute" 
                 class="quick-action" 
                 [routerLink]="action.route">
                <div class="quick-action__icon">
                  <app-icon [icon]="action.icon" size="24px"></app-icon>
                </div>
                <div class="quick-action__content">
                  <span class="quick-action__label">{{ action.label }}</span>
                  <span class="quick-action__desc">{{ action.description }}</span>
                </div>
                <app-icon icon="chevron_right" size="20px" class="quick-action__arrow"></app-icon>
              </a>
            </div>
          </div>

          <!-- Recent Activity -->
          <div class="dashboard-section">
            <div class="section-header">
              <h2>
                <app-icon icon="history" size="24px"></app-icon>
                Neueste Aktivitäten
              </h2>
            </div>

            <!-- Recent Contacts -->
            <div class="activity-group" *ngIf="recentContacts.length > 0">
              <h3 class="activity-group__title">
                <app-icon icon="mail" size="18px"></app-icon>
                Neue Anfragen
              </h3>
              <div class="activity-list">
                <a *ngFor="let contact of recentContacts; trackBy: trackById" 
                   class="activity-item"
                   routerLink="/admin/requests">
                  <div class="activity-item__avatar">
                    <app-icon icon="person" size="20px"></app-icon>
                  </div>
                  <div class="activity-item__content">
                    <span class="activity-item__name">{{ contact.name }}</span>
                    <span class="activity-item__meta">{{ contact.email }}</span>
                  </div>
                  <span class="activity-item__time">{{ getRelativeTime(contact.createdAt) }}</span>
                </a>
              </div>
              <a class="view-all-link" routerLink="/admin/requests">
                Alle {{ unprocessedContacts.length }} Anfragen anzeigen
                <app-icon icon="arrow_forward" size="16px"></app-icon>
              </a>
            </div>

            <!-- Recent Bookings -->
            <div class="activity-group" *ngIf="recentBookings.length > 0">
              <h3 class="activity-group__title">
                <app-icon icon="event" size="18px"></app-icon>
                Ausstehende Buchungen
              </h3>
              <div class="activity-list">
                <a *ngFor="let booking of recentBookings; trackBy: trackById" 
                   class="activity-item"
                   routerLink="/admin/booking"
                   [queryParams]="{ bookingId: booking.id }">
                  <div class="activity-item__avatar booking">
                    <app-icon icon="schedule" size="20px"></app-icon>
                  </div>
                  <div class="activity-item__content">
                    <span class="activity-item__name">{{ booking.name }}</span>
                    <span class="activity-item__meta">{{ booking.slot?.date }} · {{ booking.slot?.timeFrom }}</span>
                  </div>
                  <span class="activity-item__badge pending">Ausstehend</span>
                </a>
              </div>
              <a class="view-all-link" routerLink="/admin/booking">
                Alle {{ pendingBookings.length }} Buchungen anzeigen
                <app-icon icon="arrow_forward" size="16px"></app-icon>
              </a>
            </div>

            <!-- Empty State -->
            <div class="empty-activity" *ngIf="recentContacts.length === 0 && recentBookings.length === 0">
              <app-icon icon="check_circle" size="48px"></app-icon>
              <h3>Alles erledigt! 🎉</h3>
              <p>Keine offenen Anfragen oder Buchungen</p>
            </div>
          </div>

        </div>

        <!-- System Info Footer -->
        <div class="system-info">
          <div class="system-info__item">
            <app-icon icon="dns" size="18px"></app-icon>
            <span>System: {{ settings?.isUnderConstruction ? 'Wartungsmodus' : 'Online' }}</span>
          </div>
          <div class="system-info__item">
            <app-icon icon="person_add" size="18px"></app-icon>
            <span>Registrierung: {{ settings?.allowRegistration ? 'Aktiviert' : 'Deaktiviert' }}</span>
          </div>
          <div class="system-info__item">
            <app-icon icon="mail" size="18px"></app-icon>
            <span>Newsletter: {{ settings?.allowNewsletter ? 'Aktiviert' : 'Deaktiviert' }}</span>
          </div>
        </div>

      </div>

    </div>
  </section>
</app-admin-layout>
