import React, { useEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
import { useModalScrollLock } from '../hooks/useModalScrollLock'

/**
 * Formular-Modal am document.body (Portal) — volle Viewport-Breite, kein Hintergrund-Scroll.
 */
export default function FormModalOverlay({
  open,
  children,
  raised = false,
  className = '',
  onBackdropClick,
  'data-testid': testId,
}) {
  const overlayRef = useRef(null)
  useModalScrollLock(open)

  useEffect(() => {
    if (!open) return undefined
    const t = window.setTimeout(() => {
      overlayRef.current?.focus({ preventScroll: true })
    }, 0)
    return () => clearTimeout(t)
  }, [open])

  if (!open) return null

  const overlayClass = [
    'modal-overlay',
    'modal-overlay--form',
    raised ? 'modal-overlay--raised' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ')

  return createPortal(
    <div
      ref={overlayRef}
      tabIndex={-1}
      data-testid={testId}
      className={overlayClass}
      onClick={
        onBackdropClick
          ? (e) => {
              if (e.target === e.currentTarget) onBackdropClick()
            }
          : undefined
      }
    >
      {children}
    </div>,
    document.body,
  )
}