"use client";

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

export type ModalProps = {
  open: boolean;
  onClose?: () => void;
  title?: React.ReactNode;
  size?: 'sm' | 'lg' | 'xl';
  centered?: boolean;
  scrollable?: boolean;
  children: React.ReactNode;
  footer?: React.ReactNode;
};

/**
 * Bootstrap-style modal rendered in a portal with backdrop.
 */
export function Modal({ open, onClose, title, size, centered, scrollable, children, footer }: ModalProps) {
  const modalBody = (
    <div className={`modal fade ${open ? 'show' : ''}`} style={{ display: open ? 'block' : 'none' }} role="dialog" aria-modal="true">
      <div
        className={[
          'modal-dialog',
          size ? `modal-${size}` : '',
          centered ? 'modal-dialog-centered' : '',
          scrollable ? 'modal-dialog-scrollable' : ''
        ]
          .filter(Boolean)
          .join(' ')}
      >
        <div className="modal-content">
          {title ? (
            <div className="modal-header">
              <h5 className="modal-title">{title}</h5>
              {onClose ? (
                <button type="button" className="btn-close" aria-label="Close" onClick={onClose}></button>
              ) : null}
            </div>
          ) : null}
          <div className="modal-body">{children}</div>
          {footer ? <div className="modal-footer">{footer}</div> : null}
        </div>
      </div>
      <div className={`modal-backdrop fade ${open ? 'show' : ''}`} />
    </div>
  );

  useEffect(() => {
    if (typeof document === 'undefined') return;
    if (!open) return;
    const body = document.body;
    const previousOverflow = body.style.overflow;
    body.style.overflow = 'hidden';
    body.classList.add('modal-open');
    return () => {
      body.style.overflow = previousOverflow;
      body.classList.remove('modal-open');
    };
  }, [open]);

  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(modalBody, document.body);
}