"use client";

import { useEffect, useState } from "react";

const USER_VIEW_STORAGE_KEY = "magent_user_view_preview";
const USER_VIEW_EVENT = "magent:user-view-change";

const readUserViewPreview = () => {
  if (typeof window === "undefined") return false;
  return window.sessionStorage.getItem(USER_VIEW_STORAGE_KEY) === "1";
};

const applyDocumentMode = (enabled: boolean) => {
  if (typeof document === "undefined") return;
  document.documentElement.dataset.userView = enabled ? "true" : "false";
};

export const setUserViewPreview = (enabled: boolean) => {
  if (typeof window === "undefined") return;
  if (enabled) {
    window.sessionStorage.setItem(USER_VIEW_STORAGE_KEY, "1");
  } else {
    window.sessionStorage.removeItem(USER_VIEW_STORAGE_KEY);
  }
  applyDocumentMode(enabled);
  window.dispatchEvent(new CustomEvent(USER_VIEW_EVENT, { detail: { enabled } }));
};

export const useUserViewPreview = () => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    const sync = () => {
      const nextValue = readUserViewPreview();
      applyDocumentMode(nextValue);
      setEnabled(nextValue);
    };
    sync();
    window.addEventListener(USER_VIEW_EVENT, sync);
    window.addEventListener("storage", sync);
    return () => {
      window.removeEventListener(USER_VIEW_EVENT, sync);
      window.removeEventListener("storage", sync);
    };
  }, []);

  return enabled;
};