bodyshop/client/src/components/notification-center/notification-center.container.jsx

import { useCallback, useEffect, useMemo, useState } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { connect } from "react-redux";
import NotificationCenterComponent from "./notification-center.component";
import { GET_NOTIFICATIONS, MARK_ALL_NOTIFICATIONS_READ } from "../../graphql/notifications.queries";
import { useSocket } from "../../contexts/SocketIO/socketContext.jsx";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors.js";

export function NotificationCenterContainer({ visible, onClose, bodyshop }) {
  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
  const [notifications, setNotifications] = useState([]);
  const [error, setError] = useState(null);
  const { isConnected } = useSocket();

  const userAssociationId = bodyshop?.associations?.[0]?.id;

  const baseWhereClause = useMemo(() => {
    return { associationid: { _eq: userAssociationId } };
  }, [userAssociationId]);

  const whereClause = useMemo(() => {
    return showUnreadOnly ? { ...baseWhereClause, read: { _is_null: true } } : baseWhereClause;
  }, [baseWhereClause, showUnreadOnly]);

  const {
    data,
    fetchMore,
    loading,
    error: queryError,
    refetch
  } = useQuery(GET_NOTIFICATIONS, {
    variables: {
      limit: 20,
      offset: 0,
      where: whereClause
    },
    fetchPolicy: "cache-and-network",
    notifyOnNetworkStatusChange: true,
    pollInterval: isConnected ? 0 : 30000,
    skip: !userAssociationId, // Skip query if no userAssociationId
    onError: (err) => {
      setError(err.message);
      console.error("GET_NOTIFICATIONS error:", err);
      setTimeout(() => refetch(), 2000);
    }
  });

  const [markAllReadMutation, { error: mutationError }] = useMutation(MARK_ALL_NOTIFICATIONS_READ, {
    variables: { associationid: userAssociationId },
    update: (cache, { data: mutationData }) => {
      const timestamp = new Date().toISOString();
      cache.modify({
        fields: {
          notifications(existing = [], { readField }) {
            return existing.map((notif) => {
              if (readField("read", notif) === null && readField("associationid", notif) === userAssociationId) {
                return { ...notif, read: timestamp };
              }
              return notif;
            });
          },
          notifications_aggregate() {
            return { aggregate: { count: 0, __typename: "notifications_aggregate_fields" } };
          }
        }
      });

      if (isConnected) {
        const cachedNotifications = cache.readQuery({
          query: GET_NOTIFICATIONS,
          variables: {
            limit: 20,
            offset: 0,
            where: whereClause
          }
        });

        if (cachedNotifications?.notifications) {
          cache.writeQuery({
            query: GET_NOTIFICATIONS,
            variables: {
              limit: 20,
              offset: 0,
              where: whereClause
            },
            data: {
              notifications: cachedNotifications.notifications.map((notif) =>
                notif.read === null ? { ...notif, read: timestamp } : notif
              )
            }
          });
        }
      }
    },
    onError: (err) => {
      setError(err.message);
      console.error("MARK_ALL_NOTIFICATIONS_READ error:", err);
    }
  });

  useEffect(() => {
    if (data?.notifications) {
      const processedNotifications = data.notifications
        .map((notif) => {
          let scenarioText;
          let scenarioMeta;
          try {
            scenarioText = notif.scenario_text ? JSON.parse(notif.scenario_text) : [];
            scenarioMeta = notif.scenario_meta ? JSON.parse(notif.scenario_meta) : {};
          } catch (e) {
            console.error("Error parsing JSON for notification:", notif.id, e);
            scenarioText = [notif.fcm_text || "Invalid notification data"];
            scenarioMeta = {};
          }
          if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
          const roNumber = notif.job.ro_number;
          if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];
          return {
            id: notif.id,
            jobid: notif.jobid,
            associationid: notif.associationid,
            scenarioText,
            scenarioMeta,
            roNumber,
            created_at: notif.created_at,
            read: notif.read,
            __typename: notif.__typename
          };
        })
        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
      setNotifications(processedNotifications);
      setError(null);
    }
  }, [data]);

  useEffect(() => {
    if (queryError || mutationError) {
      setError(queryError?.message || mutationError?.message);
    }
  }, [queryError, mutationError]);

  const loadMore = useCallback(() => {
    if (!loading && data?.notifications.length) {
      fetchMore({
        variables: { offset: data.notifications.length, where: whereClause },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return {
            notifications: [...prev.notifications, ...fetchMoreResult.notifications]
          };
        }
      }).catch((err) => {
        setError(err.message);
        console.error("Fetch more error:", err);
      });
    }
  }, [data?.notifications?.length, fetchMore, loading, whereClause]);

  const handleToggleUnreadOnly = (value) => {
    setShowUnreadOnly(value);
  };

  const handleMarkAllRead = () => {
    markAllReadMutation()
      .then(() => {
        const timestamp = new Date().toISOString();
        setNotifications((prev) => {
          const updatedNotifications = prev.map((notif) =>
            notif.read === null && notif.associationid === userAssociationId
              ? {
                  ...notif,
                  read: timestamp
                }
              : notif
          );
          return [...updatedNotifications];
        });
      })
      .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`));
  };

  useEffect(() => {
    if (visible && !isConnected) {
      refetch();
    }
  }, [visible, isConnected, refetch]);

  return (
    <NotificationCenterComponent
      visible={visible}
      onClose={onClose}
      notifications={notifications}
      loading={loading}
      error={error}
      showUnreadOnly={showUnreadOnly}
      toggleUnreadOnly={handleToggleUnreadOnly}
      markAllRead={handleMarkAllRead}
      loadMore={loadMore}
    />
  );
}

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

export default connect(mapStateToProps, null)(NotificationCenterContainer);