import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

interface Notification {
  id: number;
  message: string;
  type: 'info' | 'warning' | 'error';
  time: string;
}

@Component({
  selector: 'app-notifications',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="notifications-container">
      <div class="notification-icon" (click)="toggleNotifications()">
        <i class="fas fa-bell"></i>
        <span class="notification-badge" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
      </div>

      <div class="notifications-dropdown" *ngIf="showNotifications">
        <div class="notifications-header">
          <h4>Notificações</h4>
          <button class="mark-all-read" (click)="markAllAsRead()">
            Marcar todas como lidas
          </button>
        </div>
        <div class="notifications-list">
          <div class="notification-item" *ngFor="let notification of notifications" [class.unread]="!notification.read">
            <div class="notification-content">
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .notifications-container {
      position: relative;
    }

    .notification-icon {
      position: relative;
      cursor: pointer;
      padding: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .notification-badge {
      position: absolute;
      top: -6px;
      right: -8px;
      background: var(--primary);
      color: white;
      border-radius: 50%;
      padding: 0.25rem 0.25rem;
      font-size: 0.8rem;
      width: 18px;
      height: 18px;
      text-align: center;
    }

    .notifications-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 300px;
      background: var(--header-bg);
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      z-index: 1000;
    }

    .notifications-header {
      padding: 0.5rem;
      background: var(--surface);
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .notifications-list {
      background: var(--header-bg);
      color: var(--text-primary);
      max-height: 300px;
      overflow-y: auto;
    }

    .notification-item {
      padding: 1rem;
      border-bottom: 1px solid var(--divider);
      cursor: pointer;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: var(--hover-bg);
      }
    }

    .notification-content {
      .notification-message {
        color: var(--text-primary);
        margin-bottom: 0.25rem;
      }

      .notification-time {
        font-size: 0.75rem;
        color: var(--text-secondary);
      }
    }

    .mark-all-read {
      background: none;
      border: none;
      color: var(--primary);
      cursor: pointer;
      font-size: 0.875rem;
    }

    @media screen and (max-width: 768px) {
      .notifications-dropdown {
        width: 280px;
        top: calc(100% + 5px);
      }
    }
  `]
})
export class NotificationsComponent {
  showNotifications = false;
  unreadCount = 3;
  notifications: (Notification & { read?: boolean })[] = [
    {
      id: 1,
      message: 'Nova atualização disponível',
      type: 'info',
      time: '5 min atrás',
      read: false
    },
    {
      id: 2,
      message: 'Erro no sistema',
      type: 'error',
      time: '1 hora atrás',
      read: false
    },
    {
      id: 3,
      message: 'Backup realizado com sucesso',
      type: 'info',
      time: '2 horas atrás',
      read: false
    }
  ];

  toggleNotifications() {
    this.showNotifications = !this.showNotifications;
  }

  markAllAsRead() {
    this.notifications = this.notifications.map(notification => ({
      ...notification,
      read: true
    }));
    this.unreadCount = 0;
  }
} 