<div class="notification-center">
  <!-- Bell Button -->
  <button class="bell-btn" (click)="toggle()" [class.has-notifications]="totalCount > 0">
    <app-icon icon="notifications" [class.ring]="totalCount > 0"></app-icon>
    <span class="badge" *ngIf="totalCount > 0">{{ totalCount > 9 ? '9+' : totalCount }}</span>
  </button>

  <!-- Dropdown -->
  <div class="dropdown" *ngIf="isOpen">
    <div class="dropdown-header">
      <h4>Info Center</h4>
      <div style="display: flex; justify-content: center; align-items: center; gap: 0.5rem;">
        <button class="refresh-btn" (click)="refresh()" [disabled]="loading">
          <app-icon icon="cached" [class.spin]="loading"></app-icon>
        </button>
        <button class="refresh-btn" (click)="close()" [disabled]="loading">
          <app-icon icon="close" [class.spin]="loading"></app-icon>
        </button>
      </div>
    </div>

    <div class="dropdown-content" *ngIf="unprocessedContacts.length > 0 || pendingBookings.length > 0; else emptyState">
      <!-- Contacts Section -->
      <div class="section" *ngIf="unprocessedContacts.length > 0">
        <div class="section-header">
          <app-icon icon="mail"></app-icon>
          <span>Kontaktanfragen</span>
          <span class="count">{{ unprocessedContacts.length }}</span>
        </div>
        <a *ngFor="let contact of unprocessedContacts.slice(0, 3)" 
           class="notification-item"
           [routerLink]="'/admin/requests'"
           (click)="isOpen = false">
          <div class="item-icon contact">
            <app-icon icon="person"></app-icon>
          </div>
          <div class="item-content">
            <span class="item-title">{{ contact.name }}</span>
            <span class="item-subtitle">{{ getRelativeTime(contact.createdAt) }}</span>
          </div>
        </a>
        <a *ngIf="unprocessedContacts.length > 3" class="view-all" routerLink="/admin/requests" (click)="isOpen = false">
          Alle {{ unprocessedContacts.length }} anzeigen
        </a>
      </div>

      <!-- Bookings Section -->
      <div class="section" *ngIf="pendingBookings.length > 0">
        <div class="section-header">
          <app-icon icon="event"></app-icon>
          <span>Offene Buchungen</span>
          <span class="count">{{ pendingBookings.length }}</span>
        </div>
        <a *ngFor="let booking of pendingBookings.slice(0, 3)" 
           class="notification-item"
           [routerLink]="'/admin/booking'"
           [queryParams]="{ bookingId: booking.id }"
           (click)="isOpen = false">
          <div class="item-icon booking">
            <app-icon icon="schedule"></app-icon>
          </div>
          <div class="item-content">
            <span class="item-title">{{ booking.name }}</span>
            <span class="item-subtitle">{{ booking.slot?.date }} · {{ booking.slot?.timeFrom }}</span>
          </div>
        </a>
        <a *ngIf="pendingBookings.length > 3" class="view-all" routerLink="/admin/booking">
          Alle {{ pendingBookings.length }} anzeigen
        </a>
      </div>
    </div>

    <ng-template #emptyState>
      <div class="empty-state">
        <app-icon icon="check_circle"></app-icon>
        <p>Alles erledigt!</p>
        <span>Keine offenen Anfragen</span>
      </div>
    </ng-template>
  </div>
</div>
