import { useNotifications } from "@wacht/react-router";

export function NotificationsInbox() {
  const {
    notifications,
    loading,
    hasMore,
    loadMore,
    markAsRead,
    markAsUnread,
    archiveNotification,
    starNotification,
    markAllAsRead,
    archiveAllRead,
    refetch,
  } = useNotifications({
    scope: "all",
    is_archived: false,
    limit: 25,
    severity: "warning",
  });

  if (loading) return <div>Loading notifications...</div>;

  return (
    <section>
      <div>
        <button onClick={() => markAllAsRead()}>Mark all read</button>
        <button onClick={() => archiveAllRead()}>Archive all read</button>
        <button onClick={() => refetch()}>Refresh</button>
      </div>

      {notifications.map((n) => (
        <article key={n.id}>
          <h4>{n.title}</h4>
          <p>{n.body}</p>
          <button onClick={() => markAsRead(n.id)}>Read</button>
          <button onClick={() => markAsUnread(n.id)}>Unread</button>
          <button onClick={() => archiveNotification(n.id)}>Archive</button>
          <button onClick={() => starNotification(n.id)}>Star</button>
        </article>
      ))}

      <button disabled={!hasMore} onClick={() => loadMore()}>
        Load more
      </button>
    </section>
  );
}