import { useEffect, useRef, useState } from "react";
import SocketIO from "socket.io-client";
import { auth } from "../../firebase/firebase.utils";
import { store } from "../../redux/store";
import { addAlerts, setWssStatus } from "../../redux/application/application.actions";
import client from "../../utils/GraphQLClient";
import { useNotification } from "../Notifications/notificationContext.jsx";
import {
  GET_NOTIFICATIONS,
  GET_UNREAD_COUNT,
  MARK_ALL_NOTIFICATIONS_READ,
  MARK_NOTIFICATION_READ,
  UPDATE_NOTIFICATIONS_READ_FRAGMENT
} from "../../graphql/notifications.queries.js";
import { useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { INITIAL_NOTIFICATIONS, SocketContext } from "./useSocket.js";

const LIMIT = INITIAL_NOTIFICATIONS;

/**
 * Socket Provider - Scenario Notifications / Web Socket related items
 * @param children
 * @param bodyshop
 * @param navigate
 * @param currentUser
 * @returns {JSX.Element}
 * @constructor
 */
const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => {
  const socketRef = useRef(null);
  const [clientId, setClientId] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const [socketInitialized, setSocketInitialized] = useState(false);
  const notification = useNotification();
  const userAssociationId = bodyshop?.associations?.[0]?.id;
  const { t } = useTranslation();

  const {
    treatments: { Realtime_Notifications_UI }
  } = useSplitTreatments({
    attributes: {},
    names: ["Realtime_Notifications_UI"],
    splitKey: bodyshop?.imexshopid
  });

  const [markNotificationRead] = useMutation(MARK_NOTIFICATION_READ, {
    update: (cache, { data: { update_notifications } }) => {
      const timestamp = new Date().toISOString();
      const updatedNotification = update_notifications.returning[0];

      cache.modify({
        fields: {
          notifications(existing = [], { readField }) {
            return existing.map((notif) =>
              readField("id", notif) === updatedNotification.id
                ? {
                    ...notif,
                    read: timestamp
                  }
                : notif
            );
          }
        }
      });

      const unreadCountQuery = cache.readQuery({
        query: GET_UNREAD_COUNT,
        variables: { associationid: userAssociationId }
      });

      if (unreadCountQuery?.notifications_aggregate?.aggregate?.count > 0) {
        cache.writeQuery({
          query: GET_UNREAD_COUNT,
          variables: { associationid: userAssociationId },
          data: {
            notifications_aggregate: {
              ...unreadCountQuery.notifications_aggregate,
              aggregate: {
                ...unreadCountQuery.notifications_aggregate.aggregate,
                count: unreadCountQuery.notifications_aggregate.aggregate.count - 1
              }
            }
          }
        });
      }

      if (socketRef.current && isConnected) {
        socketRef.current.emit("sync-notification-read", {
          email: currentUser?.email,
          bodyshopId: bodyshop.id,
          notificationId: updatedNotification.id
        });
      }
    },
    onError: (err) =>
      console.error("MARK_NOTIFICATION_READ error:", {
        message: err?.message,
        stack: err?.stack
      })
  });

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

      const baseWhereClause = { associationid: { _eq: userAssociationId } };
      const cachedNotifications = cache.readQuery({
        query: GET_NOTIFICATIONS,
        variables: { limit: INITIAL_NOTIFICATIONS, offset: 0, where: baseWhereClause }
      });

      if (cachedNotifications?.notifications) {
        cache.writeQuery({
          query: GET_NOTIFICATIONS,
          variables: { limit: INITIAL_NOTIFICATIONS, offset: 0, where: baseWhereClause },
          data: {
            notifications: cachedNotifications.notifications.map((notif) =>
              notif.read === null ? { ...notif, read: timestamp } : notif
            )
          }
        });
      }

      if (socketRef.current && isConnected) {
        socketRef.current.emit("sync-all-notifications-read", {
          email: currentUser?.email,
          bodyshopId: bodyshop.id
        });
      }
    },
    onError: (err) => console.error("MARK_ALL_NOTIFICATIONS_READ error:", err)
  });

  const checkAndReconnect = () => {
    if (socketRef.current && !socketRef.current.connected) {
      console.log("Attempting manual reconnect due to event trigger");
      socketRef.current.connect();
    }
  };

  useEffect(() => {
    const initializeSocket = async (token) => {
      if (!bodyshop || !bodyshop.id || socketRef.current) return;

      const endpoint = import.meta.env.PROD ? import.meta.env.VITE_APP_AXIOS_BASE_API_URL : "";
      const socketInstance = SocketIO(endpoint, {
        path: "/wss",
        withCredentials: true,
        auth: { token, bodyshopId: bodyshop.id },
        reconnectionAttempts: Infinity,
        reconnectionDelay: 2000,
        reconnectionDelayMax: 60000,
        randomizationFactor: 0.5,
        transports: ["websocket", "polling"], // Add this to prefer WebSocket with polling fallback
        rememberUpgrade: true
      });

      socketRef.current = socketInstance;
      setSocketInitialized(true);

      const handleBodyshopMessage = (message) => {
        if (!message || !message.type) return;
        switch (message.type) {
          case "alert-update":
            store.dispatch(addAlerts(message.payload));
            break;
          case "task-created":
          case "task-updated":
          case "task-deleted":
            const payload = message.payload;
            const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser?.email)?.id;
            if (!assignedToId || payload.assigned_to !== assignedToId) return;

            const dueVars = {
              bodyshop: bodyshop?.id,
              assigned_to: assignedToId,
              order: [{ due_date: "asc" }, { created_at: "desc" }]
            };
            const noDueVars = {
              bodyshop: bodyshop?.id,
              assigned_to: assignedToId,
              order: [{ created_at: "desc" }],
              limit: LIMIT,
              offset: 0
            };

            const whereBase = {
              bodyshopid: { _eq: bodyshop?.id },
              assigned_to: { _eq: assignedToId },
              deleted: { _eq: false },
              completed: { _eq: false }
            };
            const whereDue = { ...whereBase, due_date: { _is_null: false } };
            const whereNoDue = { ...whereBase, due_date: { _is_null: true } };

            // Helper to invalidate a cache entry
            const invalidateCache = (fieldName, args) => {
              try {
                client.cache.evict({
                  id: "ROOT_QUERY",
                  fieldName,
                  args
                });
              } catch (error) {
                console.error("Error invalidating cache:", error);
              }
            };

            // Invalidate lists and aggregates based on event type
            if (message.type === "task-deleted" || message.type === "task-updated") {
              // Invalidate both lists and no due aggregate for deletes and updates
              invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
              invalidateCache("tasks", {
                where: whereNoDue,
                order_by: noDueVars.order,
                limit: noDueVars.limit,
                offset: noDueVars.offset
              });
              invalidateCache("tasks_aggregate", { where: whereNoDue });
            } else if (message.type === "task-created") {
              // For creates, invalidate the target list and no due aggregate if applicable
              const hasDue = !!payload.due_date;
              if (hasDue) {
                invalidateCache("tasks", { where: whereDue, order_by: dueVars.order });
              } else {
                invalidateCache("tasks", {
                  where: whereNoDue,
                  order_by: noDueVars.order,
                  limit: noDueVars.limit,
                  offset: noDueVars.offset
                });
                invalidateCache("tasks_aggregate", { where: whereNoDue });
              }
            }

            // Always invalidate the total count for all events (handles creates, deletes, updates including completions)
            invalidateCache("tasks_aggregate", { where: whereBase });

            // Garbage collect after evictions
            client.cache.gc();

            break;
          default:
            break;
        }
      };
      
      const handleConnect = () => {
        socketInstance.emit("join-bodyshop-room", bodyshop.id);
        setClientId(socketInstance.id);
        setIsConnected(true);
        store.dispatch(setWssStatus("connected"));
      };

      const handleReconnect = () => {
        setIsConnected(true);
        store.dispatch(setWssStatus("connected"));
      };

      const handleConnectionError = (err) => {
        console.error("Socket connection error:", err);
        setIsConnected(false);
        if (err.message.includes("auth/id-token-expired")) {
          console.warn("Token expired, refreshing...");
          auth.currentUser?.getIdToken(true).then((newToken) => {
            socketInstance.auth = { token: newToken };
            socketInstance.connect();
          });
        } else {
          store.dispatch(setWssStatus("error"));
        }
      };

      const handleDisconnect = (reason) => {
        console.warn("Socket disconnected:", reason);
        setIsConnected(false);
        store.dispatch(setWssStatus("disconnected"));
        if (!socketInstance.connected && reason !== "io server disconnect") {
          setTimeout(() => {
            if (socketInstance.disconnected) {
              console.log("Manually triggering reconnection...");
              socketInstance.connect();
            }
          }, 2000);
        }
      };

      const handleNotification = (data) => {
        if (Realtime_Notifications_UI?.treatment !== "on") {
          return;
        }

        const { jobId, jobRoNumber, notificationId, associationId, notifications } = data;
        if (associationId !== userAssociationId) return;

        const newNotification = {
          __typename: "notifications",
          id: notificationId,
          jobid: jobId,
          associationid: associationId,
          scenario_text: JSON.stringify(notifications.map((notif) => notif.body)),
          fcm_text: notifications.map((notif) => notif.body).join(". ") + ".",
          scenario_meta: JSON.stringify(notifications.map((notif) => notif.variables || {})),
          created_at: new Date(notifications[0].timestamp).toISOString(),
          read: null,
          job: { ro_number: jobRoNumber }
        };

        const baseVariables = {
          limit: INITIAL_NOTIFICATIONS,
          offset: 0,
          where: { associationid: { _eq: userAssociationId } }
        };

        try {
          const existingNotifications =
            client.cache.readQuery({
              query: GET_NOTIFICATIONS,
              variables: baseVariables
            })?.notifications || [];
          if (!existingNotifications.some((n) => n.id === newNotification.id)) {
            client.cache.writeQuery({
              query: GET_NOTIFICATIONS,
              variables: baseVariables,
              data: {
                notifications: [newNotification, ...existingNotifications].sort(
                  (a, b) => new Date(b.created_at) - new Date(a.created_at)
                )
              },
              broadcast: true
            });

            const unreadVariables = {
              ...baseVariables,
              where: { ...baseVariables.where, read: { _is_null: true } }
            };
            const unreadNotifications =
              client.cache.readQuery({
                query: GET_NOTIFICATIONS,
                variables: unreadVariables
              })?.notifications || [];
            if (newNotification.read === null && !unreadNotifications.some((n) => n.id === newNotification.id)) {
              client.cache.writeQuery({
                query: GET_NOTIFICATIONS,
                variables: unreadVariables,
                data: {
                  notifications: [newNotification, ...unreadNotifications].sort(
                    (a, b) => new Date(b.created_at) - new Date(a.created_at)
                  )
                },
                broadcast: true
              });
            }

            client.cache.modify({
              id: "ROOT_QUERY",
              fields: {
                notifications_aggregate(existing = { aggregate: { count: 0 } }) {
                  return {
                    ...existing,
                    aggregate: {
                      ...existing.aggregate,
                      count: existing.aggregate.count + (newNotification.read === null ? 1 : 0)
                    }
                  };
                }
              }
            });

            notification.info({
              message: (
                <div
                  onClick={() => {
                    markNotificationRead({ variables: { id: notificationId } })
                      .then(() => navigate(`/manage/jobs/${jobId}`))
                      .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`));
                  }}
                >
                  {t("notifications.labels.notification-popup-title", {
                    ro_number: jobRoNumber || t("general.labels.na")
                  })}
                </div>
              ),
              description: (
                <ul
                  className="notification-alert-unordered-list"
                  onClick={() => {
                    markNotificationRead({ variables: { id: notificationId } })
                      .then(() => navigate(`/manage/jobs/${jobId}`))
                      .catch((e) => console.error(`Error marking notification read: ${e?.message || ""}`));
                  }}
                >
                  {notifications.map((notif, index) => (
                    <li className="notification-alert-unordered-list-item" key={index}>
                      {notif.body}
                    </li>
                  ))}
                </ul>
              )
            });
          }
        } catch (error) {
          console.error(`Error handling new notification: ${error?.message || ""}`);
        }
      };

      const handleSyncNotificationRead = ({ notificationId, timestamp }) => {
        if (Realtime_Notifications_UI?.treatment !== "on") {
          return;
        }

        try {
          const notificationRef = client.cache.identify({
            __typename: "notifications",
            id: notificationId
          });
          client.cache.writeFragment({
            id: notificationRef,
            fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
            data: { read: timestamp }
          });

          const unreadCountData = client.cache.readQuery({
            query: GET_UNREAD_COUNT,
            variables: { associationid: userAssociationId }
          });
          if (unreadCountData?.notifications_aggregate?.aggregate?.count > 0) {
            const newCount = Math.max(unreadCountData.notifications_aggregate.aggregate.count - 1, 0);
            client.cache.writeQuery({
              query: GET_UNREAD_COUNT,
              variables: { associationid: userAssociationId },
              data: {
                notifications_aggregate: {
                  __typename: "notifications_aggregate",
                  aggregate: {
                    __typename: "notifications_aggregate_fields",
                    count: newCount
                  }
                }
              }
            });
          }
        } catch (error) {
          console.error("Error in handleSyncNotificationRead:", error);
        }
      };

      const handleSyncAllNotificationsRead = ({ timestamp }) => {
        if (Realtime_Notifications_UI?.treatment !== "on") {
          return;
        }

        try {
          const queryVars = {
            limit: INITIAL_NOTIFICATIONS,
            offset: 0,
            where: { associationid: { _eq: userAssociationId } }
          };
          const cachedData = client.cache.readQuery({
            query: GET_NOTIFICATIONS,
            variables: queryVars
          });

          if (cachedData?.notifications) {
            cachedData.notifications.forEach((notif) => {
              if (!notif.read) {
                const notifRef = client.cache.identify({ __typename: "notifications", id: notif.id });
                client.cache.writeFragment({
                  id: notifRef,
                  fragment: UPDATE_NOTIFICATIONS_READ_FRAGMENT,
                  data: { read: timestamp }
                });
              }
            });
          }

          client.cache.writeQuery({
            query: GET_UNREAD_COUNT,
            variables: { associationid: userAssociationId },
            data: {
              notifications_aggregate: {
                __typename: "notifications_aggregate",
                aggregate: {
                  __typename: "notifications_aggregate_fields",
                  count: 0
                }
              }
            }
          });
        } catch (error) {
          console.error(`Error In HandleSyncAllNotificationsRead: ${error?.message || ""}`);
        }
      };

      socketInstance.on("connect", handleConnect);
      socketInstance.on("reconnect", handleReconnect);
      socketInstance.on("connect_error", handleConnectionError);
      socketInstance.on("disconnect", handleDisconnect);
      socketInstance.on("bodyshop-message", handleBodyshopMessage);
      socketInstance.on("notification", handleNotification);
      socketInstance.on("sync-notification-read", handleSyncNotificationRead);
      socketInstance.on("sync-all-notifications-read", handleSyncAllNotificationsRead);
    };

    const unsubscribe = auth.onIdTokenChanged(async (user) => {
      if (user) {
        const token = await user.getIdToken();
        if (socketRef.current) {
          socketRef.current.emit("update-token", { token, bodyshopId: bodyshop.id });
        } else {
          initializeSocket(token).catch((err) =>
            console.error(`Something went wrong Initializing Sockets: ${err?.message || ""}`)
          );
        }
      } else {
        if (socketRef.current) {
          socketRef.current.disconnect();
          socketRef.current = null;
          setIsConnected(false);
        }
      }
    });

    return () => {
      unsubscribe();
      if (socketRef.current) {
        socketRef.current.disconnect();
        socketRef.current = null;
        setIsConnected(false);
      }
    };
  }, [
    bodyshop,
    notification,
    userAssociationId,
    markNotificationRead,
    markAllNotificationsRead,
    navigate,
    currentUser,
    Realtime_Notifications_UI,
    t
  ]);

  useEffect(() => {
    if (!socketInitialized) return;

    const onVisibilityChange = () => {
      if (document.visibilityState === "visible") {
        checkAndReconnect();
      }
    };

    const onFocus = () => {
      checkAndReconnect();
    };

    const onOnline = () => {
      checkAndReconnect();
    };

    const onPageShow = (event) => {
      if (event.persisted) {
        checkAndReconnect();
      }
    };

    document.addEventListener("visibilitychange", onVisibilityChange);
    window.addEventListener("focus", onFocus);
    window.addEventListener("online", onOnline);
    window.addEventListener("pageshow", onPageShow);

    // Sleep/wake detection using timer
    let lastTime = Date.now();
    const intervalMs = 1000; // Check every second
    const thresholdMs = 2000; // If more than 2 seconds elapsed, assume sleep/wake

    const sleepCheckInterval = setInterval(() => {
      const currentTime = Date.now();
      if (currentTime > lastTime + intervalMs + thresholdMs) {
        console.log("Detected potential wake from sleep/hibernate");
        checkAndReconnect();
      }
      lastTime = currentTime;
    }, intervalMs);

    return () => {
      document.removeEventListener("visibilitychange", onVisibilityChange);
      window.removeEventListener("focus", onFocus);
      window.removeEventListener("online", onOnline);
      window.removeEventListener("pageshow", onPageShow);
      clearInterval(sleepCheckInterval);
    };
  }, [socketInitialized]);

  return (
    <SocketContext.Provider
      value={{
        socket: socketRef.current,
        clientId,
        isConnected,
        markNotificationRead,
        markAllNotificationsRead,
        scenarioNotificationsOn: Realtime_Notifications_UI?.treatment === "on"
      }}
    >
      {children}
    </SocketContext.Provider>
  );
};

export default SocketProvider;