edr-platform/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/UserManagementHostPage.tsx

import { useEffect, useRef, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { getCookie } from '@/auth/cookies';

function readToken(): string | null {
  return getCookie('auth-token') ?? null;
}

function readRefreshToken(): string | null {
  return getCookie('refresh-token') ?? null;
}

export default function UserManagementHostPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const mountBase = (
    (import.meta.env.VITE_USER_MANAGEMENT_BASE as string | undefined) ?? '/_um'
  ).replace(/\/$/, '');

  const moduleOrigin = window.location.origin;

  const [iframeSrc] = useState(() => {
    const sub = location.pathname.replace(/^\/(?:dashboard\/)?um(?=\/|$)/, '');
    return mountBase + (sub || '/') + location.search;
  });

  // ✅ Send token when iframe loads
  const handleIframeLoad = () => {
    const token = readToken();
    const refreshToken = readRefreshToken();
    const target = iframeRef.current?.contentWindow;

    if (!token) {
      console.warn('⚠️ No authentication token found');
      return;
    }

    if (!target) {
      console.warn('⚠️ No iframe reference');
      return;
    }

    target.postMessage(
      {
        type: 'UM_AUTH_TOKEN',
        token,
        refreshToken,
      },
      moduleOrigin
    );

    console.log('✅ Token sent to iframe module');
  };

  // ✅ Listen for messages from iframe
  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      // Security: Only accept from same origin
      if (event.origin !== moduleOrigin) {
        console.warn('🚫 Blocked message from different origin:', event.origin);
        return;
      }

      const data = event.data as { type?: string; path?: string } | undefined;
      if (!data) return;

      // Handle auth request (if module asks for token again)
      if (data.type === 'UM_REQUEST_AUTH') {
        const token = readToken();
        const refreshToken = readRefreshToken();
        const target = iframeRef.current?.contentWindow;

        if (token && target) {
          target.postMessage(
            {
              type: 'UM_AUTH_TOKEN',
              token,
              refreshToken,
            },
            moduleOrigin
          );
          console.log('✅ Token resent to iframe (on request)');
        }
        return;
      }

      // Handle route synchronization
      if (data.type === 'UM_ROUTE_CHANGED' && typeof data.path === 'string') {
        const target = '/dashboard/um' + data.path;
        if (window.location.pathname + window.location.search !== target) {
          navigate(target, { replace: true });
        }
      }
    };

    window.addEventListener('message', onMessage);
    return () => window.removeEventListener('message', onMessage);
  }, [moduleOrigin, navigate]);

  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <iframe
        ref={iframeRef}
        title="User Management"
        src={iframeSrc}
        onLoad={handleIframeLoad}
        style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
      />
    </div>
  );
}