<app-header></app-header>

<main class="container mx-auto px-4 pb-6 lg:px-6 lg:py-8">
  <!-- Notification Header -->
  <section class="mt-4 mb-8">
    <div class="flex justify-between items-center mb-4 lg:mb-6">
      <h2 class="text-xl lg:text-2xl font-bold">Notifications</h2>
      <button
        class="text-sm lg:text-base text-wattpad-primary hover:underline"
        (click)="fetchNotifications()"
      >
        Refresh
      </button>
    </div>

    <!-- No Notifications -->
    <div *ngIf="notifications.length === 0" class="text-gray-500 text-sm">
      No notifications yet.
    </div>

    <!-- Notification List -->
    <div class="grid grid-cols-1 gap-4">
      <div
        *ngFor="let noti of notifications"
        (click)="openNotification(noti)"
        class="relative cursor-pointer bg-white dark:bg-gray-800 border rounded-xl p-4 shadow-sm hover:shadow-md transition-all"
        [ngClass]="{
          'border-yellow-400 bg-yellow-50': noti.is_read == 0,
          'border-gray-200': noti.is_read == 1
        }"
      >
        <div class="flex items-start justify-between">
          <!-- Content -->
          <div class="flex-1">
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-1">
              <strong>{{ noti.from_user }}</strong> published a new story:
            </p>
            <h3 class="text-lg lg:text-xl font-semibold text-gray-900 dark:text-white">
              {{ noti.story_title }}
            </h3>
            <p class="text-xs text-wattpad-light mt-1">
              {{ noti.created_at | date: 'short' }}
            </p>
          </div>

          <!-- Delete Icon -->
          <button
            (click)="deleteNotification(noti); $event.stopPropagation();"
            class="absolute top-2 right-2 text-red-500 hover:text-red-700 text-sm"
            title="Delete notification"
          >
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
    </div>
  </section>
</main>
