/* ConfirmModal → window.
   Modal propio para confirmar acciones (reemplaza window.confirm) o avisar
   (reemplaza window.alert, pasando textoCancelar={null}). Estilo Duolingo,
   portal zIndex 90 (debajo del SelectorPerfil que es 95).

   Props:
     abierto          boolean            render gate
     titulo           string             título corto
     mensaje          string             cuerpo del mensaje
     textoConfirmar   string (opt)       default "Aceptar"
     textoCancelar    string|null (opt)  default "Cancelar"; null oculta el botón (modo alert)
     tono             "default"|"peligro"  peligro → botón rojo
     cargando         boolean            disable + spinner en el botón de confirmar
     onCancelar       () => void
     onConfirmar      () => void         puede ser async
*/
(function () {
  const { useTheme } = window;

  function ConfirmModal({
    abierto,
    titulo,
    mensaje,
    textoConfirmar,
    textoCancelar,
    tono,
    cargando,
    onCancelar,
    onConfirmar,
  }) {
    if (!abierto) return null;
    if (typeof document === "undefined") return null;

    const { dark } = (typeof useTheme === "function" ? useTheme() : { dark: false });

    const esPeligro = tono === "peligro";
    const confirmarBg = esPeligro ? "#DC2626" : "#2563EB";
    const confirmarShadow = esPeligro ? "#991B1B" : "#1E4ED8";

    const cardBg = dark ? "#1A1A1A" : "#FFFFFF";
    const colorTitulo = dark ? "#F0F0F0" : "#111827";
    const colorMensaje = dark ? "#9CA3AF" : "#4B5563";
    const colorBorde = dark ? "#2A2A2A" : "#E5E7EB";
    const cancelarBg = dark ? "#141415" : "#FFFFFF";
    const cancelarColor = dark ? "#F0F0F0" : "#4B5563";
    const cardShadow = dark ? "0 14px 40px rgba(0,0,0,0.6)" : "0 14px 40px rgba(0,0,0,0.25)";

    const mostrarCancelar = textoCancelar !== null && textoCancelar !== "";

    const overlay = (
      <div
        role="dialog"
        aria-modal="true"
        aria-label={titulo || "Confirmar"}
        onClick={(e) => {
          if (e.target === e.currentTarget && !cargando && typeof onCancelar === "function") {
            onCancelar();
          }
        }}
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 90,
          background: "rgba(17, 24, 39, 0.55)",
          display: "flex",
          alignItems: "flex-end",
          justifyContent: "center",
          padding: 16,
          animation: "confirmFadeBg 160ms ease-out",
        }}
      >
        <div
          style={{
            width: "100%",
            maxWidth: 440,
            background: cardBg,
            borderRadius: 20,
            padding: "22px 22px 18px",
            boxShadow: cardShadow,
            animation: "confirmSlideUp 200ms cubic-bezier(0.22, 1, 0.36, 1)",
            marginBottom: "max(16px, env(safe-area-inset-bottom, 0px))",
          }}
        >
          {titulo && (
            <div style={{
              fontSize: 17,
              fontWeight: 900,
              color: colorTitulo,
              marginBottom: mensaje ? 8 : 0,
              lineHeight: 1.25,
            }}>
              {titulo}
            </div>
          )}
          {mensaje && (
            <div style={{
              fontSize: 14,
              fontWeight: 500,
              color: colorMensaje,
              lineHeight: 1.45,
              marginBottom: 20,
            }}>
              {mensaje}
            </div>
          )}

          <div style={{
            display: "flex",
            gap: 10,
            flexDirection: mostrarCancelar ? "row" : "column",
          }}>
            {mostrarCancelar && (
              <button
                type="button"
                onClick={() => { if (!cargando && typeof onCancelar === "function") onCancelar(); }}
                disabled={!!cargando}
                style={{
                  flex: 1,
                  padding: "12px 14px",
                  borderRadius: 14,
                  border: "2px solid " + colorBorde,
                  background: cancelarBg,
                  color: cancelarColor,
                  fontSize: 14,
                  fontWeight: 800,
                  cursor: cargando ? "default" : "pointer",
                  boxShadow: "0 3px 0 " + colorBorde,
                  fontFamily: "inherit",
                }}
              >
                {textoCancelar || "Cancelar"}
              </button>
            )}
            <button
              type="button"
              onClick={() => { if (!cargando && typeof onConfirmar === "function") onConfirmar(); }}
              disabled={!!cargando}
              style={{
                flex: mostrarCancelar ? 1 : undefined,
                padding: "12px 14px",
                borderRadius: 14,
                border: "2px solid " + confirmarBg,
                background: confirmarBg,
                color: "#FFFFFF",
                fontSize: 14,
                fontWeight: 900,
                cursor: cargando ? "default" : "pointer",
                boxShadow: "0 3px 0 " + confirmarShadow,
                opacity: cargando ? 0.75 : 1,
                fontFamily: "inherit",
              }}
            >
              {cargando ? "Un momento..." : (textoConfirmar || "Aceptar")}
            </button>
          </div>
        </div>

        <style>{`
          @keyframes confirmFadeBg { from { opacity: 0 } to { opacity: 1 } }
          @keyframes confirmSlideUp { from { transform: translateY(16px); opacity: 0.6 } to { transform: none; opacity: 1 } }
        `}</style>
      </div>
    );

    return ReactDOM.createPortal(overlay, document.body);
  }

  window.ConfirmModal = ConfirmModal;
})();