/* 02 Signup — 3 pasos + verificación (Fase 1b: conectado a la API real) */

function Signup({ go }) {
  const [step, setStep] = useState(1);
  const [mode, setMode] = useState('signup'); // signup | login
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [data, setData] = useState({
    name: '', email: '', pass: '', dob: '', city: 'Madrid', gender: '', looking: '', intent: '', partnerCode: '',
    consentIA: false, consentTC: false, consent18: false,
  });
  const [loginData, setLoginData] = useState({ email: '', pass: '' });

  const [partnerCodeLocked, setPartnerCodeLocked] = useState(false);

  // Código de partner vía URL (#signup?ref=PART-XXX) — precargado Y BLOQUEADO (ver SISTEMA_PARTNERS.md).
  // OJO: el router es por hash, la query va DENTRO del hash, no en location.search.
  useState(() => {
    try {
      const ref = new URLSearchParams((location.hash.split('?')[1] || '')).get('ref');
      if (ref) {
        setData(d => ({ ...d, partnerCode: String(ref).trim().toUpperCase() }));
        setPartnerCodeLocked(true);
      }
    } catch (e) {}
  });

  const set = (k, v) => { setData(d => ({ ...d, [k]: v })); setError(''); };

  const ageFromDob = (dob) => {
    if (!dob) return null;
    const d = new Date(dob), n = new Date();
    let a = n.getFullYear() - d.getFullYear();
    if (n.getMonth() < d.getMonth() || (n.getMonth() === d.getMonth() && n.getDate() < d.getDate())) a--;
    return a;
  };

  const genderCode = { 'Mujer': 'F', 'Hombre': 'M', 'No binario': 'NB' };
  // "Busco conocer" -> código que guarda la API (F|M|NB|ALL). Opcional: se puede quitar volviendo a pulsar.
  const lookingCode = { 'Mujeres': 'F', 'Hombres': 'M', 'Personas no binarias': 'NB', 'Todas las anteriores': 'ALL' };
  // Tipo de vínculo que busca: OPCIONAL. Si ambos lo rellenan y coincide, se ordena antes en el muro.
  const INTENT_OPTS = ['Pareja estable', 'Algo serio (familia a la vista)', 'Conocer sin prisa', 'Lo que surja'];

  // Solo capitales de provincia (decisión Stokmarket 2026-09-26)
  const PROVINCE_CAPITALS = ['A Coruña','Albacete','Alicante','Almería','Ávila','Badajoz','Barcelona','Bilbao','Burgos','Cáceres','Cádiz','Castellón de la Plana','Ceuta','Ciudad Real','Córdoba','Cuenca','Girona','Granada','Guadalajara','Huelva','Huesca','Jaén','Las Palmas de Gran Canaria','León','Lleida','Logroño','Lugo','Madrid','Málaga','Melilla','Murcia','Ourense','Oviedo','Palencia','Palma de Mallorca','Pamplona','Pontevedra','Salamanca','San Sebastián','Santander','Santa Cruz de Tenerife','Segovia','Sevilla','Soria','Tarragona','Teruel','Toledo','Valencia','Valladolid','Vitoria-Gasteiz','Zamora','Zaragoza'];

  const canStep1 = data.name.trim().length >= 2 && /.+@.+\..+/.test(data.email) && data.pass.length >= 8 && data.dob;

  async function submitRegister() {
    setBusy(true); setError('');
    try {
      const r = await window.CruceAPI.register({
        email: data.email.trim(),
        password: data.pass,
        name: data.name.trim(),
        age: ageFromDob(data.dob),
        city: data.city,
        gender: genderCode[data.gender] || null,
        looking: lookingCode[data.looking] || null, // opcional -> filtra el muro (no se ven si no encaja)
        intent: data.intent || null,                // opcional -> si coincide con otro perfil, ordena antes
        partner_code: data.partnerCode.trim() || undefined, // reservado (Fase partners)
        consents: { terms: true, privacy: true, age18: true, ai_matching: true },
      });
      window.CruceAPI.Session.set(r.token, r.user);
      if (data.partnerCode.trim()) localStorage.setItem('cruce.partner_code', data.partnerCode.trim());
      go('affinity');
    } catch (e) {
      setError(e.message || 'Error al crear la cuenta.');
    } finally { setBusy(false); }
  }

  async function submitLogin() {
    setBusy(true); setError('');
    try {
      const r = await window.CruceAPI.login(loginData.email.trim(), loginData.pass);
      window.CruceAPI.Session.set(r.token, r.user);
      go('wall');
    } catch (e) {
      setError(e.message || 'Error al entrar.');
    } finally { setBusy(false); }
  }

  if (mode === 'login') {
    return (
      <div className="signup-page">
        <div className="signup-nav">
          <button className="btn btn-ghost btn-sm" onClick={()=>{ setMode('signup'); setError(''); }}>
            <I.ArrowLeft size={14}/> Volver
          </button>
          <div className="sello">Cruce</div>
          <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>ACCESO</div>
        </div>
        <div className="signup-wrap">
          <aside className="signup-side">
            <div className="eyebrow"><span className="dot"></span>Bienvenido de nuevo</div>
            <h1 className="serif signup-title">Entra y sigue<br/><em>cruzándote.</em></h1>
            <p className="signup-desc">Tu sesión dura 7 días en este dispositivo. Datos cifrados, solo tuyos.</p>
            <div className="signup-trust">
              <div className="signup-trust-item"><I.Shield size={14}/> Cumple RGPD</div>
              <div className="signup-trust-item"><I.Lock size={14}/> Conexión cifrada</div>
            </div>
          </aside>
          <section className="signup-form">
            <div className="signup-panel">
              <Field label="Correo electrónico">
                <input type="email" placeholder="tú@correo.com" value={loginData.email}
                  onChange={e=>{ setLoginData(d=>({...d, email:e.target.value})); setError(''); }}/>
              </Field>
              <Field label="Contraseña">
                <input type="password" placeholder="••••••••••" value={loginData.pass}
                  onChange={e=>{ setLoginData(d=>({...d, pass:e.target.value})); setError(''); }}
                  onKeyDown={e=>{ if(e.key==='Enter' && loginData.email && loginData.pass) submitLogin(); }}/>
              </Field>
              {error && <div style={{fontSize:13, color:'var(--red)', marginTop:4}}>{error}</div>}
              <div className="signup-actions">
                <div/>
                <button className="btn btn-red btn-lg" disabled={busy || !loginData.email || !loginData.pass}
                  style={{opacity:(!loginData.email || !loginData.pass) ? .4 : 1}}
                  onClick={submitLogin}>
                  {busy ? 'Entrando…' : <>Entrar <I.Arrow size={14}/></>}
                </button>
              </div>
            </div>
          </section>
        </div>
      </div>
    );
  }

  return (
    <div className="signup-page">
      <div className="signup-nav">
        <button className="btn btn-ghost btn-sm" onClick={()=>go('landing')}>
          <I.ArrowLeft size={14}/> Volver
        </button>
        <div className="sello">Cruce</div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>PASO {step} / 3</div>
      </div>

      <div className="signup-wrap">
        <aside className="signup-side">
          <div className="eyebrow"><span className="dot"></span>Bienvenida a Cruce</div>
          <h1 className="serif signup-title">
            {step === 1 && <>Empieza por lo esencial.<br/><em>Sin postureo.</em></>}
            {step === 2 && <>Verifica que eres <em>tú.</em><br/>Cara descubierta.</>}
            {step === 3 && <>Consentimientos <em>claros.</em><br/>Nada escondido.</>}
          </h1>
          <p className="signup-desc">
            {step === 1 && 'Tres datos y ya estás dentro. Todo cifrado, todo tuyo.'}
            {step === 2 && 'Un selfie corto con prueba de vida. No sube a redes. Solo comprueba que eres humano y mayor de edad.'}
            {step === 3 && 'Antes de dejar entrar a la IA en tus respuestas, queremos tu OK explícito. Puedes revocar cuando quieras.'}
          </p>

          <div className="signup-steps">
            {[1,2,3].map(n => (
              <div key={n} className={"signup-step " + (step === n ? 'active' : step > n ? 'done' : '')}>
                <div className="signup-step-num">{step > n ? <I.Check size={12}/> : n}</div>
                <div>
                  <div className="signup-step-t">{['Datos básicos','Verificación','Consentimientos'][n-1]}</div>
                  <div className="signup-step-d">{['Email, edad y ciudad','Selfie + DNI','RGPD y uso de IA'][n-1]}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="signup-trust">
            <div className="signup-trust-item"><I.Shield size={14}/> Cumple RGPD</div>
            <div className="signup-trust-item"><I.Lock size={14}/> Datos cifrados AES-256</div>
            <div className="signup-trust-item"><I.Check size={14}/> Servidores en Madrid</div>
          </div>
        </aside>

        <section className="signup-form">
          {step === 1 && (
            <div className="signup-panel">
              <Field label="Tu nombre" hint="Así te verán tus matches.">
                <input type="text" placeholder="Lucía, Mateo…" value={data.name} onChange={e=>set('name', e.target.value)}/>
              </Field>
              <Field label="Correo electrónico" hint="Solo Cruce lo verá.">
                <input type="email" placeholder="tú@correo.com" value={data.email} onChange={e=>set('email', e.target.value)}/>
              </Field>
              <Field label="Crea una contraseña" hint="Mínimo 8 caracteres.">
                <input type="password" placeholder="••••••••••" value={data.pass} onChange={e=>set('pass', e.target.value)}/>
              </Field>
              <div className="signup-row">
                <Field label="Fecha de nacimiento" hint="+18 obligatorio.">
                  <input type="date" value={data.dob} onChange={e=>set('dob', e.target.value)}/>
                </Field>
                <Field label="Ciudad" hint="Solo capitales de provincia.">
                  <select value={data.city} onChange={e=>set('city', e.target.value)}>
                    {PROVINCE_CAPITALS.map(c=><option key={c}>{c}</option>)}
                  </select>
                </Field>
              </div>

              <Field label="Me identifico como">
                <div className="chip-row">
                  {['Mujer','Hombre','No binario','Prefiero no decirlo'].map(g => (
                    <button key={g} className={"chip-btn " + (data.gender === g ? 'active' : '')} onClick={()=>set('gender', g)}>{g}</button>
                  ))}
                </div>
              </Field>

              <Field label="Busco conocer" hint="Opcional, pero si lo rellenas solo verás perfiles que encajen — y ellos a ti.">
                <div className="chip-row">
                  {['Mujeres','Hombres','Personas no binarias','Todas las anteriores'].map(g => (
                    <button key={g} className={"chip-btn " + (data.looking === g ? 'active' : '')}
                      onClick={()=>set('looking', data.looking === g ? '' : g)}>{g}</button>
                  ))}
                </div>
              </Field>

              <Field label="¿Qué vínculo buscas?" hint="Opcional. Si dos personas ponen lo mismo, CRUCE los ordena antes en el muro.">
                <div className="chip-row">
                  {INTENT_OPTS.map(g => (
                    <button key={g} className={"chip-btn " + (data.intent === g ? 'active' : '')}
                      onClick={()=>set('intent', data.intent === g ? '' : g)}>{g}</button>
                  ))}
                </div>
              </Field>

              <Field label="¿Código de Cupido?"
                hint={partnerCodeLocked
                  ? "Código de tu Cupido (viene de su link, no se puede editar)."
                  : "Opcional. Si un partner te lo dio, pégalo aquí."}>
                <input type="text" placeholder="PART-XXXXXX" value={data.partnerCode}
                  readOnly={partnerCodeLocked}
                  style={partnerCodeLocked ? { opacity: .7, background: 'var(--paper-2, #f5f2ec)' } : {}}
                  onChange={e=>set('partnerCode', e.target.value.toUpperCase())}/>
              </Field>

              {error && <div style={{fontSize:13, color:'var(--red)', marginBottom:8}}>{error}</div>}

              <div className="signup-actions">
                <div style={{fontSize:13, color:'var(--ink-3)'}}>
                  ¿Ya tienes cuenta?{' '}
                  <a style={{color:'var(--red)', textDecoration:'underline', cursor:'pointer'}}
                     onClick={()=>{ setMode('login'); setError(''); }}>Entrar</a>
                </div>
                <button className="btn btn-red btn-lg" disabled={!canStep1} style={{opacity: canStep1 ? 1 : .4}}
                  onClick={()=>setStep(2)}>
                  Siguiente <I.Arrow size={14}/>
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="signup-panel">
              <div className="verify-block">
                <div className="verify-cam">
                  <Portrait id="lucia" size="lg" showTag={false} className="verify-portrait"/>
                  <div className="verify-frame"/>
                  <div className="verify-scan"/>
                  <div className="verify-status">
                    <span className="dot"/> Detectando rostro...
                  </div>
                </div>
                <div className="verify-side">
                  <h3 className="serif" style={{fontSize:22}}>1. Selfie con prueba de vida</h3>
                  <p style={{fontSize:14, color:'var(--ink-3)', marginTop:8}}>
                    Mira a cámara, gira la cabeza lentamente cuando te lo pidamos. Tardas 8 segundos.
                    Este selfie <strong>no se publica</strong> ni se comparte con otros usuarios.
                  </p>
                  <ul className="verify-list">
                    <li><I.Check size={12}/> Retira gafas de sol o mascarilla</li>
                    <li><I.Check size={12}/> Luz natural si es posible</li>
                    <li><I.Check size={12}/> El vídeo se borra a los 30 días</li>
                  </ul>
                </div>
              </div>

              <div className="verify-block" style={{marginTop:24}}>
                <div className="verify-dni">
                  <div className="dni-card">
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                      <div className="mono" style={{fontSize:10, color:'var(--ink-3)'}}>DOCUMENTO NACIONAL DE IDENTIDAD</div>
                      <div className="mono" style={{fontSize:10, color:'var(--red)'}}>ESP</div>
                    </div>
                    <div style={{display:'flex', gap:14, marginTop:14}}>
                      <div style={{width:60, height:78, background:'var(--paper-2)', borderRadius:4, position:'relative', overflow:'hidden'}}>
                        <Portrait id="lucia" size="xs" showTag={false} style={{borderRadius:0, height:'100%'}}/>
                      </div>
                      <div style={{flex:1, display:'flex', flexDirection:'column', gap:4}}>
                        <div style={{fontSize:9, color:'var(--ink-4)'}}>APELLIDOS / NOMBRE</div>
                        <div className="serif" style={{fontSize:14}}>MARTÍN GARCÍA, LUCÍA</div>
                        <div style={{fontSize:9, color:'var(--ink-4)', marginTop:4}}>NÚM. DOCUMENTO</div>
                        <div className="mono" style={{fontSize:11}}>••••••••X</div>
                      </div>
                    </div>
                    <div className="mono" style={{marginTop:12, fontSize:8, color:'var(--ink-4)', letterSpacing:'.04em'}}>
                      IDESP&lt;&lt;&lt;•••••••••&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;
                    </div>
                  </div>
                </div>
                <div className="verify-side">
                  <h3 className="serif" style={{fontSize:22}}>2. Documento de identidad</h3>
                  <p style={{fontSize:14, color:'var(--ink-3)', marginTop:8}}>
                    Comprobamos edad y nacionalidad con lectura automática (OCR). No guardamos tu DNI:
                    solo un hash cifrado + confirmación &gt;18.
                  </p>
                  <div className="verified" style={{marginTop:12}}><I.Check size={12}/> Documento validado</div>
                </div>
              </div>

              <div className="signup-actions">
                <button className="btn btn-ghost" onClick={()=>setStep(1)}><I.ArrowLeft size={14}/> Atrás</button>
                <button className="btn btn-red btn-lg" onClick={()=>setStep(3)}>
                  Siguiente <I.Arrow size={14}/>
                </button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="signup-panel">
              <div className="consent">
                <div className="consent-head">
                  <I.Sparkles size={18}/>
                  <div>
                    <h4 className="serif" style={{fontSize:20}}>Consentimiento para uso de IA</h4>
                    <p style={{fontSize:13, color:'var(--ink-3)', marginTop:4}}>
                      Necesario para el test de afinidad y las recomendaciones de matches.
                    </p>
                  </div>
                </div>
                <div className="consent-body">
                  <p>Autorizo a Cruce a procesar mis respuestas del test, mis intereses y mis interacciones dentro
                  de la plataforma mediante <strong>sistemas automatizados (IA)</strong> para calcular mi porcentaje
                  de afinidad con otros usuarios. Comprendo que:</p>
                  <ul>
                    <li>El resultado es <strong>orientativo</strong> — nunca decide por mí.</li>
                    <li>Puedo <strong>revisar</strong> mi puntuación, <strong>rectificarla</strong> o <strong>pedir revisión humana</strong>.</li>
                    <li>Puedo <strong>revocar</strong> este consentimiento en <em>Ajustes → Privacidad</em>: se borran mis datos de IA en 72 h.</li>
                    <li>Cruce cumple el <span className="mono" style={{fontSize:11}}>Reglamento (UE) 2024/1689 sobre IA</span> y el <span className="mono" style={{fontSize:11}}>RGPD</span>.</li>
                  </ul>
                  <label className="consent-check">
                    <input type="checkbox" checked={data.consentIA} onChange={e=>set('consentIA', e.target.checked)}/>
                    <span>Acepto el uso de IA en las condiciones descritas.</span>
                  </label>
                </div>
              </div>

              <div className="consent" style={{marginTop:14}}>
                <div className="consent-head">
                  <I.Shield size={18}/>
                  <div>
                    <h4 className="serif" style={{fontSize:20}}>Términos, edad y privacidad</h4>
                  </div>
                </div>
                <div className="consent-body">
                  <label className="consent-check">
                    <input type="checkbox" checked={data.consent18} onChange={e=>set('consent18', e.target.checked)}/>
                    <span>Declaro ser <strong>mayor de 18 años</strong> y usar Cruce con fines personales.</span>
                  </label>
              <label className="consent-check">
                    <input type="checkbox" checked={data.consentTC} onChange={e=>set('consentTC', e.target.checked)}/>
                    <span>Acepto los <a href="legal.html#terminos" target="_blank" style={{color:'var(--red)', textDecoration:'underline'}}>Términos</a> y la <a href="legal.html#privacidad" target="_blank" style={{color:'var(--red)', textDecoration:'underline'}}>Política de Privacidad</a>. Mis datos no se comparten con terceros con fines comerciales.</span>
                  </label>
                </div>
              </div>

              {error && <div style={{fontSize:13, color:'var(--red)', marginBottom:8}}>{error}</div>}

              <div className="signup-actions">
                <button className="btn btn-ghost" onClick={()=>setStep(2)}><I.ArrowLeft size={14}/> Atrás</button>
                <button
                  className="btn btn-red btn-lg"
                  disabled={!data.consentIA || !data.consentTC || !data.consent18 || busy}
                  style={{opacity: (data.consentIA && data.consentTC && data.consent18 && !busy) ? 1 : .4}}
                  onClick={submitRegister}>
                  {busy ? 'Creando tu cuenta…' : <>Ir al test de afinidad <I.Arrow size={14}/></>}
                </button>
              </div>
            </div>
          )}
        </section>
      </div>
    </div>
  );
}

function Field({ label, hint, children }) {
  return (
    <div className="field">
      <label className="field-label">{label}</label>
      {children}
      {hint && <div className="field-hint">{hint}</div>}
    </div>
  );
}

window.Signup = Signup;