/* BannerSolicitudPastor → window. Tira informativa arriba del Home cuando
   el usuario tiene una solicitud viva en /solicitudes_pastor/{uid}.

   Props: { uid, solicitud, onRegistrarIglesia }
   Estados visuales:
     - "pendiente" → amarillo, no se puede cerrar.
     - "aprobada"  → verde con CTA "Registrar mi iglesia" (abre el wizard).
                     El banner se vacía automáticamente cuando el usuario
                     completa el registro (app.jsx borra /solicitudes_pastor/{uid}).
     - "rechazada" → rojo con "Ver motivo" expandible y X para cerrar
                     localmente (se recuerda en localStorage por uid/estado/fecha).
*/
(function () {
  const { useState } = React;
  const { useTheme } = window;

  function buildKey(uid, solicitud) {
    return "cultord_banner_" + uid + "_" + (solicitud.estado || "") + "_" + (solicitud.creado_en || 0);
  }

  function BannerSolicitudPastor({ uid, solicitud, onRegistrarIglesia }) {
    const { dark } = (typeof useTheme === "function" ? useTheme() : { dark: false });

    const YELLOW_BG = dark ? "#1F2937" : "#FEF3C7";
    const YELLOW_FG = dark ? "#FCD34D" : "#92400E";
    const YELLOW_BORDER = dark ? "#78350F" : "#F59E0B";

    const GREEN_BG = dark ? "#14281C" : "#DCFCE7";
    const GREEN_FG = dark ? "#86EFAC" : "#166534";
    const GREEN_BORDER = dark ? "#166534" : "#22C55E";
    const GREEN_SHADOW = dark ? "#0B3D20" : "#14532D";

    const RED_BG = dark ? "#2A1414" : "#FEE2E2";
    const RED_FG = dark ? "#FCA5A5" : "#991B1B";
    const RED_BORDER = dark ? "#7F1D1D" : "#EF4444";

    const motivoBg = dark ? "rgba(255,255,255,0.05)" : "rgba(255,255,255,0.7)";

    const [verMotivo, setVerMotivo] = useState(false);
    const [cerradoLocal, setCerradoLocal] = useState(() => {
      if (!solicitud || !uid) return false;
      try { return !!localStorage.getItem(buildKey(uid, solicitud)); }
      catch (_) { return false; }
    });

    if (!solicitud) return null;
    if (cerradoLocal) return null;

    const estado = solicitud.estado || "pendiente";

    function cerrar() {
      try { localStorage.setItem(buildKey(uid, solicitud), "1"); } catch (_) {}
      setCerradoLocal(true);
    }

    if (estado === "pendiente") {
      return (
        <div style={wrapperStyle(YELLOW_BG, YELLOW_BORDER, YELLOW_FG)}>
          <div style={{ fontSize: 22, lineHeight: 1 }} aria-hidden>⏳</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.3 }}>
              Su solicitud de pastor está en revisión
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 2, lineHeight: 1.4 }}>
              El equipo CultoRD la revisará pronto. Mientras tanto puede usar la app.
            </div>
          </div>
        </div>
      );
    }

    if (estado === "aprobada") {
      return (
        <div style={{ ...wrapperStyle(GREEN_BG, GREEN_BORDER, GREEN_FG), flexWrap: "wrap" }}>
          <div style={{ fontSize: 22, lineHeight: 1 }} aria-hidden>🎉</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.3 }}>
              ¡Su solicitud fue aprobada!
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 2, lineHeight: 1.4 }}>
              Registre su iglesia para que aparezca en CultoRD.
            </div>
          </div>
          <button
            type="button"
            onClick={() => { if (typeof onRegistrarIglesia === "function") onRegistrarIglesia(); }}
            style={{
              flexBasis: "100%",
              marginTop: 4,
              minHeight: 42,
              border: "none",
              borderRadius: 10,
              background: dark ? "#16A34A" : "#22C55E",
              color: "#FFFFFF",
              fontSize: 13,
              fontWeight: 900,
              cursor: "pointer",
              boxShadow: "0 3px 0 " + GREEN_SHADOW,
              fontFamily: "inherit",
            }}
          >
            Registrar mi iglesia
          </button>
        </div>
      );
    }

    if (estado === "rechazada") {
      const motivo = String(solicitud.razon_rechazo || "").trim();
      return (
        <div style={{ ...wrapperStyle(RED_BG, RED_BORDER, RED_FG), flexWrap: "wrap", position: "relative" }}>
          <div style={{ fontSize: 22, lineHeight: 1 }} aria-hidden>⚠️</div>
          <div style={{ flex: 1, minWidth: 0, paddingRight: 18 }}>
            <div style={{ fontSize: 14, fontWeight: 900, lineHeight: 1.3 }}>
              Su solicitud no fue aprobada
            </div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 2, lineHeight: 1.4 }}>
              Si cree que fue un error, contacte al equipo CultoRD.
            </div>
            {motivo ? (
              <button
                type="button"
                onClick={() => setVerMotivo((v) => !v)}
                style={{
                  marginTop: 6,
                  background: "transparent",
                  border: "none",
                  color: RED_FG,
                  fontSize: 12,
                  fontWeight: 900,
                  cursor: "pointer",
                  padding: 0,
                  textDecoration: "underline",
                  fontFamily: "inherit",
                }}
              >
                {verMotivo ? "Ocultar motivo" : "Ver motivo"}
              </button>
            ) : null}
            {verMotivo && motivo ? (
              <div
                style={{
                  marginTop: 6,
                  padding: "8px 10px",
                  background: motivoBg,
                  border: "1px solid " + RED_BORDER,
                  borderRadius: 8,
                  fontSize: 12,
                  fontWeight: 700,
                  color: RED_FG,
                  lineHeight: 1.5,
                  whiteSpace: "pre-wrap",
                }}
              >
                {motivo}
              </div>
            ) : null}
          </div>
          <button
            type="button"
            onClick={cerrar}
            aria-label="Cerrar"
            style={{
              position: "absolute",
              top: 8,
              right: 10,
              background: "transparent",
              border: "none",
              color: RED_FG,
              fontSize: 16,
              fontWeight: 900,
              cursor: "pointer",
              padding: 4,
              lineHeight: 1,
              fontFamily: "inherit",
            }}
          >
            ✕
          </button>
        </div>
      );
    }

    return null;
  }

  function wrapperStyle(bg, border, fg) {
    return {
      margin: "10px 14px 0",
      padding: "12px 14px",
      background: bg,
      border: "1.5px solid " + border,
      borderRadius: 14,
      color: fg,
      display: "flex",
      alignItems: "flex-start",
      gap: 12,
    };
  }

  window.BannerSolicitudPastor = BannerSolicitudPastor;
})();