// Resenas.jsx — Reseñas y sugerencias de los usuarios.
//
// Tres piezas:
//   · ResenaModal    → el formulario (pop-up)
//   · ResenaNudge    → el aviso pequeño y discreto dentro de cada función
//   · ResenasSection → la lista pública, con promedio y 3 órdenes de lectura
//
// SEGURIDAD Y PRIVACIDAD
//   La moderación de verdad ocurre en el SERVIDOR (sql/resenas.sql): un filtro
//   en JavaScript se saltaría abriendo las herramientas del navegador. Aquí solo
//   se avisa al usuario cuanto antes, por cortesía.
//   La lista pública llega por la función resenas_publicas(), que jamás devuelve
//   user_id ni correos.

const { useState: useReS, useEffect: useReE, useCallback: useReC } = React;

const RESENA_VISTA_KEY = 'cyna_resena_popup_visto';
const RESENA_NUDGE_KEY = 'cyna_resena_nudge_cerrado';

function sbClient() {
  return (window.cynaAuth && window.cynaAuth.client) || null;
}

// ─── Estrellas ──────────────────────────────────────────────
function Estrellas({ valor, onChange, size = 20, readOnly }) {
  const [hover, setHover] = useReS(0);
  const activo = hover || valor;
  return (
    <div className={'rs-stars' + (readOnly ? ' ro' : '')} role={readOnly ? 'img' : 'radiogroup'}
         aria-label={readOnly ? `${valor} de 5 estrellas` : 'Elige una calificación'}>
      {[1, 2, 3, 4, 5].map(n => (
        <button
          key={n}
          type="button"
          className={'rs-star' + (n <= activo ? ' on' : '')}
          onClick={readOnly ? undefined : () => onChange(n)}
          onMouseEnter={readOnly ? undefined : () => setHover(n)}
          onMouseLeave={readOnly ? undefined : () => setHover(0)}
          disabled={readOnly}
          aria-label={readOnly ? undefined : `${n} estrella${n > 1 ? 's' : ''}`}
        >
          <svg width={size} height={size} viewBox="0 0 24 24" fill={n <= activo ? 'currentColor' : 'none'}
               stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round">
            <path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>
          </svg>
        </button>
      ))}
    </div>
  );
}

// ─── Formulario (pop-up) ────────────────────────────────────
function ResenaModal({ onClose }) {
  const user = window.__cynaUser || null;
  const [estrellas, setEstrellas] = useReS(0);
  const [texto, setTexto] = useReS('');
  const [sugerencia, setSugerencia] = useReS('');
  const [estado, setEstado] = useReS('idle'); // idle | enviando | ok | retenida | error
  const [error, setError] = useReS('');
  const [yaTenia, setYaTenia] = useReS(false);

  // Si ya dejó una reseña, la traemos para que la edite en vez de duplicarla.
  useReE(() => {
    const sb = sbClient();
    if (!sb || !user) return;
    let cancel = false;
    sb.rpc('mi_resena').then(({ data }) => {
      if (cancel || !data || !data.length) return;
      const r = data[0];
      setEstrellas(r.estrellas); setTexto(r.texto || '');
      setSugerencia(r.sugerencia || ''); setYaTenia(true);
    }, () => {});
    return () => { cancel = true; };
  }, []);

  const enviar = async () => {
    setError('');
    const sec = window.cynaSec;
    const sb = sbClient();

    if (!user) { setError('Necesitas iniciar sesión para dejar tu reseña.'); return; }
    if (!sb) { setError('El servicio no está disponible ahora mismo.'); return; }
    if (!estrellas) { setError('Elige cuántas estrellas le das.'); return; }

    const limpio = sec ? sec.sanitizeText(texto, 600) : texto.trim();
    const sug = sec ? sec.sanitizeText(sugerencia, 400) : sugerencia.trim();
    if (limpio.length < 5) { setError('Cuéntanos un poco más (al menos 5 caracteres).'); return; }

    // Límite en el navegador: cortesía para no golpear el servidor. El límite
    // real lo impone la base de datos.
    if (sec) {
      const rl = sec.rateLimit('resena', { minGap: 60, maxPerHour: 5 });
      if (!rl.ok) { setError('Espera un momento antes de volver a enviar.'); return; }
    }

    setEstado('enviando');
    const nombre = (user.user_metadata && (user.user_metadata.full_name || user.user_metadata.nombre))
      || (user.email ? user.email.split('@')[0] : 'Usuario');

    const { error: err } = await sb.from('cyna_resenas').upsert({
      user_id: user.id,
      nombre: String(nombre).slice(0, 60),
      estrellas,
      texto: limpio,
      sugerencia: sug || null,
    }, { onConflict: 'user_id' });

    if (err) {
      setEstado('error');
      // El error completo va a la consola: sin esto, un fallo de permisos y uno
      // de red se ven igual en pantalla y no hay forma de diagnosticarlos.
      console.error('[Cynamonurs] Error al guardar la reseña:', err);

      const msg = err.message || '';
      if (/Espera un momento/i.test(msg)) {
        setError('Espera un minuto antes de volver a editar tu reseña.');
      } else if (err.code === '42501' || /row-level security|permission denied/i.test(msg)) {
        setError('No pudimos guardar tu reseña en este momento. Inténtalo de nuevo en un rato.');
      } else if (/check constraint|violates check/i.test(msg)) {
        setError('Revisa el texto: debe tener entre 5 y 600 caracteres.');
      } else {
        setError('No se pudo guardar tu reseña. Inténtalo de nuevo más tarde.');
      }
      return;
    }

    // Preguntamos cómo quedó: el servidor pudo retenerla por el filtro.
    const { data } = await sb.rpc('mi_resena');
    const retenida = data && data[0] && data[0].estado === 'retenida';
    setEstado(retenida ? 'retenida' : 'ok');
    if (window.cynaTrack) window.cynaTrack('resena_enviada', { estrellas, retenida: !!retenida });
    try { localStorage.setItem(RESENA_VISTA_KEY, '1'); } catch (e) {}
    window.dispatchEvent(new CustomEvent('cyna-resenas'));
  };

  const cerrar = () => {
    try { localStorage.setItem(RESENA_VISTA_KEY, '1'); } catch (e) {}
    onClose();
  };

  return (
    <div className="cta-modal-scrim" onClick={cerrar}>
      <div className="cta-modal" onClick={e => e.stopPropagation()}>
        <div className="cta-modal-head">
          <h3>{yaTenia ? 'Edita tu reseña' : 'Cuéntanos qué te pareció'}</h3>
          <button className="cta-modal-close" onClick={cerrar} aria-label="Cerrar">×</button>
        </div>

        <div className="cta-modal-body">
          {!user ? (
            <div className="rs-aviso">
              <p>Para dejar una reseña necesitas <strong>iniciar sesión</strong>. Así evitamos reseñas falsas y spam.</p>
              <button className="btn-primary" onClick={() => { cerrar(); window.__cynaGoLogin && window.__cynaGoLogin(); }}>
                Iniciar sesión
              </button>
            </div>
          ) : estado === 'ok' || estado === 'retenida' ? (
            <div className="rs-aviso">
              {estado === 'ok' ? (
                <p><strong>¡Gracias!</strong> Tu reseña ya está publicada.</p>
              ) : (
                <p>
                  <strong>Recibimos tu reseña.</strong> La revisaremos antes de publicarla —
                  nuestro filtro detectó algo que conviene mirar con calma. Si todo está bien,
                  aparecerá en breve.
                </p>
              )}
              <button className="btn-primary" onClick={cerrar}>Cerrar</button>
            </div>
          ) : (
            <>
              <div className="rs-campo">
                <label>Tu calificación</label>
                <Estrellas valor={estrellas} onChange={setEstrellas} size={30}/>
              </div>
              <div className="rs-campo">
                <label htmlFor="rs-texto">¿Qué te pareció Cynamonurs?</label>
                <textarea id="rs-texto" rows="4" maxLength="600" value={texto}
                          onChange={e => setTexto(e.target.value)}
                          placeholder="Lo que más te sirvió, lo que te costó…"/>
                <span className="rs-contador">{texto.length}/600</span>
              </div>
              <div className="rs-campo">
                <label htmlFor="rs-sug">¿Qué mejorarías? <span className="rs-opt">(opcional)</span></label>
                <textarea id="rs-sug" rows="3" maxLength="400" value={sugerencia}
                          onChange={e => setSugerencia(e.target.value)}
                          placeholder="Una función que te gustaría, algo que falta…"/>
                <span className="rs-contador">{sugerencia.length}/400</span>
              </div>
              {error && <div className="rs-error">{error}</div>}
              <p className="rs-nota">
                Tu reseña se publica con tu nombre. No mostramos tu correo ni datos de pacientes.
              </p>
            </>
          )}
        </div>

        {user && estado !== 'ok' && estado !== 'retenida' && (
          <div className="cta-modal-foot">
            <button className="btn-secondary" onClick={cerrar}>Ahora no</button>
            <button className="btn-primary" onClick={enviar} disabled={estado === 'enviando'}
                    style={{ opacity: estado === 'enviando' ? 0.6 : 1 }}>
              {estado === 'enviando' ? 'Enviando…' : (yaTenia ? 'Guardar cambios' : 'Enviar reseña')}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Aviso pequeño y discreto (dentro de cada función) ──────
function ResenaNudge() {
  const [oculto, setOculto] = useReS(() => {
    try {
      return localStorage.getItem(RESENA_NUDGE_KEY) === '1'
          || localStorage.getItem(RESENA_VISTA_KEY) === '1';
    } catch (e) { return false; }
  });
  const [user, setUser] = useReS(() => window.__cynaUser || null);

  useReE(() => {
    const fn = (e) => setUser(e.detail || null);
    window.addEventListener('cyna-session', fn);
    return () => window.removeEventListener('cyna-session', fn);
  }, []);

  // Sin sesión no tiene sentido invitarle: no podría enviarla.
  if (oculto || !user) return null;

  const cerrar = () => {
    try { localStorage.setItem(RESENA_NUDGE_KEY, '1'); } catch (e) {}
    setOculto(true);
  };

  return (
    <div className="rs-nudge">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/>
      </svg>
      <span>¿Te está sirviendo Cynamonurs?</span>
      <button className="rs-nudge-cta" onClick={() => window.__cynaOpenResena && window.__cynaOpenResena()}>
        Deja tu reseña
      </button>
      <button className="rs-nudge-x" onClick={cerrar} aria-label="No mostrar más">×</button>
    </div>
  );
}

// ─── Lista pública + promedio + órdenes ─────────────────────
const ORDENES = [
  { id: 'recientes', label: 'Más recientes' },
  { id: 'mejores',   label: 'Mejor calificadas' },
  { id: 'peores',    label: 'Peor calificadas' },
];

function ResenasSection() {
  const [orden, setOrden] = useReS('recientes');
  const [rows, setRows] = useReS([]);
  const [resumen, setResumen] = useReS(null);
  const [cargando, setCargando] = useReS(true);

  const cargar = useReC(async (ord) => {
    const sb = sbClient();
    if (!sb) { setCargando(false); return; }
    setCargando(true);
    const [lista, res] = await Promise.all([
      sb.rpc('resenas_publicas', { p_orden: ord }),
      sb.rpc('resenas_resumen'),
    ]);
    setRows((lista && lista.data) || []);
    setResumen(res && res.data && res.data[0] ? res.data[0] : null);
    setCargando(false);
  }, []);

  useReE(() => { cargar(orden); }, [orden, cargar]);
  useReE(() => {
    const fn = () => cargar(orden);
    window.addEventListener('cyna-resenas', fn);
    return () => window.removeEventListener('cyna-resenas', fn);
  }, [orden, cargar]);

  const total = resumen ? Number(resumen.total || 0) : 0;
  const prom = resumen && resumen.promedio != null ? Number(resumen.promedio) : null;

  const fecha = (s) => {
    try { return new Date(s).toLocaleDateString('es-MX', { day: '2-digit', month: 'short', year: 'numeric' }); }
    catch (e) { return ''; }
  };

  return (
    <div className="rs-section" id="resenas">
      <div className="rs-section-head">
        <div>
          <h3>Lo que opinan quienes la usan</h3>
          {total > 0 ? (
            <div className="rs-resumen">
              <Estrellas valor={Math.round(prom)} readOnly size={17}/>
              <strong className="mono">{prom}</strong>
              <span>· {total} reseña{total === 1 ? '' : 's'}</span>
            </div>
          ) : (
            <p className="rs-vacio-sub">Todavía no hay reseñas. Puedes ser la primera persona en dejar una.</p>
          )}
        </div>
        <button className="btn-primary" onClick={() => window.__cynaOpenResena && window.__cynaOpenResena()}>
          Escribir reseña
        </button>
      </div>

      {total > 0 && (
        <div className="rs-orden" role="group" aria-label="Ordenar reseñas">
          {ORDENES.map(o => (
            <button key={o.id} className={'rs-orden-btn' + (orden === o.id ? ' on' : '')}
                    onClick={() => setOrden(o.id)}>{o.label}</button>
          ))}
        </div>
      )}

      {cargando ? (
        <p className="rs-vacio-sub">Cargando reseñas…</p>
      ) : rows.length === 0 ? (
        total > 0 ? <p className="rs-vacio-sub">No hay reseñas que mostrar en este orden.</p> : null
      ) : (
        <div className="rs-lista">
          {rows.map(r => (
            <article key={r.id} className="rs-card">
              <div className="rs-card-top">
                <Estrellas valor={r.estrellas} readOnly size={15}/>
                <span className="rs-fecha mono">{fecha(r.created_at)}</span>
              </div>
              <p className="rs-texto">{r.texto}</p>
              {r.sugerencia && (
                <p className="rs-sug"><strong>Sugerencia:</strong> {r.sugerencia}</p>
              )}
              <div className="rs-autor">— {r.nombre}</div>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Destacadas para la portada (solo las mejores) ──────────
// Muestra únicamente reseñas de 4 y 5 estrellas. Es la práctica habitual en una
// portada, y no oculta nada: la lista COMPLETA —incluidas las peores— sigue
// accesible en Contacto, con su filtro «Peor calificadas».
// Si no hay ninguna buena todavía, no se dibuja nada (mejor vacío que forzado).
const MIN_ESTRELLAS_PORTADA = 4;
const MAX_DESTACADAS = 3;

function ResenasDestacadas() {
  const [rows, setRows] = useReS([]);
  const [resumen, setResumen] = useReS(null);

  const cargar = useReC(async () => {
    const sb = sbClient();
    if (!sb) return;
    const [lista, res] = await Promise.all([
      sb.rpc('resenas_publicas', { p_orden: 'mejores' }),
      sb.rpc('resenas_resumen'),
    ]);
    const buenas = ((lista && lista.data) || []).filter(r => r.estrellas >= MIN_ESTRELLAS_PORTADA);
    setRows(buenas.slice(0, MAX_DESTACADAS));
    setResumen(res && res.data && res.data[0] ? res.data[0] : null);
  }, []);

  useReE(() => { cargar(); }, [cargar]);
  useReE(() => {
    window.addEventListener('cyna-resenas', cargar);
    return () => window.removeEventListener('cyna-resenas', cargar);
  }, [cargar]);

  if (!rows.length) return null;

  const total = resumen ? Number(resumen.total || 0) : 0;
  const prom = resumen && resumen.promedio != null ? Number(resumen.promedio) : null;

  return (
    <section className="section rs-destacadas" data-screen-label="Landing — Reseñas destacadas">
      <div className="container">
        <div className="section-head">
          <span className="section-eyebrow">Quienes ya la usan</span>
          <h2 className="section-title">Lo que dicen las <em>enfermeras</em>.</h2>
          {total > 0 && prom != null && (
            <div className="rs-resumen rs-resumen-centro">
              <Estrellas valor={Math.round(prom)} readOnly size={18}/>
              <strong className="mono">{prom}</strong>
              <span>· {total} reseña{total === 1 ? '' : 's'}</span>
            </div>
          )}
        </div>

        <div className="rs-lista rs-lista-destacadas">
          {rows.map(r => (
            <article key={r.id} className="rs-card">
              <Estrellas valor={r.estrellas} readOnly size={15}/>
              <p className="rs-texto">{r.texto}</p>
              <div className="rs-autor">— {r.nombre}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Anfitrión del pop-up: se monta una vez en App ──────────
function ResenaHost() {
  const [abierto, setAbierto] = useReS(false);
  useReE(() => {
    window.__cynaOpenResena = () => setAbierto(true);
    return () => { delete window.__cynaOpenResena; };
  }, []);
  if (!abierto) return null;
  return <ResenaModal onClose={() => setAbierto(false)}/>;
}

// Abre el pop-up UNA SOLA VEZ (tras descargar un PDF, p. ej.).
// Si ya reseñó o ya lo cerró antes, no vuelve a molestar.
function pedirResenaUnaVez() {
  try {
    if (localStorage.getItem(RESENA_VISTA_KEY) === '1') return;
    if (!window.__cynaUser) return;         // sin sesión no podría enviarla
  } catch (e) { return; }
  setTimeout(() => { if (window.__cynaOpenResena) window.__cynaOpenResena(); }, 1200);
}

Object.assign(window, {
  ResenaModal, ResenaNudge, ResenasSection, ResenasDestacadas, ResenaHost, pedirResenaUnaVez,
});