// Pau Fit — Testimonios + Share-photo card + Cover composer
// (Antes "reviews". Mantengo nombres de export como alias para compat.)

const { useState: useStateX, useEffect: useEffectX, useRef: useRefX } = React;

// ─────────────────────────────────────────────────────────────
// Testimonios — sección
// Sin estrellas. Stats sociales (% recomienda + total). Foto opcional.
// ─────────────────────────────────────────────────────────────
function TestimoniesSection({ id, T, accent, onWrite, myTestimony }) {
  const items = testimoniesFor(id);
  const pct = recommendsPercent(id);
  const total = items.length;

  return (
    <div>
      <div style={{ padding: '24px 22px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 18, fontWeight: 600, color: T.text, letterSpacing: -0.3 }}>Testimonios</div>
        <button onClick={onWrite} style={{
          border: 'none', background: 'transparent', cursor: 'pointer',
          fontFamily: 'Poppins', fontSize: 12, fontWeight: 600, color: accent,
        }}>+ Tu testimonio</button>
      </div>

      {/* Aggregate */}
      {total > 0 && (
        <div style={{ margin: '12px 18px 0', padding: '16px 18px', background: T.card, borderRadius: 18, border: T.border, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 999, background: `${accent}15`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <span style={{ fontFamily: 'Poppins', fontSize: 16, fontWeight: 700, color: accent, letterSpacing: -0.4 }}>{pct}%</span>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, color: T.text, letterSpacing: -0.2 }}>lo recomienda 💗</div>
            <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 2 }}>basado en {total} testimonio{total === 1 ? '' : 's'} de la comunidad</div>
          </div>
        </div>
      )}

      {/* Mi testimonio */}
      {myTestimony && (
        <div style={{
          margin: '10px 18px 0', padding: '14px 16px',
          background: `${accent}10`, borderRadius: 16,
          border: `0.5px solid ${accent}40`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <span style={{
              fontFamily: 'Poppins', fontSize: 11, fontWeight: 700,
              color: accent, letterSpacing: 0.6, textTransform: 'uppercase',
            }}>Tu testimonio</span>
            <span style={{ fontSize: 14 }}>💗</span>
          </div>
          <div style={{ marginTop: 6, fontFamily: 'Poppins', fontSize: 13, color: T.text, lineHeight: 1.4 }}>{myTestimony.text}</div>
          {myTestimony.recommends && (
            <div style={{ marginTop: 4, fontFamily: 'Poppins', fontSize: 11, color: accent, fontWeight: 600 }}>💗 Lo recomendaste · Gracias por compartir</div>
          )}
        </div>
      )}

      {/* Lista */}
      <div style={{ padding: '10px 18px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.slice(0, 4).map(t => (
          <TestimonyCard key={t.id} t={t} T={T} accent={accent}/>
        ))}
        {items.length > 4 && (
          <button style={{
            background: T.card, padding: '12px', borderRadius: 14, cursor: 'pointer',
            fontFamily: 'Poppins', fontSize: 13, fontWeight: 500, color: accent, border: T.border,
          }}>Ver los {items.length} testimonios</button>
        )}
        {items.length === 0 && (
          <div style={{ textAlign: 'center', padding: 16, fontFamily: 'Poppins', fontSize: 13, color: T.muted }}>Sé la primera en compartir 💗</div>
        )}
      </div>
    </div>
  );
}

function TestimonyCard({ t, T, accent }) {
  return (
    <div style={{
      padding: '14px 16px', background: T.card, borderRadius: 16, border: T.border,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 999,
          background: `linear-gradient(135deg, ${accent}, ${accent}99)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Poppins', fontSize: 13, fontWeight: 700, color: '#fff',
        }}>{t.initials}</div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontFamily: 'Poppins', fontSize: 13, fontWeight: 600, color: T.text }}>{t.user}</span>
            {t.recommends && (
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 3,
                fontFamily: 'Poppins', fontSize: 9, fontWeight: 700,
                color: accent, padding: '2px 6px', borderRadius: 5,
                background: `${accent}18`, letterSpacing: 0.3,
              }}>💗 LO RECOMIENDA</span>
            )}
          </div>
          <span style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted }}>{t.date} · verificada</span>
        </div>
      </div>
      <div style={{ marginTop: 10, fontFamily: 'Poppins', fontSize: 13, color: T.text, lineHeight: 1.5 }}>{t.text}</div>
      {t.photo && (
        <div style={{
          marginTop: 10, height: 120, borderRadius: 12,
          background: `linear-gradient(135deg, ${accent}33, ${accent}11)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <span style={{ fontSize: 48, opacity: 0.7 }}>📸</span>
          <span style={{
            position: 'absolute', bottom: 8, left: 10,
            fontFamily: 'Poppins', fontSize: 9, color: T.muted, fontWeight: 500, letterSpacing: 0.5, textTransform: 'uppercase',
          }}>Foto del testimonio</span>
        </div>
      )}
    </div>
  );
}

// Backward-compat alias
const ReviewsSection = ({ id, T, accent, onWrite, myReview }) =>
  <TestimoniesSection id={id} T={T} accent={accent} onWrite={onWrite} myTestimony={myReview}/>;

// ─────────────────────────────────────────────────────────────
// Write Testimony Modal — recomienda toggle + foto opcional
// ─────────────────────────────────────────────────────────────
function WriteTestimonyModal({ open, onClose, onSubmit, target, T, accent }) {
  const [recommends, setRecommends] = useStateX(true);
  const [text, setText] = useStateX('');
  const [hasPhoto, setHasPhoto] = useStateX(false);
  if (!open) return null;

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 300, display: 'flex', alignItems: 'flex-end',
      background: 'rgba(0,0,0,0.4)', animation: 'fade-in 200ms ease',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', background: T.bg, borderTopLeftRadius: 28, borderTopRightRadius: 28,
        padding: '16px 22px 36px', animation: 'slide-up 300ms cubic-bezier(.2,.8,.2,1)',
        maxHeight: '88%', overflowY: 'auto',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 999, background: 'rgba(0,0,0,0.15)', margin: '4px auto 18px' }}/>
        <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500, letterSpacing: 0.5, textTransform: 'uppercase' }}>Tu testimonio</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 20, fontWeight: 600, color: T.text, marginTop: 4, letterSpacing: -0.4, lineHeight: 1.2 }}>{target}</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 12, color: T.muted, marginTop: 6, lineHeight: 1.4 }}>Cuéntanos cómo te fue. Tu historia ayuda a otras chicas a animarse 💗</div>

        {/* Recomienda toggle */}
        <div style={{
          marginTop: 18, padding: '14px 16px',
          background: T.card, borderRadius: 14, border: T.border,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span style={{ fontSize: 22 }}>{recommends ? '💗' : '🤔'}</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Poppins', fontSize: 13, fontWeight: 600, color: T.text }}>¿Lo recomiendas?</div>
            <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 1 }}>{recommends ? 'Sí, lo recomiendo' : 'Prefiero no recomendarlo'}</div>
          </div>
          <button onClick={() => setRecommends(!recommends)} style={{
            width: 44, height: 26, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: recommends ? accent : 'rgba(0,0,0,0.12)', position: 'relative',
            transition: 'background 200ms ease',
          }}>
            <div style={{
              position: 'absolute', top: 3, left: recommends ? 21 : 3,
              width: 20, height: 20, borderRadius: 999, background: '#fff',
              transition: 'left 200ms ease', boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
            }}/>
          </button>
        </div>

        <textarea
          value={text} onChange={(e) => setText(e.target.value)}
          placeholder="Cuenta tu experiencia…"
          style={{
            marginTop: 12, width: '100%', minHeight: 90, padding: '14px',
            border: T.border, borderRadius: 14, background: T.card,
            fontFamily: 'Poppins', fontSize: 14, color: T.text, resize: 'none', outline: 'none',
          }}/>

        <button onClick={() => setHasPhoto(!hasPhoto)} style={{
          marginTop: 8, width: '100%', padding: '14px',
          border: hasPhoto ? `1.5px solid ${accent}` : `1.5px dashed ${T.muted}55`,
          borderRadius: 14, cursor: 'pointer', background: hasPhoto ? `${accent}08` : 'transparent',
          fontFamily: 'Poppins', fontSize: 13, fontWeight: 500, color: hasPhoto ? accent : T.muted,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          {hasPhoto ? '✓ Foto añadida' : '📷 Añadir foto (opcional)'}
        </button>

        <button onClick={() => onSubmit({
          recommends, text: text || 'Sin comentario', photo: hasPhoto,
        })} style={{
          marginTop: 14, width: '100%', padding: '16px',
          border: 'none', borderRadius: 14, cursor: 'pointer',
          background: accent, color: '#fff',
          fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, letterSpacing: -0.1,
        }}>Publicar testimonio</button>
        <button onClick={onClose} style={{
          marginTop: 8, width: '100%', padding: '12px',
          border: 'none', background: 'transparent', cursor: 'pointer',
          fontFamily: 'Poppins', fontSize: 13, fontWeight: 500, color: T.muted,
        }}>Cancelar</button>
      </div>
    </div>
  );
}
// Backward-compat alias
const WriteReviewModal = WriteTestimonyModal;

// ─────────────────────────────────────────────────────────────
// Share Photo Card — post-workout (sin cambios sustanciales)
// ─────────────────────────────────────────────────────────────
function SharePhotoCard({ open, onClose, reto, day, totalMinutes, T, accent }) {
  const [filter, setFilter] = useStateX('rose');
  if (!open) return null;

  const filters = {
    rose:   { name: 'Rosé',   over: 'linear-gradient(135deg, rgba(217,71,126,0.35), rgba(245,215,220,0.15))' },
    peach:  { name: 'Peach',  over: 'linear-gradient(160deg, rgba(232,180,160,0.4), rgba(212,132,122,0.18))' },
    gold:   { name: 'Gold',   over: 'linear-gradient(180deg, rgba(201,149,107,0.25), rgba(45,42,38,0.4))' },
    bw:     { name: 'Mono',   over: 'linear-gradient(180deg, rgba(45,42,38,0.18), rgba(45,42,38,0.45))' },
  };
  const f = filters[filter];

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 320, background: '#2D2A26',
      display: 'flex', flexDirection: 'column',
      animation: 'fade-in 240ms ease',
    }}>
      {/* Top bar */}
      <div style={{ padding: '50px 18px 12px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button onClick={onClose} style={{
          width: 36, height: 36, borderRadius: 999, border: 'none',
          background: 'rgba(255,255,255,0.12)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{Icon.close('#fff')}</button>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Poppins', fontSize: 10, color: 'rgba(255,255,255,0.5)', fontWeight: 500, letterSpacing: 0.8, textTransform: 'uppercase' }}>Foto del día</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, color: '#fff' }}>Comparte tu logro 💗</div>
        </div>
      </div>

      {/* The branded card */}
      <div style={{ flex: 1, padding: '0 26px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: '100%', maxWidth: 320, aspectRatio: '9 / 16',
          borderRadius: 24, overflow: 'hidden', position: 'relative',
          background: `linear-gradient(160deg, ${reto.bg}, ${reto.color})`,
          boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: `
              radial-gradient(circle at 50% 45%, rgba(255,255,255,0.5) 0%, transparent 50%),
              repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 4px, transparent 4px, transparent 8px)
            `,
          }}/>
          <div style={{
            position: 'absolute', top: '38%', left: '50%', transform: 'translate(-50%,-50%)',
            fontSize: 72, opacity: 0.85,
          }}>📸</div>
          <div style={{
            position: 'absolute', top: '55%', left: '50%', transform: 'translateX(-50%)',
            fontFamily: 'Poppins', fontSize: 10, color: 'rgba(45,42,38,0.55)', fontWeight: 500, letterSpacing: 1, textTransform: 'uppercase', textAlign: 'center', width: '70%',
          }}>Aquí va tu mirror selfie</div>
          <div style={{ position: 'absolute', inset: 0, background: f.over }}/>
          <div style={{
            position: 'absolute', top: 18, left: 18, right: 18,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: 'Poppins', fontSize: 14, fontWeight: 700, color: '#fff',
              letterSpacing: -0.3, textShadow: '0 1px 4px rgba(0,0,0,0.25)',
            }}>
              <span style={{
                width: 22, height: 22, borderRadius: 6, background: '#fff', color: reto.color,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Poppins', fontSize: 12, fontWeight: 800, fontStyle: 'italic',
              }}>p</span>
              Pau Fit
            </div>
            <div style={{
              fontFamily: 'Poppins', fontSize: 9, color: 'rgba(255,255,255,0.85)', fontWeight: 600,
              letterSpacing: 0.6, textTransform: 'uppercase',
              padding: '4px 8px', borderRadius: 999, background: 'rgba(0,0,0,0.2)',
              backdropFilter: 'blur(8px)',
            }}>Día {day} · {reto.title}</div>
          </div>
          <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 12 }}>
              <BigStat v={`${totalMinutes}'`} l="entreno" />
              <BigStat v={day} l={`/ ${reto.days}`} />
              <BigStat v="✓" l="completado" />
            </div>
            <div style={{
              fontFamily: 'Poppins', fontSize: 14, fontWeight: 700, fontStyle: 'italic',
              color: '#fff', letterSpacing: 0.2, textShadow: '0 1px 6px rgba(0,0,0,0.3)',
            }}>#YoSiemprePuedo</div>
            <div style={{
              fontFamily: 'Poppins', fontSize: 10, fontWeight: 500,
              color: 'rgba(255,255,255,0.7)', letterSpacing: 0.4, marginTop: 2,
            }}>paufit.co · @paufityt</div>
          </div>
        </div>
      </div>

      <div style={{ padding: '20px 22px 12px', display: 'flex', gap: 8, justifyContent: 'center' }}>
        {Object.entries(filters).map(([k, v]) => (
          <button key={k} onClick={() => setFilter(k)} style={{
            border: filter === k ? '1.5px solid #fff' : '1.5px solid rgba(255,255,255,0.18)',
            background: filter === k ? 'rgba(255,255,255,0.1)' : 'transparent',
            padding: '6px 14px', borderRadius: 999, cursor: 'pointer',
            fontFamily: 'Poppins', fontSize: 11, fontWeight: 500, color: '#fff',
          }}>{v.name}</button>
        ))}
      </div>

      <div style={{ padding: '8px 22px 50px', display: 'flex', gap: 10 }}>
        <button onClick={() => window.__pauNav && window.__pauNav.toast('Selector de fotos · próximamente', { icon: '📷' })} style={{
          flex: 1, padding: '14px',
          border: '1px solid rgba(255,255,255,0.18)',
          background: 'rgba(255,255,255,0.08)', color: '#fff',
          borderRadius: 14, cursor: 'pointer',
          fontFamily: 'Poppins', fontSize: 13, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>📷 Cambiar foto</button>
        <button onClick={() => { window.__pauNav && window.__pauNav.toast('Compartido en Instagram 💗', { icon: '↗' }); onClose && onClose(); }} style={{
          flex: 1.6, padding: '14px',
          border: 'none', borderRadius: 14, cursor: 'pointer',
          background: accent, color: '#fff',
          fontFamily: 'Poppins', fontSize: 13, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>↗ Compartir</button>
      </div>
    </div>
  );
}

function BigStat({ v, l }) {
  return (
    <div style={{ flex: 1 }}>
      <div style={{
        fontFamily: 'Poppins', fontSize: 22, fontWeight: 700, color: '#fff', letterSpacing: -0.5,
        textShadow: '0 1px 6px rgba(0,0,0,0.3)', lineHeight: 1,
      }}>{v}</div>
      <div style={{
        fontFamily: 'Poppins', fontSize: 9, color: 'rgba(255,255,255,0.85)', marginTop: 2,
        fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase',
      }}>{l}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Covers
// ─────────────────────────────────────────────────────────────
function RetoCover({ reto, style = {}, large = false }) {
  return (
    <div style={{
      borderRadius: large ? 22 : 16,
      background: `linear-gradient(135deg, ${reto.bg}, ${reto.color})`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.18,
        background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.4) 2px, transparent 2px, transparent 12px)',
      }}/>
      <div style={{ fontSize: large ? 64 : 36, filter: 'drop-shadow(0 4px 12px rgba(45,42,38,0.18))', position: 'relative' }}>
        {reto.emoji}
      </div>
      <div style={{
        position: 'absolute', bottom: 8, right: 8,
        width: 24, height: 24, borderRadius: 999,
        background: 'rgba(45,42,38,0.78)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', paddingLeft: 2,
      }}>{Icon.play('#fff')}</div>
    </div>
  );
}

function RecipeImage({ receta, style = {}, T }) {
  if (receta.image) {
    return (
      <div style={{
        borderRadius: 16, overflow: 'hidden',
        backgroundImage: `url(${receta.image})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        ...style,
      }}/>
    );
  }
  return (
    <div style={{
      borderRadius: 16,
      background: T && T.dark ? 'linear-gradient(135deg, #3B2F26, #2A2520)' : `linear-gradient(135deg, #FBE4DA, #F5D7DC)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <div style={{ fontSize: 48 }}>{receta.emoji}</div>
    </div>
  );
}

Object.assign(window, {
  TestimoniesSection, WriteTestimonyModal,
  ReviewsSection, WriteReviewModal,  // backward-compat
  SharePhotoCard, RetoCover, RecipeImage,
});