import React, { useState, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';

// 현재 문서의 스타일(CSS)을 새 창으로 복사하는 함수
const copyStyles = (sourceDoc: Document, targetDoc: Document) => {
  Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
    try {
      if (styleSheet.cssRules) { // <style> 태그로 주입된 CSS
        const newStyleEl = sourceDoc.createElement('style');
        Array.from(styleSheet.cssRules).forEach(cssRule => {
          newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
        });
        targetDoc.head.appendChild(newStyleEl);
      } else if (styleSheet.href) { // <link> 태그로 연결된 CSS 파일
        const newLinkEl = sourceDoc.createElement('link');
        newLinkEl.rel = 'stylesheet';
        newLinkEl.href = styleSheet.href;
        targetDoc.head.appendChild(newLinkEl);
      }
    } catch (e) {
      console.warn('스타일시트를 복사할 수 없습니다:', e);
    }
  });
};

interface NewWindowPortalProps {
  children: React.ReactNode;
  onClose: () => void;
  title?: string;
}

const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, title = "Detail" }) => {
  const [container, setContainer] = useState<HTMLElement | null>(null);
  const newWindowRef = useRef<Window | null>(null);
  const onCloseRef = useRef(onClose);

  // onClose 함수를 ref로 저장하여 의존성 문제 해결
  useEffect(() => {
    onCloseRef.current = onClose;
  }, [onClose]);

  const handleUnload = useCallback(() => {
    onCloseRef.current();
  }, []);

  useEffect(() => {
    // 이미 창이 열려있으면 새로 열지 않음
    if (newWindowRef.current && !newWindowRef.current.closed) return;

    // 1. 새 창을 열고 참조를 저장합니다.
    newWindowRef.current = window.open('', title, 'width=900,height=800,resizable=yes,scrollbars=yes');
    
    if (newWindowRef.current) {
      newWindowRef.current.document.title = title;
      
      // 2. React 컴포넌트를 마운트할 컨테이너 div를 생성하여 새 창의 body에 추가합니다.
      const div = newWindowRef.current.document.createElement('div');
      newWindowRef.current.document.body.appendChild(div);
      setContainer(div);

      // 3. 메인 창의 스타일을 새 창으로 복사합니다. (매우 중요)
      copyStyles(document, newWindowRef.current.document);

      // 4. 사용자가 창을 닫을 때 부모에게 알리기 위한 이벤트 리스너를 설정합니다.
      // const handleUnload = () => {
      //   onClose();
      // };
      newWindowRef.current.addEventListener('unload', handleUnload);

      // 5. 컴포넌트가 사라질 때 창을 닫는 클린업 함수를 반환합니다.
      return () => {
        if (newWindowRef.current) {
          newWindowRef.current.removeEventListener('unload', handleUnload);
          if (!newWindowRef.current.closed) {
            newWindowRef.current.close();
          }
        }
      };
    } else {
      alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.');
      onCloseRef.current();
      // onClose();
    }
  }, [handleUnload, onClose, title]);

  // `createPortal`을 사용해 children을 새 창의 container div에 렌더링합니다.
  return container ? createPortal(children, container) : null;
};

export default NewWindowPortal;