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

import { useState, useEffect, useCallback } from "react";
import { useQuery, useMutation } 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";

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

  const {
    data,
    fetchMore,
    loading,
    error: queryError,
    refetch
  } = useQuery(GET_NOTIFICATIONS, {
    variables: {
      limit: 20,
      offset: 0,
      where: showUnreadOnly ? { read: { _is_null: true } } : {} // Default to all notifications
    },
    fetchPolicy: "cache-and-network", // Ensure reactivity to cache updates
    notifyOnNetworkStatusChange: true,
    onError: (err) => {
      setError(err.message);
      setTimeout(() => refetch(), 2000);
    }
  });

  useEffect(() => {
    console.log(
      "Notifications data updated:",
      data?.notifications?.map((n) => ({
        id: n.id,
        read: n.read,
        created_at: n.created_at,
        associationid: n.associationid
      }))
    );
  }, [data]);

  const [markAllReadMutation, { error: mutationError }] = useMutation(MARK_ALL_NOTIFICATIONS_READ, {
    update: (cache) => {
      cache.modify({
        fields: {
          notifications(existing = []) {
            return existing.map((notif) => ({
              ...notif,
              read: notif.read || new Date().toISOString()
            }));
          },
          notifications_aggregate() {
            return { aggregate: { count: 0 } };
          }
        }
      });
    },
    onError: (err) => setError(err.message)
  });

  // Remove refetchNotifications function and useEffect/context logic
  useEffect(() => {
    if (data?.notifications) {
      const processedNotifications = data.notifications
        .map((notif) => {
          let scenarioText;
          let scenarioMeta;
          try {
            scenarioText =
              typeof notif.scenario_text === "string" ? JSON.parse(notif.scenario_text) : notif.scenario_text || [];
            scenarioMeta =
              typeof notif.scenario_meta === "string" ? JSON.parse(notif.scenario_meta) : 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];
          if (!Array.isArray(scenarioMeta)) scenarioMeta = [scenarioMeta];

          console.log("Processed notification:", {
            id: notif.id,
            scenarioText,
            scenarioMeta,
            read: notif.read,
            created_at: notif.created_at,
            associationid: notif.associationid,
            raw: notif
          });
          return {
            id: notif.id,
            jobid: notif.jobid,
            associationid: notif.associationid,
            scenarioText,
            scenarioMeta,
            created_at: notif.created_at,
            read: notif.read,
            __typename: notif.__typename
          };
        })
        .sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); // Explicitly sort by created_at desc

      console.log(
        "Processed Notifications:",
        processedNotifications.map((n) => ({
          id: n.id,
          read: n.read,
          created_at: n.created_at,
          associationid: n.associationid
        }))
      );
      console.log("Number of notifications to render:", processedNotifications.length);
      setNotifications(processedNotifications);
      setError(null);
    } else {
      console.log("No data yet or error in data:", data, queryError);
    }
  }, [data, queryError]);

  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 },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;
          return {
            notifications: [...prev.notifications, ...fetchMoreResult.notifications]
          };
        }
      }).catch((err) => setError(err.message));
    }
  }, [data?.notifications?.length, fetchMore, loading]);

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

  const handleMarkAllRead = () => {
    markAllReadMutation().catch((e) =>
      console.error(`Something went wrong marking all notifications read: ${e?.message || ""}`)
    );
  };

  useEffect(() => {
    if (visible) {
      const virtuosoRef = { current: null };
      virtuosoRef.current?.scrollTo({ top: 0 });
      const handleScroll = () => {
        if (virtuosoRef.current && virtuosoRef.current.scrollTop + 400 >= virtuosoRef.current.scrollHeight) {
          loadMore();
        }
      };
      window.addEventListener("scroll", handleScroll);
      return () => window.removeEventListener("scroll", handleScroll);
    }
  }, [visible, loading, data, loadMore]);

  console.log(
    "Rendering NotificationCenter with notifications:",
    notifications.length,
    notifications.map((n) => ({
      id: n.id,
      read: n.read,
      created_at: n.created_at
    }))
  );

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

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