/* SolicitudPastor → window. Portal zIndex 96. Formulario real que genera
   /solicitudes_pastor/{uid} con estado="pendiente". Mientras se revisa, el
   usuario entra como "miembro" (para poder usar la app). Cuando el equipo
   CultoRD apruebe (desde el panel superadmin, se implementa aparte), el
   perfil se actualizará a "pastor".

   Props: { uid, user, onCerrar, onEnviada }
     - onCerrar: volver al sub-menú Pastor del SelectorPerfil.
     - onEnviada: cerrar todo el overlay (el perfil miembro ya se creó).
*/
(function () {
  const { useState, useEffect } = React;
  const { useTheme } = window;

  const BRAND = "#2563EB";
  const BRAND_SHADOW = "#1E4ED8";
  const PURPLE = "#7C3AED";
  const PURPLE_SHADOW = "#5B21B6";
  const GREEN = "#58CC02";
  const GREEN_SHADOW = "#46A302";
  const INK = "#2A2A2A";
  const MUTED = "#777";
  const DANGER = "#DC2626";
  const SURFACE = "#F3F4F6";
  const BORDER = "#E5E7EB";

  const MAX_COMENTARIO = 500;

  function fmtFecha(ms) {
    if (typeof ms !== "number") return "";
    try {
      const d = new Date(ms);
      return d.toLocaleDateString("es-DO", { day: "2-digit", month: "short", year: "numeric" });
    } catch (_) { return ""; }
  }

  function SolicitudPastor({ uid, user, onCerrar, onEnviada }) {
    const { dark } = (typeof useTheme === "function" ? useTheme() : null) || { dark: false };
    // "checking" | "existing" | "form" | "sending" | "success"
    const [vista, setVista] = useState("checking");
    const [miSolicitud, setMiSolicitud] = useState(null);

    const bgOverlay = dark ? "rgba(0, 0, 0, 0.7)" : "rgba(15, 23, 42, 0.55)";
    const bgCard = dark ? "#1A1A1A" : "#FFFFFF";
    const colorTitulo = dark ? "#F0F0F0" : INK;
    const colorCuerpo = dark ? "#F0F0F0" : INK;
    const colorMuted = dark ? "#9CA3AF" : MUTED;
    const colorBorde = dark ? "#2A2A2A" : BORDER;
    const bgErrorGlobal = dark ? "#2A0F10" : "#FEE2E2";
    const colorError = dark ? "#FCA5A5" : DANGER;

    const [nombreCompleto, setNombreCompleto] = useState(() => (user && user.displayName) || "");
    const [telefono, setTelefono] = useState("");
    const [iglesiaNombre, setIglesiaNombre] = useState("");
    const [ciudad, setCiudad] = useState("");
    const [cantidadMiembros, setCantidadMiembros] = useState("");
    const [anosPastoreando, setAnosPastoreando] = useState("");
    const [comentario, setComentario] = useState("");

    const [errores, setErrores] = useState({});
    const [errorGlobal, setErrorGlobal] = useState("");

    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onCerrar && onCerrar(); };
      document.addEventListener("keydown", onKey);
      return () => document.removeEventListener("keydown", onKey);
    }, [onCerrar]);

    useEffect(() => {
      if (!uid || typeof window.suscribirMiSolicitud !== "function") {
        setVista("form");
        return;
      }
      let resuelto = false;
      const unsub = window.suscribirMiSolicitud(uid, (sol) => {
        setMiSolicitud(sol);
        if (!resuelto) {
          resuelto = true;
          setVista(sol ? "existing" : "form");
        }
      });
      return () => { if (typeof unsub === "function") unsub(); };
    }, [uid]);

    function validar() {
      const errs = {};
      if (!nombreCompleto.trim() || nombreCompleto.trim().length < 2) {
        errs.nombre_completo = "Ingrese su nombre completo.";
      }
      const telClean = telefono.replace(/\D+/g, "");
      if (telClean.length < 7) {
        errs.telefono = "Ingrese un teléfono válido.";
      }
      if (!iglesiaNombre.trim() || iglesiaNombre.trim().length < 2) {
        errs.iglesia_nombre = "Indique el nombre de la iglesia.";
      }
      if (!ciudad.trim() || ciudad.trim().length < 2) {
        errs.ciudad = "Indique la ciudad.";
      }
      const miembros = Number(cantidadMiembros);
      if (!Number.isFinite(miembros) || miembros < 1) {
        errs.cantidad_miembros = "Ingrese un número (mínimo 1).";
      }
      const anos = Number(anosPastoreando);
      if (!Number.isFinite(anos) || anos < 0) {
        errs.anos_pastoreando = "Ingrese un número (0 o más).";
      }
      if (comentario.length > MAX_COMENTARIO) {
        errs.comentario = "Máximo " + MAX_COMENTARIO + " caracteres.";
      }
      return errs;
    }

    const errsActuales = validar();
    const formularioValido = Object.keys(errsActuales).length === 0;

    async function enviar() {
      const errs = validar();
      setErrores(errs);
      if (Object.keys(errs).length > 0) {
        setErrorGlobal("Revise los campos marcados en rojo.");
        return;
      }
      setErrorGlobal("");
      setVista("sending");
      try {
        if (typeof window.crearSolicitudPastor !== "function") {
          throw new Error("crearSolicitudPastor no disponible");
        }
        if (typeof window.crearPerfilInicial !== "function") {
          throw new Error("crearPerfilInicial no disponible");
        }
        const datos = {
          nombre_completo: nombreCompleto,
          telefono: telefono,
          iglesia_nombre: iglesiaNombre,
          ciudad: ciudad,
          cantidad_miembros: Number(cantidadMiembros),
          anos_pastoreando: Number(anosPastoreando),
          comentario: comentario,
        };
        await Promise.all([
          window.crearSolicitudPastor(uid, datos),
          window.crearPerfilInicial(uid, user, "miembro"),
        ]);
        setVista("success");
      } catch (e) {
        console.warn("[SolicitudPastor] error al enviar:", e);
        setErrorGlobal("No pudimos enviar la solicitud. Intente de nuevo.");
        setVista("form");
      }
    }

    if (typeof document === "undefined") return null;

    const overlay = (
      <div
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 96,
          background: bgOverlay,
          display: "flex",
          alignItems: "flex-start",
          justifyContent: "center",
          padding: 16,
          overflowY: "auto",
        }}
      >
        <div
          style={{
            width: "100%",
            maxWidth: 430,
            background: bgCard,
            borderRadius: 20,
            padding: "22px 20px 24px",
            boxShadow: dark ? "0 20px 60px rgba(0,0,0,0.6)" : "0 20px 60px rgba(0,0,0,0.25)",
            animation: "solpastFade 200ms ease-out",
            margin: "12px 0",
          }}
        >
          {vista === "checking" && renderChecking()}
          {vista === "existing" && renderExisting()}
          {(vista === "form" || vista === "sending") && renderForm()}
          {vista === "success" && renderSuccess()}
        </div>

        <style>{`
          @keyframes solpastFade {
            from { opacity: 0; transform: translateY(8px) }
            to   { opacity: 1; transform: none }
          }
          @keyframes solpastSpin { to { transform: rotate(360deg); } }
        `}</style>
      </div>
    );

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

    function renderChecking() {
      return (
        <div style={{ textAlign: "center", padding: "20px 0" }}>
          <div
            style={{
              width: 32, height: 32,
              border: "3px solid " + colorBorde,
              borderTopColor: PURPLE,
              borderRadius: "50%",
              animation: "solpastSpin 0.9s linear infinite",
              margin: "0 auto 10px",
            }}
          />
          <div style={{ fontSize: 13, fontWeight: 700, color: colorMuted }}>
            Revisando su información...
          </div>
        </div>
      );
    }

    function renderExisting() {
      const sol = miSolicitud || {};
      const estado = sol.estado || "pendiente";
      let tonoColor = PURPLE;
      let etiqueta = "En revisión";
      let mensaje = "Su solicitud está siendo revisada por el equipo CultoRD. Le avisaremos cuando sea aprobada.";
      if (estado === "aprobada") {
        tonoColor = GREEN;
        etiqueta = "Aprobada";
        mensaje = "Su solicitud fue aprobada. Su perfil ya es de pastor.";
      } else if (estado === "rechazada") {
        tonoColor = DANGER;
        etiqueta = "Rechazada";
        mensaje = sol.razon_rechazo
          ? "Su solicitud fue rechazada. Motivo: " + sol.razon_rechazo
          : "Su solicitud fue rechazada. Si cree que fue un error, contacte al equipo CultoRD.";
      }

      return (
        <div style={{ textAlign: "center" }}>
          <div style={{ fontSize: 46, lineHeight: 1, marginBottom: 8 }} aria-hidden>
            {estado === "aprobada" ? "✅" : estado === "rechazada" ? "❌" : "🕊️"}
          </div>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 900, color: colorTitulo }}>
            Ya envió una solicitud
          </h2>
          <div
            style={{
              display: "inline-block",
              marginTop: 10,
              padding: "6px 14px",
              borderRadius: 999,
              background: tonoColor + (dark ? "33" : "1A"),
              color: tonoColor,
              fontSize: 12,
              fontWeight: 900,
              textTransform: "uppercase",
              letterSpacing: 0.5,
            }}
          >
            {etiqueta}
          </div>
          <p style={{ margin: "14px 0 8px", fontSize: 14, color: colorCuerpo, fontWeight: 600, lineHeight: 1.5 }}>
            {mensaje}
          </p>
          {sol.creado_en && (
            <div style={{ fontSize: 12, color: colorMuted, fontWeight: 600, marginBottom: 18 }}>
              Enviada el {fmtFecha(sol.creado_en)}
            </div>
          )}
          <button
            type="button"
            onClick={onCerrar}
            style={botonPrincipalStyle(PURPLE, PURPLE_SHADOW)}
          >
            Volver
          </button>
        </div>
      );
    }

    function renderForm() {
      const submitting = vista === "sending";
      return (
        <div>
          <button
            type="button"
            onClick={onCerrar}
            disabled={submitting}
            style={{
              background: "transparent",
              border: "none",
              color: PURPLE,
              fontSize: 13,
              fontWeight: 800,
              cursor: submitting ? "default" : "pointer",
              padding: 0,
              marginBottom: 10,
              opacity: submitting ? 0.5 : 1,
            }}
          >
            ← Volver
          </button>

          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 900, color: colorTitulo, lineHeight: 1.2 }}>
            Solicitud para registrarse como Pastor
          </h2>
          <p style={{ margin: "8px 0 18px", fontSize: 13, color: colorMuted, fontWeight: 600, lineHeight: 1.5 }}>
            El equipo CultoRD revisará su información para validar el registro.
            Mientras tanto, podrá usar la app como miembro.
          </p>

          <Field
            label="Nombre completo"
            error={errores.nombre_completo}
            dark={dark}
          >
            <input
              type="text"
              value={nombreCompleto}
              onChange={(e) => { setErrores({ ...errores, nombre_completo: "" }); setNombreCompleto(e.target.value); }}
              placeholder="Ej. Juan Pérez"
              maxLength={120}
              disabled={submitting}
              style={inputStyle(errores.nombre_completo, dark)}
            />
          </Field>

          <Field
            label="Teléfono / WhatsApp"
            helper="Incluya el código del país si aplica."
            error={errores.telefono}
            dark={dark}
          >
            <input
              type="tel"
              inputMode="tel"
              value={telefono}
              onChange={(e) => { setErrores({ ...errores, telefono: "" }); setTelefono(e.target.value); }}
              placeholder="Ej. 809 555 1234"
              maxLength={32}
              disabled={submitting}
              style={inputStyle(errores.telefono, dark)}
            />
          </Field>

          <Field
            label="Nombre de la iglesia que pastorea"
            error={errores.iglesia_nombre}
            dark={dark}
          >
            <input
              type="text"
              value={iglesiaNombre}
              onChange={(e) => { setErrores({ ...errores, iglesia_nombre: "" }); setIglesiaNombre(e.target.value); }}
              placeholder="Ej. Iglesia Luz del Mundo"
              maxLength={160}
              disabled={submitting}
              style={inputStyle(errores.iglesia_nombre, dark)}
            />
          </Field>

          <Field
            label="Ciudad"
            error={errores.ciudad}
            dark={dark}
          >
            <input
              type="text"
              value={ciudad}
              onChange={(e) => { setErrores({ ...errores, ciudad: "" }); setCiudad(e.target.value); }}
              placeholder="Ej. Santo Domingo"
              maxLength={120}
              disabled={submitting}
              style={inputStyle(errores.ciudad, dark)}
            />
          </Field>

          <div style={{ display: "flex", gap: 10 }}>
            <div style={{ flex: 1 }}>
              <Field
                label="Miembros aprox."
                error={errores.cantidad_miembros}
                dark={dark}
              >
                <input
                  type="number"
                  inputMode="numeric"
                  min="1"
                  value={cantidadMiembros}
                  onChange={(e) => { setErrores({ ...errores, cantidad_miembros: "" }); setCantidadMiembros(e.target.value); }}
                  placeholder="0"
                  disabled={submitting}
                  style={inputStyle(errores.cantidad_miembros, dark)}
                />
              </Field>
            </div>
            <div style={{ flex: 1 }}>
              <Field
                label="Años pastoreando"
                error={errores.anos_pastoreando}
                dark={dark}
              >
                <input
                  type="number"
                  inputMode="numeric"
                  min="0"
                  value={anosPastoreando}
                  onChange={(e) => { setErrores({ ...errores, anos_pastoreando: "" }); setAnosPastoreando(e.target.value); }}
                  placeholder="0"
                  disabled={submitting}
                  style={inputStyle(errores.anos_pastoreando, dark)}
                />
              </Field>
            </div>
          </div>

          <Field
            label="Comentario adicional (opcional)"
            helper={comentario.length + " / " + MAX_COMENTARIO}
            error={errores.comentario}
            dark={dark}
          >
            <textarea
              value={comentario}
              onChange={(e) => { setErrores({ ...errores, comentario: "" }); setComentario(e.target.value.slice(0, MAX_COMENTARIO)); }}
              placeholder="Algo más que quiera contarle al equipo CultoRD..."
              maxLength={MAX_COMENTARIO}
              rows={3}
              disabled={submitting}
              style={{ ...inputStyle(errores.comentario, dark), resize: "vertical", minHeight: 70 }}
            />
          </Field>

          {errorGlobal && (
            <div style={{
              fontSize: 13, color: colorError, fontWeight: 700, textAlign: "center",
              background: bgErrorGlobal, borderRadius: 12, padding: "10px 12px",
              marginTop: 6, marginBottom: 10,
            }}>
              {errorGlobal}
            </div>
          )}

          <button
            type="button"
            onClick={enviar}
            disabled={!formularioValido || submitting}
            style={{
              ...botonPrincipalStyle(GREEN, GREEN_SHADOW),
              marginTop: 14,
              opacity: (formularioValido && !submitting) ? 1 : 0.6,
              cursor: (formularioValido && !submitting) ? "pointer" : "not-allowed",
              background: (formularioValido && !submitting) ? GREEN : (dark ? "#374151" : "#CBD5E1"),
              boxShadow: (formularioValido && !submitting) ? "0 4px 0 " + GREEN_SHADOW : "none",
            }}
          >
            {submitting ? "Enviando..." : "Enviar solicitud"}
          </button>

          <div style={{ fontSize: 11, color: colorMuted, textAlign: "center", marginTop: 10, lineHeight: 1.4 }}>
            Al enviar, entrará como <strong>miembro</strong> mientras revisamos su solicitud.
          </div>
        </div>
      );
    }

    function renderSuccess() {
      return (
        <div style={{ textAlign: "center", padding: "6px 0" }}>
          <div
            style={{
              width: 72, height: 72,
              borderRadius: "50%",
              background: GREEN + (dark ? "33" : "1A"),
              color: GREEN,
              fontSize: 40,
              fontWeight: 900,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              margin: "6px auto 14px",
            }}
            aria-hidden
          >
            ✓
          </div>
          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 900, color: colorTitulo }}>
            Solicitud enviada
          </h2>
          <p style={{ margin: "10px 0 18px", fontSize: 14, color: colorMuted, fontWeight: 600, lineHeight: 1.5 }}>
            Le avisaremos cuando sea revisada. Mientras tanto puede usar CultoRD
            como miembro.
          </p>
          <button
            type="button"
            onClick={() => { if (typeof onEnviada === "function") onEnviada(); else if (typeof onCerrar === "function") onCerrar(); }}
            style={botonPrincipalStyle(GREEN, GREEN_SHADOW)}
          >
            Entrar a CultoRD
          </button>
        </div>
      );
    }
  }

  function Field({ label, helper, error, children, dark }) {
    const colorLabel = dark ? "#D4D4D8" : "#3F3F46";
    const colorHelper = dark ? "#9CA3AF" : "#777";
    const colorErr = dark ? "#FCA5A5" : "#DC2626";
    return (
      <div style={{ marginBottom: 12 }}>
        <label style={{ display: "block", fontSize: 12, fontWeight: 800, color: colorLabel, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.4 }}>
          {label}
        </label>
        {children}
        {error ? (
          <div style={{ fontSize: 12, color: colorErr, fontWeight: 700, marginTop: 4 }}>
            {error}
          </div>
        ) : helper ? (
          <div style={{ fontSize: 11, color: colorHelper, fontWeight: 600, marginTop: 4 }}>
            {helper}
          </div>
        ) : null}
      </div>
    );
  }

  function inputStyle(hasError, dark) {
    const colorTxt = dark ? "#F0F0F0" : "#2A2A2A";
    const bg = dark ? "#141415" : "#F9FAFB";
    const borderOk = dark ? "#2A2A2A" : "#E5E7EB";
    const borderErr = dark ? "#FCA5A5" : "#DC2626";
    return {
      width: "100%",
      fontSize: 15,
      fontWeight: 600,
      color: colorTxt,
      background: bg,
      border: "2px solid " + (hasError ? borderErr : borderOk),
      borderRadius: 12,
      padding: "12px 14px",
      outline: "none",
      fontFamily: "inherit",
      boxSizing: "border-box",
    };
  }

  function botonPrincipalStyle(bg, shadow) {
    return {
      width: "100%",
      minHeight: 50,
      border: "none",
      borderRadius: 13,
      background: bg,
      color: "#FFFFFF",
      fontSize: 15,
      fontWeight: 900,
      cursor: "pointer",
      boxShadow: "0 4px 0 " + shadow,
      letterSpacing: 0.2,
      fontFamily: "inherit",
    };
  }

  window.SolicitudPastor = SolicitudPastor;
})();