interface INotification {
  id: number;
  title: string;
  description: string;
  time?: string;
  memberId?: string;
}

class NotificationStore {
  private static instance: NotificationStore;
  private notifications: INotification[] = [];

  private constructor() {
    this.loadFromLocalStorage();
  }

  static getInstance(): NotificationStore {
    if (!NotificationStore.instance) {
      NotificationStore.instance = new NotificationStore();
    }
    return NotificationStore.instance;
  }

  addNotification(notification: INotification) {
    this.notifications.push(notification);
    this.saveToLocalStorage();
    this.updateUI();
  }

  removeNotification(index: number) {
    this.notifications.splice(index, 1);
    this.saveToLocalStorage();
    this.updateUI();
  }

  getNotifications(): INotification[] {
    return this.notifications;
  }

  private saveToLocalStorage() {
    localStorage.setItem('notifications', JSON.stringify(this.notifications));
  }

  private loadFromLocalStorage() {
    const stored = localStorage.getItem('notifications');
    if (stored) {
      this.notifications = JSON.parse(stored);
    }
  }

  private updateUI() {
    const badge = document.querySelector('.notification-badge') as HTMLElement;
    const board = document.querySelector('.notification-board') as HTMLElement;

    if (badge) {
      badge.textContent = this.notifications.length.toString();
      badge.style.display = this.notifications.length > 0 ? 'block' : 'none';
    }

    if (board) {
      this.renderNotificationBoard(board);
    }
  }

  private renderNotificationBoard(board: HTMLElement) {
    board.innerHTML = '';

    if (this.notifications.length === 0) {
      board.innerHTML = '<div class="no-notification">No notifications available</div>';
      return;
    }

    this.notifications.forEach((notif, index) => {
      const notifElement = document.createElement('div');
      notifElement.className = 'notification-item';
      notifElement.innerHTML = `
                <div>${notif.title}</div>
                <div>${notif.description}</div>
                ${notif.time ? `<div>${notif.time}</div>` : ''}
            `;
      notifElement.onclick = () => {
        if (notif.memberId) {
          window.loadMemberChat(notif.memberId);
        }
        this.removeNotification(index);
      };
      board.appendChild(notifElement);
    });
  }

  public refreshNotifications() {
    this.updateUI();
  }
}

export const notificationStore = NotificationStore.getInstance();