<script>
  document.addEventListener('DOMContentLoaded', function () {
    const overlay = document.getElementById('immersive-overlay');
    const frame = document.getElementById('immersive-frame');
    const closeButton = document.getElementById('immersive-close');
    const root = document.documentElement;

    if (!overlay || !frame || !closeButton) {
      return;
    }

    let isOpen = false;
    let returnToPath = null;
    let lastHistoryPath = null;
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const APP_BASE_PATH = '/app';
    const DEFAULT_RETURN_PATH = '/console/agents/';

    const isNarrowScreen = () => window.matchMedia('(max-width: 900px)').matches;
    const shouldBypassOverlay = () => isTouchDevice && isNarrowScreen();
    const isAppPath = (pathname) => pathname === APP_BASE_PATH || pathname.startsWith(`${APP_BASE_PATH}/`);

    const applyViewportVars = () => {
      const viewport = window.visualViewport;
      const height = viewport?.height ?? window.innerHeight ?? overlay.clientHeight;
      root.style.setProperty('--immersive-viewport-height', `${height}px`);
    };

    applyViewportVars();
    window.addEventListener('resize', applyViewportVars);
    window.visualViewport?.addEventListener('resize', applyViewportVars);
    window.visualViewport?.addEventListener('scroll', applyViewportVars);

    const setState = (state) => {
      overlay.dataset.state = state;
      overlay.setAttribute('aria-hidden', state === 'closed' ? 'true' : 'false');
    };

    const getCurrentPath = () => {
      return `${window.location.pathname}${window.location.search}${window.location.hash}` || '/';
    };

    const sanitizeReturnToPath = (rawPath) => {
      if (!rawPath) {
        return DEFAULT_RETURN_PATH;
      }
      try {
        const url = new URL(rawPath, window.location.origin);
        if (url.origin !== window.location.origin) {
          return DEFAULT_RETURN_PATH;
        }
        if (isAppPath(url.pathname)) {
          return DEFAULT_RETURN_PATH;
        }
        return `${url.pathname}${url.search}${url.hash}` || DEFAULT_RETURN_PATH;
      } catch {
        return DEFAULT_RETURN_PATH;
      }
    };

    const buildLaunchPath = (returnTo) => {
      return `/app?return_to=${encodeURIComponent(returnTo)}`;
    };

    const buildEmbedUrl = (rawUrl) => {
      const url = new URL(rawUrl, window.location.origin);
      url.searchParams.set('embed', '1');
      const query = url.searchParams.toString();
      return `${url.pathname}${query ? `?${query}` : ''}${url.hash}`;
    };

    const buildHistoryPath = (rawUrl) => {
      const url = new URL(rawUrl, window.location.origin);
      url.searchParams.delete('embed');
      url.searchParams.delete('return_to');
      const query = url.searchParams.toString();
      return `${url.pathname}${query ? `?${query}` : ''}${url.hash}`;
    };

    const isAppFrame = () => {
      try {
        const frameLocation = frame.contentWindow && frame.contentWindow.location;
        if (!frameLocation) {
          return false;
        }
        return frameLocation.pathname.startsWith('/app');
      } catch {
        return false;
      }
    };

    const openOverlay = ({ src, returnTo, historyPath } = {}) => {
      const resolvedReturnTo = sanitizeReturnToPath(returnTo || returnToPath || getCurrentPath());

      const rawTarget = src || buildLaunchPath(resolvedReturnTo);

      if (shouldBypassOverlay()) {
        if (rawTarget) {
          window.location.assign(rawTarget);
        }
        return;
      }

      if (!returnToPath) {
        returnToPath = resolvedReturnTo;
      }

      if (src) {
        frame.src = buildEmbedUrl(src);
      }

      if (!isOpen) {
        isOpen = true;
        document.body.classList.add('immersive-open');
        setState('loading');
      }

      const nextHistoryPath = historyPath || (src ? buildHistoryPath(src) : buildLaunchPath(resolvedReturnTo));
      if (nextHistoryPath && nextHistoryPath !== lastHistoryPath) {
        window.history.pushState({ immersive: true }, '', nextHistoryPath);
        lastHistoryPath = nextHistoryPath;
      }
    };

    const closeOverlay = (preserveHistory) => {
      if (!isOpen) {
        return;
      }
      isOpen = false;
      document.body.classList.remove('immersive-open');
      setState('closed');
      frame.src = 'about:blank';
      lastHistoryPath = null;
      const closeDestination = sanitizeReturnToPath(returnToPath);
      if (!preserveHistory) {
        window.history.replaceState({}, '', closeDestination);
      }
      returnToPath = null;
    };

    closeButton.addEventListener('click', () => closeOverlay(false));

    document.addEventListener('keydown', (event) => {
      if (!isOpen || event.key !== 'Escape') {
        return;
      }
      closeOverlay(false);
    });

    window.addEventListener('popstate', () => {
      if (isOpen) {
        closeOverlay(true);
      }
    });

    frame.addEventListener('load', () => {
      if (!isOpen) {
        return;
      }
      setState('ready');
    });

    window.addEventListener('message', (event) => {
      if (!isOpen) {
        return;
      }
      if (event.origin !== window.location.origin) {
        return;
      }
      const data = event.data || {};

      // Handle close request from iframe
      if (data.type === 'gobii-immersive-close') {
        closeOverlay(false);
        return;
      }

      if (data.type !== 'gobii-immersive-path' || typeof data.path !== 'string') {
        return;
      }
      window.history.replaceState({ immersive: true }, '', data.path);
      lastHistoryPath = data.path;
    });

    document.addEventListener('click', (event) => {
      if (event.defaultPrevented) {
        return;
      }
      if (!(event.target instanceof Element)) {
        return;
      }
      const link = event.target.closest('[data-immersive-link]');
      if (!link) {
        return;
      }
      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
        return;
      }
      const href = link.getAttribute('href');
      if (!href) {
        return;
      }
      if (shouldBypassOverlay()) {
        return;
      }
      event.preventDefault();
      openOverlay({ src: href, returnTo: getCurrentPath() });
    });

    document.addEventListener('submit', (event) => {
      if (event.defaultPrevented) {
        return;
      }
      if (!(event.target instanceof HTMLFormElement)) {
        return;
      }
      const form = event.target;
      if (!form.hasAttribute('data-immersive-form')) {
        return;
      }
      if (shouldBypassOverlay()) {
        form.removeAttribute('target');
        return;
      }
      const isAuthenticated = form.dataset.authenticated === 'true';
      if (!isAuthenticated) {
        form.removeAttribute('target');
        return;
      }
      const charterInput =
        form.querySelector('[data-immersive-charter]') ||
        form.querySelector('textarea[name="charter"]') ||
        form.querySelector('textarea');
      if (charterInput && !charterInput.value.trim()) {
        form.removeAttribute('target');
        return;
      }
      const returnTo = getCurrentPath() || '/';
      const returnToInput =
        form.querySelector('[data-immersive-return-to]') ||
        form.querySelector('#agent-return-to');
      const embedInput =
        form.querySelector('[data-immersive-embed]') ||
        form.querySelector('#agent-embed');
      if (returnToInput) {
        returnToInput.value = returnTo;
      }
      if (embedInput) {
        embedInput.value = '1';
      }
      const frameName = frame.getAttribute('name') || 'immersive-frame';
      form.setAttribute('target', frameName);
      openOverlay({ returnTo });
    });

    window.GobiiImmersiveOverlay = {
      open: openOverlay,
      close: () => closeOverlay(false),
      isOpen: () => isOpen,
    };
  });
</script>
