// Reset-password page — rendered when pathname = /reset-password (Firebase action-code flow)

function ResetPasswordOverlay({ oobCode }) {
  const [checkedEmail, setCheckedEmail] = React.useState(null); // null while checking, '' if invalid
  const [codeError, setCodeError] = React.useState(null);

  const [password, setPassword] = React.useState('');
  const [confirm, setConfirm]   = React.useState('');
  const [status, setStatus]     = React.useState(null); // null | 'loading' | 'error' | 'success'
  const [errMsg, setErrMsg]     = React.useState('');

  React.useEffect(() => {
    if (!oobCode) { setCodeError('Este enlace de recuperación no es válido.'); return; }
    window.fbAuth.verifyPasswordResetCode(oobCode)
      .then(email => setCheckedEmail(email))
      .catch(() => setCodeError('Este enlace de recuperación no es válido o ya expiró.'));
  }, [oobCode]);

  async function submit(e) {
    e?.preventDefault?.();
    if (!password || !confirm) { setStatus('error'); setErrMsg('Complete todos los campos.'); return; }
    if (password !== confirm)  { setStatus('error'); setErrMsg('Las contraseñas no coinciden.'); return; }
    if (password.length < 6)   { setStatus('error'); setErrMsg('La contraseña debe tener al menos 6 caracteres.'); return; }

    setStatus('loading'); setErrMsg('');
    try {
      await window.fbAuth.confirmPasswordReset(oobCode, password);
      setStatus('success');
      setTimeout(() => { window.location.href = '/'; }, 2200);
    } catch (err) {
      setStatus('error');
      setErrMsg(err.code === 'auth/weak-password' ? 'Contraseña muy débil (mín. 6 caracteres).' : (err.message || 'Error al restablecer la contraseña.'));
    }
  }

  const wrapStyle = { position:'fixed', inset:0, display:'flex', alignItems:'center', justifyContent:'center', background:'linear-gradient(135deg,#0F1524 0%, #142036 50%, #0A0E1A 100%)', zIndex:9999 };
  const cardStyle = { width:420, background:BC.surface, borderRadius:12, boxShadow:'0 30px 80px rgba(0,0,0,.5)', overflow:'hidden', position:'relative', zIndex:1 };
  const bgGlow    = { position:'absolute', inset:0, backgroundImage:'radial-gradient(circle at 20% 30%, rgba(34,144,206,.18) 0%, transparent 40%)', pointerEvents:'none' };

  const brandStrip = (
    <div style={{ background:BC.brand, padding:'22px 28px 18px', color:'#fff', display:'flex', alignItems:'center', gap:14 }}>
      <img src="/frontend/logo.png" alt="BControl" style={{ height:44, objectFit:'contain' }}/>
      <div>
        <div style={{ fontWeight:600, fontSize:15 }}>Nueva contraseña</div>
        <div style={{ fontSize:11, color:'rgba(255,255,255,.8)', fontFamily:BC.mono, letterSpacing:'.04em' }}>Recuperación de cuenta</div>
      </div>
    </div>
  );

  const footer = (
    <div style={{ padding:'10px 28px', borderTop:'1px solid '+BC.divider, background:BC.surfaceAlt, fontSize:10, color:BC.inkFaint, fontFamily:BC.mono, letterSpacing:'.04em', display:'flex', justifyContent:'space-between' }}>
      <span>CARLOS INCENDIO SPA</span><span>SANTIAGO · CHILE · 2026</span>
    </div>
  );

  if (codeError) {
    return (
      <div style={wrapStyle}>
        <div style={{ ...cardStyle, textAlign:'center' }}>
          {brandStrip}
          <div style={{ padding:'32px 28px 24px' }}>
            <Icon name="warning" size={36} color={BC.fire.fg}/>
            <div style={{ fontSize:16, fontWeight:600, marginTop:12, color:BC.ink }}>Enlace inválido</div>
            <div style={{ fontSize:13, color:BC.inkMuted, marginTop:8 }}>{codeError}</div>
            <a href="/" style={{ display:'inline-block', marginTop:18, fontSize:13, color:BC.brand }}>Ir al inicio</a>
          </div>
          {footer}
        </div>
      </div>
    );
  }

  if (status === 'success') {
    return (
      <div style={wrapStyle}>
        <div style={{ ...cardStyle, textAlign:'center' }}>
          {brandStrip}
          <div style={{ padding:'32px 28px 24px' }}>
            <Icon name="check" size={40} color={BC.ok.fg}/>
            <div style={{ fontSize:16, fontWeight:600, marginTop:12, color:BC.ink }}>Contraseña restablecida</div>
            <div style={{ fontSize:13, color:BC.inkMuted, marginTop:8 }}>Ya puedes iniciar sesión con tu nueva contraseña. Redirigiendo…</div>
          </div>
          {footer}
        </div>
      </div>
    );
  }

  if (checkedEmail === null) {
    return (
      <div style={wrapStyle}>
        <Icon name="refresh" size={24} color={BC.brand} style={{ animation:'bc-spin .7s linear infinite' }}/>
      </div>
    );
  }

  return (
    <div style={wrapStyle}>
      <div style={bgGlow}/>
      <div className="bc-slide-up" style={cardStyle}>
        {brandStrip}
        <form onSubmit={submit} style={{ padding:'24px 28px 26px' }}>
          <div style={{ fontSize:13, color:BC.inkMuted, marginBottom:18 }}>
            Establece una nueva contraseña para <strong>{checkedEmail}</strong>.
          </div>

          <label style={{ display:'block', fontSize:11, fontWeight:600, color:BC.inkSubtle, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6 }}>Nueva contraseña</label>
          <div style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 12px', border:'1px solid '+BC.border, borderRadius:6, background:BC.surfaceAlt, marginBottom:14 }}>
            <Icon name="power" size={15} color={BC.inkFaint}/>
            <input className="bc-input" autoFocus type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="mín. 6 caracteres"
              style={{ flex:1, border:'none', background:'transparent', fontSize:14, color:BC.ink }}/>
          </div>

          <label style={{ display:'block', fontSize:11, fontWeight:600, color:BC.inkSubtle, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6 }}>Confirmar contraseña</label>
          <div style={{ display:'flex', alignItems:'center', gap:8, padding:'9px 12px', border:'1px solid '+BC.border, borderRadius:6, background:BC.surfaceAlt, marginBottom:14 }}>
            <Icon name="power" size={15} color={BC.inkFaint}/>
            <input className="bc-input" type="password" value={confirm} onChange={e => setConfirm(e.target.value)} placeholder="repite la contraseña"
              style={{ flex:1, border:'none', background:'transparent', fontSize:14, color:BC.ink }}/>
          </div>

          {status === 'error' && (
            <div style={{ padding:'8px 12px', background:BC.fire.bg, color:BC.fire.fg, border:'1px solid '+BC.fire.bar, borderRadius:6, fontSize:12, marginBottom:12, display:'flex', alignItems:'center', gap:8 }}>
              <Icon name="warning" size={14}/> {errMsg}
            </div>
          )}

          <button type="submit" disabled={status==='loading'} className="bc-btn"
            style={{ width:'100%', padding:'11px 14px', background:BC.brand, color:'#fff', border:'none', borderRadius:6, fontSize:14, fontWeight:600, display:'flex', alignItems:'center', justifyContent:'center', gap:8 }}>
            {status==='loading' && <Icon name="refresh" size={14} style={{ animation:'bc-spin .7s linear infinite' }}/>}
            {status==='loading' ? 'Guardando…' : 'Establecer contraseña'}
          </button>
        </form>
        {footer}
      </div>
    </div>
  );
}

window.ResetPasswordOverlay = ResetPasswordOverlay;