import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

// Erweiterung des globalen Window-Typs
declare global {
  interface Window {
    openPopup: (
      title: string,
      infoMain: string,
      infoSub: string,
      imageUrl?: string,
      imageCaption?: string,
      captionAlign?: 'left' | 'center' | 'right',
      captionMoveDown?: boolean
    ) => void;
  }
}

interface PopupData {
  title: string;
  infoMain: string;
  infoSub: string;
  imageUrl: string;
  imageCaption?: string;
  captionAlign?: 'left' | 'center' | 'right';
  captionMoveDown?: boolean;
}

const Popup: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [popupData, setPopupData] = useState<PopupData | null>(null);

  const handleOpen = (
    title: string,
    infoMain: string,
    infoSub: string,
    imageUrl?: string,
    imageCaption: string = '',
    captionAlign: 'left' | 'center' | 'right' = 'center',
    captionMoveDown: boolean = false
  ) => {
    const finalImageUrl = imageUrl || '';
    setPopupData({
      title,
      infoMain,
      infoSub,
      imageUrl: finalImageUrl,
      imageCaption,
      captionAlign,
      captionMoveDown,
    });
    setVisible(true);
  };

  useEffect(() => {
    window.openPopup = handleOpen;
  }, []);

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

  const popupContentStyle: React.CSSProperties = {
    width: '700px',
    height: '540px',
    borderRadius: '10px',
    padding: '14px 18px',
    boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-around',
    position: 'relative',
    placeContent: 'center',
    gap:'15px',

  };

  const overlayStyle: React.CSSProperties = {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10000,
  };

  const titleStyle: React.CSSProperties = {
    width: 'fit-content',
    position: 'absolute',
    top: '14px',
    left: '18px',
    margin: 0,
    fontFamily: "'Roboto', sans-serif",
    fontWeight: 600,
    fontSize: '30px',
  };

  const mainTextStyle: React.CSSProperties = {
    width: '620px',
    fontFamily: "'Roboto', sans-serif",
    fontWeight: 400,
    fontSize: '18px',
    margin: 0,
    marginInline: 'auto',
    whiteSpace: 'pre-wrap',
  };

  const subTextStyle: React.CSSProperties = {
    width: '620px',
    fontFamily: "'Roboto', sans-serif",
    fontWeight: 600,
    fontSize: '18px',
    margin: 0,
    marginTop: '10px',
    marginInline: 'auto',
    whiteSpace: 'pre-wrap',
  };

  const closeButtonStyle: React.CSSProperties = {
    position: 'absolute',
    top: '14px',
    right: '22px',
    border: 'none',
    background: 'transparent',
    fontSize: '36px',
    cursor: 'pointer',
  };

  // Container mit position: relative für absolute Caption
  const imageContainerStyle: React.CSSProperties = {
    display: 'inline-block',
    position: 'relative',
    alignSelf: 'center',
    marginTop: '40px',
  };

  // Caption wird absolut im Container positioniert
  const captionStyle: React.CSSProperties = {
    position: 'absolute',
    left: 0,
    right: 0,
    fontFamily: "'Roboto', sans-serif",
    fontWeight: 700,
    fontSize: '22px',
    lineHeight: '100%',
    letterSpacing: '0%',
    textAlign: popupData.captionAlign,
    top: popupData.captionMoveDown ? '30px' : '-10px',
    color: 'rgba(68, 68, 68, 1)',
  };

  // Bild in natürlicher Größe
  const imageStyle: React.CSSProperties = {
    display: 'block',
    width: 'auto',
    height: 'auto',
  };

  const formatText = (text: string) => text.replace(/\n/g, '<br/>');

  return ReactDOM.createPortal(
    <div style={overlayStyle} onClick={() => setVisible(false)}>
      <div style={popupContentStyle} onClick={(e) => e.stopPropagation()}>
        <h2 style={titleStyle}>{popupData.title}</h2>
        <button style={closeButtonStyle} onClick={() => setVisible(false)}>
          &times;
        </button>
        {popupData.imageUrl && (
          <div style={imageContainerStyle}>
            {popupData.imageCaption && (
              <div style={captionStyle}>{popupData.imageCaption}</div>
            )}
            <img src={popupData.imageUrl} alt="Popup Bild" style={imageStyle} />
          </div>
        )}
        {/* Fester Abstand von 15px zwischen Bild und Texten */}
        <div style={{ marginTop: '15px' }}>
          <p
            style={mainTextStyle}
            dangerouslySetInnerHTML={{ __html: formatText(popupData.infoMain) }}
          ></p>
          <p
            style={subTextStyle}
            dangerouslySetInnerHTML={{ __html: formatText(popupData.infoSub) }}
          ></p>
        </div>
      </div>
    </div>,
    document.getElementById('popup-root') as HTMLElement
  );
};

const popupRoot = document.getElementById('info-popup-root');
if (popupRoot) {
  ReactDOM.render(<Popup />, popupRoot);
}

export default Popup;