import React, { useState, useEffect, useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';
import LinearProgress from '@mui/material/LinearProgress';

declare global {
  interface Window {
    /**
     * Öffnet ein Formular-Popup.
     * @param url Die URL des Formulars.
     * @param isPkt Optional. Wenn true, werden die Pkt-spezifischen UI-Elemente versteckt.
     */
    openFormPopup: (url: string, isPkt?: boolean) => void;
  }
}

// Liste der Selektoren, die für Pkt-Formulare ausgeblendet werden sollen
const pktHideSelectors = [
  '#side-menu',
  '#closeButton',
  '#toggleEditModeButton',
  '#toggleDebugInfoButton',
  '.navbar',
];

// Typ für Queue-Items
type PopupQueueItem = { url: string; isPkt: boolean };
const queue: PopupQueueItem[] = (window as any)._formPopupQueue || [];

// Vorläufige openFormPopup-Implementierung bis React mountet
if (typeof window.openFormPopup !== 'function') {
  window.openFormPopup = (url: string, isPkt = false) => {
    queue.push({ url, isPkt });
  };
  (window as any)._formPopupQueue = queue;
}

const FormPopup: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [src, setSrc] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  // Hier speichern wir, welche Selektoren bei diesem Aufruf ausgeblendet werden sollen
  const [hideSelectors, setHideSelectors] = useState<string[]>([]);
  const iframeRef = useRef<HTMLIFrameElement>(null);

  // Open-Handler, wird in window.openFormPopup umgebogen
  // Handler für window.openFormPopup
  const open = useCallback((url: string, isPkt = false) => {
    setSrc(url);
    setLoading(true);
    setVisible(true);
    setHideSelectors(isPkt ? pktHideSelectors : []);
  }, []);

  // Beim Mount: override window.openFormPopup und entleere ggf. Queue
  useEffect(() => {
    window.openFormPopup = open;
    if (queue.length) {
      queue.splice(0).forEach(({ url, isPkt }) => open(url, isPkt));
    }
  }, [open]);

  // Schließen-Funktion, feuert Event "formPopupClosed"
  const close = useCallback(
    (submitted = false) => {
      setVisible(false);
      window.dispatchEvent(
        new CustomEvent('formPopupClosed', { detail: { submitted } })
      );
    },
    []
  );

  // Escape-Key schließt das Popup
  useEffect(() => {
    const esc = (e: KeyboardEvent) => e.key === 'Escape' && visible && close();
    window.addEventListener('keydown', esc);
    return () => window.removeEventListener('keydown', esc);
  }, [visible, close]);

  // Message-Listener für cross-origin Fallback
  useEffect(() => {
    const handler = (e: MessageEvent) => {
      // Security check: only accept messages from your own origin 
      if (e.origin !== window.location.origin) { 
        console.warn("Blocked postMessage from unknown origin:", e.origin); 
        return; 
      }

      if (e.data?.type === 'taskoFormSubmitted') close(true);
    };
    window.addEventListener('message', handler);
    return () => window.removeEventListener('message', handler);
  }, [close]);
  

  // Versucht, btSave im IFrame zu hooken
  const attachBtSaveListener = useCallback(() => {
    const iframe = iframeRef.current;
    if (!iframe) return;
    try {
      const doc = iframe.contentDocument || iframe.contentWindow?.document;
      if (!doc) return;
      const btn = doc.getElementById('btSave');
      if (!btn) return;
      const clickHandler = () => setTimeout(() => close(true), 200);
      btn.addEventListener('click', clickHandler);
      return () => btn.removeEventListener('click', clickHandler);
    } catch {
      /* Cross-Origin: fallback to postMessage */
    }
  }, [close]);

  // Wird aufgerufen, sobald das IFrame geladen ist
  const handleLoad = () => {
    setLoading(false);
    attachBtSaveListener();
    if (hideSelectors.length) {
      try {
        const doc = iframeRef.current?.contentDocument;
        if (doc) {
          // Pkt-spezifische UI verstecken
          hideSelectors.forEach(sel => {
            doc.querySelectorAll<HTMLElement>(sel).forEach(el => el.style.display = 'none');
          });
          // Höhe des main-content setzen
          const main = doc.getElementById('main-content');
          if (main) {
            main.style.height = '40rem';
            // Anschließend Breite auf 100% setzen
            main.style.width = '100%';
          }
          const first = doc.querySelector<HTMLElement>('.top-level-el');
          if (first) {
            first.style.width = '70%';
          }
        }
      } catch {
        // Cross-Origin
      }
    }
    // Used in the form.blade.php to detect if opened from React, still needs testing 
    localStorage.setItem('openedFromReact', 'true');
  };


  if (!visible || !src) return null;

  // Styles für Overlay und Popup
  const overlay: React.CSSProperties = {
    position: 'fixed',
    inset: 0,
    background: 'rgba(0,0,0,0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10000,
  };
  const popup: React.CSSProperties = {
    width: '720px',
    height: '80vh',
    borderRadius: '10px',
    overflow: 'hidden',
    background: '#fff',
    boxShadow: '0 4px 10px rgba(0,0,0,0.25)',
    position: 'relative',
    display: 'flex',
    flexDirection: 'column',
    padding: '10px',
  };
  const topBar: React.CSSProperties = {
    flex: '0 0 42px',
    display: 'flex',
    alignItems: 'center',
    padding: '0 16px',
    borderBottom: '1px solid #eee',
    fontWeight: 600,
  };
  const iframeStyle: React.CSSProperties = {
    flex: 1,
    border: 'none',
    width: '100%',
  };
  const topBarButton: React.CSSProperties = {
    marginLeft: '8px',
    border: 'none',
    background: 'transparent',
    fontSize: '18px',
    cursor: 'pointer',
  };
  const rightButtonGroup: React.CSSProperties = {
    marginLeft: 'auto',
    display: 'flex',
    alignItems: 'center',
  };

  return ReactDOM.createPortal(
    <div style={overlay} onClick={() => close()}>
      <div style={popup} onClick={(e) => e.stopPropagation()}>
        <div style={topBar}>
          Formular
          <div style={rightButtonGroup}>
            <button
              style={topBarButton}
              title="Im neuen Fenster öffnen"
              onClick={() => {
                if (src) {
                  window.open(src, '_blank', 'noopener,noreferrer');
                  close();
                }
              }}
            >
              ⧉
            </button>
            <button
              style={{ ...topBarButton, fontSize: '24px' }}
              title="Schließen"
              onClick={() => close()}
            >
              ×
            </button>
          </div>
        </div>
        {loading && <LinearProgress />}
        <iframe
          ref={iframeRef}
          title="form"
          src={src}
          style={iframeStyle}
          onLoad={handleLoad}
        />
      </div>
    </div>,
    document.getElementById('popup-root') as HTMLElement
  );
};

export default FormPopup;