import { createPortal } from 'react-dom';
import { X } from 'lucide-react';
import { useId } from 'react';
import { useModalFocus } from '../hooks/useModalFocus.js';
import { useUi } from '../context/ui-context.jsx';

// Popup grande para ver/editar el detalle de un elemento de un listado (reemplaza el patron
// "panel debajo del listado"). Reglas duras:
// 1. NUNCA se cierra con clic afuera del popup — solo con el boton "Cerrar" de su header o una
//    accion explicita del formulario (ej. Guardar/Cancelar).
// 2. Alto FIJO (no se ajusta al contenido): moverse entre pestañas/secciones internas del popup
//    (ej. Info/Comentarios/Documentos) nunca debe cambiar su tamaño — solo el contenido interno
//    hace scroll. `height` es fijo por instancia; ajustar via prop segun cuanto contenido espera.
export function DetailPopup({ open, title, onClose, children, width = 720, height = 640 }) {
  const titleId = useId();
  const { t } = useUi();
  const modalRef = useModalFocus(open, onClose);
  if (!open) return null;
  return createPortal(
    <div className="detail-popup-overlay">
      <div className="detail-popup" style={{ maxWidth: width, height }} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1} ref={modalRef}>
        <div className="detail-popup-header">
          <div className="detail-popup-title" id={titleId}>{title}</div>
          <button className="icon-btn" aria-label={t('common_close')} onClick={onClose}><X /></button>
        </div>
        <div className="detail-popup-body">{children}</div>
      </div>
    </div>,
    document.body
  );
}