/* 03 Test de afinidad IA */

const AFFINITY_QUESTIONS = [
  {
    // 2026-09-26: multi (antes radio) — se pueden marcar varias opciones de una en una
    id: 'q1', type: 'multi', max: 2,
    q: '¿Qué te describe mejor una noche perfecta?',
    opts: ['Cena íntima en un rooftop', 'Sesión de vinilos en casa', 'Concierto y planes de noche', 'Ruta rural y estrellas'],
  },
  {
    id: 'q2', type: 'slider',
    q: '¿Cuánto planificas tu vida?',
    left: 'Improvisación total', right: 'Todo en agenda',
  },
  {
    id: 'q3', type: 'multi',
    q: 'Elige 3 cosas que te enganchan a alguien',
    opts: ['Sentido del humor','Ambición','Estilo','Silencios cómodos','Curiosidad','Empatía','Independencia','Sensualidad','Cocinar','Bailar'],
    max: 3,
  },
  {
    id: 'q4', type: 'radio',
    q: 'Discusión importante: cómo actúas',
    opts: ['La afronto en caliente','Pido tiempo y vuelvo','Escribo lo que pienso primero','Necesito espacio de días'],
  },
  {
    id: 'q5', type: 'slider',
    q: '¿Cuánto peso tiene la familia en tu vida?',
    left: 'Vivo mi camino', right: 'Es mi base',
  },
  {
    id: 'q6', type: 'text',
    q: 'Termina la frase: "Nunca podría estar con alguien que..."',
    ph: 'Sé honesto. Nadie más lo verá.',
  },
  {
    // 2026-09-26: opciones SEPARADAS y marcables una a una (decisión Stokmarket).
    // Antes venía "Deporte y aire libre" junto: hay gente a la que le gusta la tranquilidad
    // del campo pero NO hacer deporte al aire libre — ahora son dos opciones independientes.
    id: 'q7', type: 'multi', max: 3,
    q: '¿Qué te gusta hacer en tus fines de semana?',
    opts: ['Hacer deporte', 'Aire libre y naturaleza', 'Cultura y museos', 'Bares y planes con amigos', 'Casa, cine y descanso'],
  },
  {
    id: 'q8', type: 'slider',
    q: 'Fidelidad emocional vs. libertad',
    left: 'Todo compartido', right: 'Vidas paralelas',
  },
];

function Affinity({ go }) {
  const [i, setI] = useState(0);
  const [answers, setAnswers] = useState({});
  const [done, setDone] = useState(false);
  const [analyzing, setAnalyzing] = useState(false);

  const q = AFFINITY_QUESTIONS[i];
  const total = AFFINITY_QUESTIONS.length;

  const setAns = (v) => setAnswers(a => ({ ...a, [q.id]: v }));
  const val = answers[q.id];

  const canNext = () => {
    if (q.type === 'slider') return typeof val === 'number';
    if (q.type === 'multi') return Array.isArray(val) && val.length > 0;
    if (q.type === 'text') return (val || '').trim().length > 3;
    return !!val;
  };

  const next = () => {
    if (i < total - 1) setI(i + 1);
    else {
      setAnalyzing(true);
      setTimeout(() => {
        setAnalyzing(false); setDone(true);
        // Fase 1b: persistir respuestas en la API (best-effort, no bloquea la navegación)
        const s = window.CruceAPI && window.CruceAPI.Session.get();
        if (s) window.CruceAPI.saveAffinity(answers).catch(() => {});
      }, 3200);
    }
  };

  if (done) {
    return <AffinityResult go={go}/>;
  }

  if (analyzing) {
    return <AffinityAnalyzing/>;
  }

  return (
    <div className="aff-page">
      <div className="aff-top">
        <button className="btn btn-ghost btn-sm" onClick={()=>go('landing')}>
          <I.ArrowLeft size={14}/> Salir
        </button>
        <div className="aff-progress">
          <div className="aff-progress-bar">
            <div className="aff-progress-fill" style={{width: `${((i+1)/total)*100}%`}}/>
          </div>
          <div className="mono aff-progress-txt">{String(i+1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
        </div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>
          <I.Sparkles size={12}/> IA · CRUCE-Q
        </div>
      </div>

      <div className="aff-body">
        <div className="aff-panel">
          <div className="eyebrow"><span className="dot"></span>Pregunta {i+1} de {total}</div>
          <h2 className="serif aff-q">{q.q}</h2>

          {q.type === 'radio' && (
            <div className="aff-opts">
              {q.opts.map(o => (
                <button key={o}
                  className={"aff-opt " + (val === o ? 'active' : '')}
                  onClick={()=>setAns(o)}>
                  <span>{o}</span>
                  <div className="aff-opt-check">{val === o && <I.Check size={12}/>}</div>
                </button>
              ))}
            </div>
          )}

          {q.type === 'slider' && (
            <div className="aff-slider">
              <div className="aff-slider-labels">
                <span>{q.left}</span>
                <span>{q.right}</span>
              </div>
              <input type="range" min="0" max="100" value={val ?? 50} onChange={e=>setAns(Number(e.target.value))}/>
              <div className="aff-slider-val serif">{val ?? 50}<span style={{fontSize:16, color:'var(--ink-3)'}}>/100</span></div>
            </div>
          )}

          {q.type === 'multi' && (
            <div className="aff-multi">
              <div className="aff-multi-hint">Elige hasta {q.max}.</div>
              <div className="aff-multi-grid">
                {q.opts.map(o => {
                  const arr = val || [];
                  const has = arr.includes(o);
                  return (
                    <button key={o}
                      className={"aff-multi-chip " + (has ? 'active' : '')}
                      onClick={()=>{
                        if (has) setAns(arr.filter(x => x !== o));
                        else if (arr.length < q.max) setAns([...arr, o]);
                      }}>
                      {o}
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {q.type === 'text' && (
            <div className="aff-text">
              <textarea placeholder={q.ph} value={val || ''} onChange={e=>setAns(e.target.value)} rows="4"/>
              <div className="aff-text-hint"><I.Lock size={12}/> Este texto solo lo lee la IA. Nunca se muestra a otros usuarios.</div>
            </div>
          )}

          <div className="aff-actions">
            <button className="btn btn-ghost" onClick={()=>i>0 && setI(i-1)} disabled={i===0}>
              <I.ArrowLeft size={14}/> Anterior
            </button>
            <button className="btn btn-red btn-lg" disabled={!canNext()} style={{opacity: canNext() ? 1 : .4}} onClick={next}>
              {i === total - 1 ? 'Analizar con IA' : 'Siguiente'} <I.Arrow size={14}/>
            </button>
          </div>
        </div>

        <aside className="aff-side">
          <div className="aff-side-card">
            <I.Sparkles size={16}/>
            <div>
              <div className="serif" style={{fontSize:20, marginBottom:6}}>Sobre este test</div>
              <p style={{fontSize:13, color:'var(--ink-3)', lineHeight:1.55}}>
                CRUCE-Q es nuestro modelo de afinidad. Analiza tus respuestas junto a las de otros usuarios
                para calcular compatibilidad. No decide por ti — solo <strong>sugiere</strong>.
              </p>
            </div>
          </div>
          <div className="aff-side-card">
            <I.Shield size={16}/>
            <div>
              <div className="serif" style={{fontSize:20, marginBottom:6}}>Tus datos, tus normas</div>
              <p style={{fontSize:13, color:'var(--ink-3)', lineHeight:1.55}}>
                Puedes ver el detalle de por qué te sugerimos a alguien, pedir revisión humana o eliminar
                tus respuestas cuando quieras.
              </p>
            </div>
          </div>
          <div className="aff-side-note">
            <div className="mono" style={{fontSize:11, letterSpacing:'.08em', color:'var(--ink-4)'}}>
              CUMPLE REGLAMENTO UE 2024/1689 · RGPD
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function AffinityAnalyzing() {
  return (
    <div className="aff-analyzing">
      <div className="aff-anal-inner">
        <div className="aff-anal-logo">
          <div className="aff-anal-circle"/>
          <I.Sparkles size={26}/>
        </div>
        <h2 className="serif" style={{fontSize:44, marginTop:30, lineHeight:1.05, textAlign:'center'}}>
          Analizando afinidad...
        </h2>
        <div className="aff-anal-steps">
          {[
            {t: 'Procesando 8 dimensiones de personalidad', d: 0},
            {t: 'Comparando con 14.208 perfiles verificados', d: 900},
            {t: 'Calculando compatibilidad emocional', d: 1600},
            {t: 'Seleccionando tus 12 mejores matches', d: 2400},
          ].map((s, k) => (
            <AffAnalStep key={k} text={s.t} delay={s.d}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function AffAnalStep({ text, delay }) {
  const [state, setState] = useState('wait'); // wait | run | done
  useEffect(() => {
    const t1 = setTimeout(()=>setState('run'), delay);
    const t2 = setTimeout(()=>setState('done'), delay + 800);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [delay]);

  return (
    <div className={"aff-anal-step " + state}>
      <div className="aff-anal-step-ico">
        {state === 'wait' && <div className="dot-wait"/>}
        {state === 'run' && <div className="dot-run"/>}
        {state === 'done' && <I.Check size={12}/>}
      </div>
      <span>{text}</span>
    </div>
  );
}

function AffinityResult({ go }) {
  return (
    <div className="aff-result">
      <div className="aff-result-inner">
        <div className="eyebrow"><span className="dot"></span>Análisis completado</div>
        <h1 className="serif" style={{fontSize:'clamp(48px, 6vw, 88px)', lineHeight:1, marginTop:20, marginBottom:24, letterSpacing:'-0.02em'}}>
          Tienes <em style={{color:'var(--red)'}}>12 matches</em><br/>con &gt;80% de afinidad.
        </h1>
        <p style={{fontSize:18, color:'var(--ink-3)', maxWidth:520, marginBottom:36, lineHeight:1.55}}>
          Los hemos ordenado por compatibilidad emocional, valores y estilo de vida.
          Puedes ver quiénes son ahora — para hablarles, necesitas membresía.
        </p>

        <div className="aff-result-preview">
          {['lucia','mateo','carmen','javier','nerea','diego'].map((k, i) => (
            <div key={k} className="aff-result-face">
              <Portrait id={k} size="sm" showTag={false}/>
              <div className="aff-result-score serif">{93 - i*3}%</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:36, display:'flex', gap:12, flexWrap:'wrap'}}>
          <button className="btn btn-red btn-lg" onClick={()=>go('wall')}>
            Ver mi muro <I.Arrow size={14}/>
          </button>
          <button className="btn btn-outline btn-lg" onClick={()=>go('checkout')}>
            <I.Lock size={14}/> Desbloquear chat (29€/mes)
          </button>
        </div>
      </div>
    </div>
  );
}

window.Affinity = Affinity;