'use client';

import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import NotificationList from '@/components/notification/listView/NotificationList';
import usePageViewLog from '@/hooks/usePageViewLog';
import logWebUserEvent from '@/logging/logWebUserEvent';

const Notifications = observer(() => {
  const { notifications: notificationsStore } = useStores();
  const [isFirstLoad, setIsFirstLoad] = useState(true);

  usePageViewLog({
    actionName: 'PageViewed',
    componentContext: 'notifications',
  });

  useEffect(() => {
    if (notificationsStore.isLoading) {
      setIsFirstLoad(false);
    }
  }, [notificationsStore.isLoading]);

  return (
    <div className='h-full w-full overflow-y-auto'>
      <NotificationList
        className='w-full py-4'
        isLoading={isFirstLoad || notificationsStore.isLoading}
        currentTime={notificationsStore.notifiedAt}
        notifications={notificationsStore.allNotifications}
        hasMore={notificationsStore.hasMore}
        onLoadMore={() => notificationsStore.loadMoreNotifications()}
        onDotClick={(payload) => {
          notificationsStore.markAsRead(payload.id);
          logWebUserEvent({
            actionName: 'NotificationItemClicked',
            context: {
              notificationId: payload.id,
              notificationType: payload.type || 'unknown',
              clickTarget: 'dot',
              isRead: false,
              isMobile: true,
            },
          });
        }}
        onProfileClick={(payload, e) => {
          // Do not mark as read if opening in new window
          if (!e || !(e.shiftKey || e.ctrlKey || e.metaKey)) {
            notificationsStore.markAsRead(payload.id);
          }
          logWebUserEvent({
            actionName: 'NotificationItemClicked',
            context: {
              notificationId: payload.id,
              notificationType: payload.type || 'unknown',
              clickTarget: payload.context || 'unknown',
              isRead: payload.isRead,
              isMobile: true,
            },
          });
        }}
        onContentClick={(payload, e) => {
          // Do not mark as read if opening in new window
          if (!e || !(e.shiftKey || e.ctrlKey || e.metaKey)) {
            notificationsStore.markAsRead(payload.id);
          }
          logWebUserEvent({
            actionName: 'NotificationItemClicked',
            context: {
              notificationId: payload.id,
              notificationType: payload.type || 'unknown',
              clickTarget: 'content',
              contentId: payload.contentId,
              contentType: payload.contentType,
              isRead: payload.isRead,
              isMobile: true,
            },
          });
        }}
        onFollowClick={(payload, e) => {
          // Do not mark as read if holding shift key
          if (!e || !e.shiftKey) {
            notificationsStore.markAsRead(payload.id);
          }
          notificationsStore.setFollowing(payload.handle, !payload.isFollowing);

          logWebUserEvent({
            actionName: 'NotificationItemClicked',
            context: {
              notificationId: payload.id,
              notificationType: payload.type || 'unknown',
              clickTarget: payload.isFollowing
                ? 'unfollow_button'
                : 'follow_button',
              isRead: payload.isRead,
              isMobile: true,
            },
          });
        }}
        onNotificationView={(payload) => {
          logWebUserEvent({
            actionName: 'NotificationItemViewed',
            context: {
              notificationId: payload.id,
              notificationType: payload.type || 'unknown',
              isRead: payload.isRead,
              isMobile: true,
            },
          });
        }}
      />
    </div>
  );
});

export default Notifications;