// ─────────────────────────────────────────────────────
// GUT-226 — HelpTip: icono `?` que explica al hover qué significa un campo.
//
// Se usa inline dentro de la etiqueta:
//   <label>F. instalación <HelpTip text="Cuándo se instaló de hecho."/></label>
//
// No reutiliza `.tip`/`data-tip` porque ese va con white-space: nowrap — sirve
// para "Editar" en un botón, no para una frase. `.helptip` envuelve a 240px.
//
// El tooltip se voltea solo cuando el icono está cerca del borde derecho, para
// que no se salga de pantalla en la columna derecha de un drawer.
// ─────────────────────────────────────────────────────

const HELPTIP_W = 240;

const HelpTip = ({ text, label }) => {
  const ref = React.useRef(null);
  const [flip, setFlip] = React.useState(false);

  // Se mide al abrir, no al montar: el drawer entra con una transición y la
  // posición final no se conoce hasta que termina.
  const medir = () => {
    const el = ref.current;
    if (!el) return;
    const { left } = el.getBoundingClientRect();
    setFlip(left + HELPTIP_W / 2 + 16 > window.innerWidth);
  };

  return (
    <span
      ref={ref}
      className={`helptip${flip ? ' flip' : ''}`}
      data-help={text}
      tabIndex={0}
      role="note"
      aria-label={label ? `Ayuda sobre ${label}: ${text}` : `Ayuda: ${text}`}
      onMouseEnter={medir}
      onFocus={medir}
    >?</span>
  );
};

window.HelpTip = HelpTip;